网页布局
一、网页布局发展二、 float三、position属性值static:默认值relative:absolutefixed堆叠顺序z-index一、网页布局发展
原先:用table布局(工作量大,维护困难,但兼容性好)现在:用div+css布局(除了兼容性,都好)二、 float
为了实现两个块级元素并列显示属性:如果包含框太窄,浮动块向下移动,能放下为止,如果浮动元素的高度不同,浮动块会尽可能向上移动
文字环绕效果实现:图片浮动,但文字不能被覆盖而形成环绕
(调整图片和段落之间空白需要设置图片的padding或margin)
浮动会导致父元素高度塌陷
解决方案:
在包含浮动元素的父元素上
设置伪类 :after 并添加clear:both属性(清除浮动带来的效果)
添加overflow:hidden(溢出处理)
注意:
浮动元素距离父元素边框的位置,是该侧的父元素 padding +自身 margin
的值
通常不会超过父元素的边界
元素一旦浮动就不属于父元素了
浮动元素不会相互重叠
不能上下浮动
如果父元素宽度不够,浮动元素会另起一行显示
三、position
属性值
static:默认值
relative:
保留自身位置
相对原来位置移动
配合top,left,bottom,right 等使用