简单的定位布局
2016-10-01 本文已影响7人
盗花
浮动布局
1.float
备注：
a.当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
b.当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。
c.当父包含块缩成一条时，用clear:both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。
2.清除浮动的常用方法
对受到影响的元素设置以下方法：
方法1
clear，常用clear:both或者clear:left或者clear:right。
方法2
同时设置width:100%（或固定宽度）+ overflow:hidden。
方法3
使用换行标签<br>，但不建议使用。
positon定位
1.相对定位
positon:relative
相对于自身原有位置进行偏移，仍旧处于标准文档流中，拥有偏移属性和z-index（空间的层堆叠）属性。
2.绝对定位
position:absolute
使用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况。
特点：
1)建立了以包含块为基准的定位，完全脱离了标准文档流，拥有偏移属性和z-index属性。
2)若绝对定位未设置偏移量，则无论是否存在已定位的祖先元素，都保持在该元素的初始位置，脱离了标准文档流。
3)若绝对定位设置了偏移量，偏移参照基准为：
a.若无已定位的祖先元素，以<html>(非<body>)为偏移参照基准。
b.若有已定位的祖先元素，以距离其最近的已定位祖先元素为偏移参照基准。
4)当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
