2018.10.22塌陷,绝对,固定,相对定位

高度塌陷

BFC块的格式化环境
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

开启BFC
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为 inline-block
4.将元素的overflow 设置为一个非visible的值 设置为hidden

haslayout ie6的隐藏属性
zoom:1; 只在ie中支持 zoom表示放大的意思

去掉项目符号
list-style:none;

文字居中
text-align:center

去掉文字下划线
text-decoration:none;

鼠标移入时的效果
hover:

清除浮动
clear:left 清除左侧
clear:right 清除右侧
clear:both; 清除两侧,其实是清除影响最大的浮动
清除浮动可以解决高度塌陷

伪元素表示特殊的位置
伪类表示特殊的状态

解决高度塌陷的三种方式
1,将元素的overflow: hidden; zoom:1;
2, 插一个空白的标签,然后给它清除浮动
3, 使用伪元素after,模拟插入一个空白的块,display设置成块,然后清除浮动
在ie6里加一个 clearfix{zoom:1}

相对定位
开启了相对定位后,如果不设置偏移量,那么位置不动
position:static left,right,top,bottom,z-index 不起作用
相对定位就是相对于这个元素在文档流中原来的位置发生改变
相对定位不会脱离文档流
相对定位会使元素提升一级
相对定位不会改变元素的性质
position:relative;
left:200px;

绝对定位
脱离文档流
绝对定位,也是相对于离他最近的,开启了定位的祖先元素进行定位的
我们要是开启元素的绝对定位,一般情况下都会开启父元素的相对定位
绝对元素也会提示层级
绝对定位可以改变元素的性质
position:absolute

固定定位
脱离文档流
固定定位也是一种特殊的绝对定固定定位永远相对于浏览器窗口进行定位
固定定位它会固定在我们浏览器的某一个位置,不会随着滚动条的变化而变化
position:fixed;

元素的层级
z-index:
对于没有开启position定位的不能用z-index;

父元素设置的层级再高,也不会盖住子元素
opacity 设置透明度 0~1之间
filter: ie8以下 0~100之间
filter:alpha(opacity=50); ie8以下的用法

你可能感兴趣的:(2018.10.22塌陷,绝对,固定,相对定位)