定位:position
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
属性 | 解释 |
---|---|
inherit | 从父元素继承position属性的值 |
static | 默认的普通流 |
relative | 相对定位,相对于元素本身正常位置(相对于static)进行定位 |
absolute | 绝对定位,相对于第一个祖先元素进行定位 |
fixed | 绝对(固定)定位,相对于浏览器窗口定位 |
元素与文档流的关系:
属性 | 关系 |
---|---|
relative | 相对定位时,无论元素是否移动,元素在文档流中占据且只占据原来的空间(普通流的空间) |
absolute | 绝对定位时,元素脱离普通流,定位与文档流无关 |
fixed | 脱离普通文档流,固定在浏览器窗口某个位置 |
注意:使用绝对定位时,若想相对于某个父元素位置定位,需要给父元素添加属性:position:relative;因为absolute是相对于 static 定位以外的第一个父元素进行定位的。
浮动:float
浮动性质:
当区域块宽度不够时,浮动元素自动下挪;
浮动会让元素脱离文档流,但并非完全脱离: 元素甲添加浮动left后,后面的非浮动元素乙占据了甲的位置,与甲重合,但是乙元素的文本内容会受浮动元素的影响并移动以留出空间。
浮动前:
浮动后:注意文本位置的变化。
clear属性:
属性 | 解释 |
---|---|
none | 默认值,允许两边都可以有浮动对象; |
left | 不允许左边有浮动对象 |
right | 不允许右边有浮动对象 |
both | 不允许有浮动对象 |
对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素
overflow:hidden
根据属性名字来看,hidden应该是隐藏超过区域块元素(一般是float元素)的内容;但是当外层区域没有设置高度时,使用overflow:hidden会扩充外层区域框的高度,直到把内层元素包含进去。