2.页面布局示例笔记

1.CSS中的三种定位机制

• 标准文档流 就是流式布局中的定位
• 浮动定位
• 相对定位

2.当元素设置了float或者相对定位的时候，就无法通过设置margin的auto进行居中了

3.设置了浮动的元素任然处于标准文档流当中，任然会占用标准文档流的影响。而不像相对定位中，会处于不同的层面。

4.设置了浮动之后，只会对其后面紧邻的第一个统计统计元素造成影响。紧邻的这个元素会根据该元素所设置的浮动而紧挨着它。

5.清除浮动：为受到了浮动元素影响的元素清楚影响。

 1 tag{
 2      clear:both
 3 }
 4
 5 或者
 6
 7 tag{
 8     width:100%;
 9     overflow:hidden;
10 }

6.br标签在清除浮动效果时，没有作用。因为一个br标签只能换一次行，加多次br标签对于页面不美观

7.当元素设置为绝对定位时：若没设置宽度，其宽度随内容调节。

1 绝对定位
2 selector{
3       position:absolute;或者fixed
4 }
5
6 相对定位 --指代的是相对于其本身原有的位置,不会完全脱离标准文档流
7 selector{
8       position:relative;
9 }