一、子绝父相
绝对定位的参照元素：父元素
1.子元素设置绝对定位，父元素设置相对定位
2.子元素设置绝对定位，父元素设置绝对定位
3.子元素设置绝对定位，父元素设置固定定位
这三种情况，子元素的参照元素都是父元素
二、opacity属性
0:完全透明
1:完全不透明
0-1：半透明
将内容（及所有后代）、背景一起透明，自身透明，子元素也透明
三、filter属性
1.兼容性：仅仅支持IE6、7、8、9,在IE10及以上被废除
2.使用:IE浏览器专属
3.语法：
filter：Alpha（opacity=n）
n的取值在0-100之间表示半透明，0表示完全透明，100表示完全不透明
想用filter实现父元素背景透明，子元素不透明：
父元素加静态定位，子元素加相对定位，能阻止透明度的传递
四、BFC特性
1.概念：
BFC（Block formatting context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块级标签）参与，它规定了内部的Block-level box（块级标签）如何布局，并且与这个区域外部毫不相干。
通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
2.怎样生成BFC：
跟标签（html标签）
float的值不为none
overflow的值不为visible
display的值为inline-block
position的值为absolute或fixed
3.BFC的特性
1.内部的标签默认会在垂直方向上一个接一个的放置
2.垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。
3.每个标签的左外边距与包含块的左边界相接触（从左到右），即使浮动标签也是如此
4.BFC的区域不会与float的标签区域重叠
5.计算BFC的高度时，浮动子标签也参与计算
6.BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签,反之亦然
五、BFC解决的问题1
原因：浮动会让其所在的父元素撑不起来高度
解决办法（特性5）：计算BFC的高度时，浮动子标签也参与计算
触发BFC的几个条件都可以用
六、 BFC解决的问题2
并列关系，兄弟关系
兄弟关系外间距塌陷问题
现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；
两个值一样大，取当前值
两个值不同，取较大值
原因：并列关系的两个元素共用了一个外间距区域
解决办法：
分别给这两个元素套一个父元素，并为父元素设置overflow：‘hidden’
原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签margin会发生重叠
解决办法(特性6)：BFC就是一个独立的容器，容器内部的元素不会影响容器外面，反之亦然
触发BFC只有overflow属性能用
七、BFC解决的问题3
防止字体环绕
原因：浮动 脱离标准流不脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面的盒子是不会被遮盖的，文字 反而还会环绕浮动的盒子。
解决办法（特性6,4）：BFC就是页面上的一个独立容器，容器里面的子标签不会影响外面标签
BFC的区域不会与float的标签区域重叠
触发BFC除了（绝对，固定定位）属性其余都能用
具体哪些属性能用还是不能用，得看具体布局，但是绝对，固定定位不能用的
八、BFC解决的问题3
原因:浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字，反而还会环绕浮动的盒子。
解决办法：BFC就是页面上的一个独立容器，容器里面的子标签不会影响外面标签
BFC的区域不会与float标签区域重叠
九、BFC解决的问题4
两栏自适应和三栏自适应
两栏自适应：左侧固定宽度 右侧自适应的状态 随着浏览器窗口改变大小（左侧浮动，右侧触发BFC）
三栏自适应：左右侧固定宽度 中间自适应 随着浏览器的窗口改变大小（左侧左浮动 右侧右浮动 中间触发BFC）
原因：浮动 脱离标准流不脱离文本流，浮动的标签提升层级会覆盖正常标签
解决办法：BFC就是页面上的一个独立容器，容器里面的子标签不会影响外面标签
BFC的区域不会与float的标签区域重叠
触发BFC的条件 触发BFC只有overflow属性能用
十、盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）
h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。 必需 单位： px
v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。 必需 单位： px
blur：阴影模糊度，不能取负数。 可选 单位： px
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选 单位： px
inset：表示添加内阴影，默认为外阴影。可选
box-shadow: 0 0 20px 10px green inset;
当 spread 为0时，阴影大小与元素大小相同
多个阴影逗号隔开
.box1 {
background-color: yellow;
/* 多个阴影 */
/* 盒子阴影 */
box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;
}
十一、文字阴影
text-shadow: h-shadow v-shadow blur color;
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;
h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊值；
color 可选，阴影的颜色；
.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}
十二、圆角
px
百分比
语法： border-radius: ;
单位：px，百分比
左上角：border-top-left-radius: ;
右上角：border-top-right-radius: ;
左下角：border-bottom-left-radius: ;
右下角：border-bottom-right-radius: ;
（1）一个值：设置四个角的圆角大小；
（2）两个值：设置左上和右下、右上和左下的圆角大小；
（3）三个值：设置左上、右上和左下、右下的圆角大小；
（4）四个值：设置左上、右上、右下、左下的圆角大小。
border-radius: 20px; 四个角都有圆角
border-radius: 20px 40px; 左上角和右下角 右上角和左下角
border-radius: 20px 40px 60px; 左上角 右上角和左下角 右下角
border-radius: 20px 40px 60px 80px; 左上角 右上角 右下角 左下角 （顺时针角度）
border-radius: 50%; 是一个圆形 宽高一样