本文共 1054 字，大约阅读时间需要 3 分钟。

一，浮动布局

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

用于设置目标对象的漂浮层的层序，值大则漂浮在上面

   
    绝对定位
   
	
   
    相对定位
   
	
   
    position:static
   

转载地址：http://ectrn.baihongyu.com/