一,浮动布局
float:left | right
浮动的属性是浮动,大家都知道用了浮动后整个页面就在一行上布局,常见的有:前端网页布局,导航和商场的应用。
clear浮动属性一般用: clear:both | right| left
个人感悟:浮动属性是最常用的属性,比如你在布局排版的时候,在前端层次设计框架下利用浮动可以使你的网页更加美观
当然一定要注意清除使用后的浮动属性,否则会影响下面的格块等等,从而使得布局乱套。
二,盒子模型
盒子模型是前端里面的一种类似于“嵌套式”架构的一种CSS布局方式,它的存在让前端的布局更加具有简洁,功能齐全,省地方的好处。
margin 外边距
margin-top 上 外边距
margin-right 下 外边距
margin-bottom 左 外边距
margin-left 右 外边距
border 边框
border-top 上边框
border-bottom 下边框
border-right 右边框
border-left 左边框
padding 内边距
padding-top 上 内边距
padding-left 左 内边距
padding-right 右 内边距
padding-bottom 下 内边距
content 内容
span默认inline盒模型,div默认block盒模型
形状如下图所示
个人总结:盒子模型也是前端最最最基础的一个布局模式,每一个好的前端开发者都会拥有自己的一个前端开发习惯,最常见的就是盒子模型式开发,层次脉络都会一览无余,代码可读性也相当高,建议务必掌握!
三,position属性
定位属性有两种常用的模式是绝对和相对
position:absolute
绝对定位,这个的意思是以前面最近的布局为基准,不再以浏览器的开始页面为基准来进行定位,此时可以在前布局上进行布局属性的增添。绝对定位的元素的位置相对于的队队队最近已定位祖先元素,如果元素没有已定位的祖先元素,它那么的位置相对于最初的所有游戏块。
position:relative
相对定位,这个很容易理解,如果存在已经用属性布局完毕后,用相对定位可以在它(前一个对象)的基础上进行一定的调整。
position:static
目标对象仅以页面作为参考系
z-index
用于设置目标对象的漂浮层的层序,值大则漂浮在上面
<div style="position:absolute;left:40px;top:20px;width:190px;height:100px;z-index:2;background-color:#ccc;">绝对定位</div>
<div style="position:relative;left:50px;top:10px;width:200px;height:100px;z-index:3;background-color:#999;">相对定位</div>
<div style="position:static;left:100px;top:40px;width:80px;height:88px;z-index:1;background-color:#512;">position:static</div>