CSS布局在整个前端开发中占据了大约50-70%的工作量，在遵循web规范的前提下，编写合乎规范的前端代码，实现结构、样式和行为的分离，对于后期代码的维护以及不同的开发人员之间的协作具有重要的意义。
在编写html的过程中,强调使用带有明确语义的标签，Html中标签除了div和span之外都是有明确的语义的，这样一方面可以增强代码的可读性，另一方面可加快浏览器的解析速度。
HTML中的每一个标签，根据其其自身的属性可以区分为行级元素还是块级元素，一般情况下，应该尽可能使用标签默认的位置进行布局，当默认位置不能满足展示需求的时候，再考虑采用css代码来进一步控制标签元素的位置。 CSS定位的基础是基于盒子模型，介绍如下：
任何页面元素都可以看成一个盒子
一个盒子模型由content、padding、border、margin四部分组成。
width(height)的值指content的width(height)+padding的值。
border：border-top、border-bottom、border-left、border-right
width: thin、medium、thick、数值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
padding：padding-top、padding-bottom、padding-left、padding-right
margin：margin-top、margin-bottom、margin-left、margin-right
对一行而言，两个块的margin = margin-right + margin-left
对换行而言，两个块的margin = margin-bottom和margin-top中较大者
对父子而言，子块的margin = 子块的margin + 父块的padding
当margin设为负数时，块会向相反的方向移动，甚至覆盖另外的块
定位的目的是在框元素的padding、margin等自身属性无法满足需求时，改变元素在html文档中的默认位置，定位到目标区域时使用。如果要使用 top,bottom,left,right 属性，就必须要使用relative和absolute定位属性。
在CSS中关于定位的类型有如下几种：
position:relative | absolute | static | fixed
static(静态：没有特别的设定，遵循基本的定位规定，保持原来的位置不变，不能通过z-index进行层次分级。
relative(相对定位)：对象不脱离文档流，对象不可层叠、参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。也就是说尽管对象偏离了原来应该所在的位置，但是原来的位置还是占据中，不然其他元素用。
absolute(绝对定位)：脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。本来应该在的位置被让出来的，其他的元素填充那个位置。
fixed（固定定位）：这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
注：
CSS中定位的层叠分级：z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数
相对定位是相对于该元素本来在文档中应该出现的位置。
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
决定定位是相对于其父元素而言。
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
如果要是要使父元素包含子元素的话，应该使父元素的宽和高包含子元素的。
Div1为绝对定位：其脱离为文档流。不占据文档流的位置，position: absolute;left: 150px;top:20px;
Div2为相对定位：注意是相对其应该出现的位置，position:relative ;top:20px;left:150px;
Div21为相对定位：图所示，可以理解。
#div0{
border: 2px solid #FE7633; height:220px; width:380px;
}
#div1{
border: 2px solid #C2DCFF;
height: 80px;
width: 150px;
position: absolute;
left: 150px;
top:20px;
}
#div2{position:relative ;top:20px;left:150px; border:2px solid #646464; height:120px; width:150px}
#div21{border:2px solid #A5D69C; height:120px; width:50px}
#div3{ border:2px solid #A5D69C; height:20px; width:250px;}
网友评论