html 中的三种布局方式
标准流
浮动
定位
两大元素
1. 块级元素
2. 内联元素
CSS 中的 float
参数: left right none inherit(继承浮动)
实现文字环绕图片
一旦我们给元素 float 就会变成块状元素 (脱离正常的文档流)
float 会脱离正常的标准流使父元素检测不到子元素的高度
但其他元素还能知道
解决方法:
1. 收的那个给父元素添加高度
2. 通过 clear 清楚内部和外部浮动
3. 给父元素添加 overfloat 属性并结合 zoom:1 使用
4. 给父元素添加浮动
clear 属性
参数: left none right both
css 中的 position
position 属性决定了元素讲如何定位
通过 top,right,bottom,left 实现位置
position 中的可选参数
static
relative(不脱离文档流)
absolute(脱离文档流)
fixed(固定定位)(脱离文档流)
应用场景: 1. 对联广告 2. 登录弹窗
不受制与父元素 (absolute 受制)
inherit(继承)
z-index
可以设置元素的叠加顺序, 但依赖定位属性
z-index 大的元素会覆盖 z-index 小的元素
z-index 为 auto 的元素不参与层级比较
z-index 为负值, 元素被普通流中的元素覆盖
cursor:pointer 改变鼠标的形状
来源: http://www.bubuko.com/infodetail-2497451.html