IFC/BFC
一:IFC>行内元素>行内格式化下文
BFC>块级元素>块级格式化下文
BFC:独立区域,区域内发生改变与区域外没有关系。需要被触发(被生成)。Overflow hidden
1:BFC布局规则:
内部垂直
垂直方向距离由margin决定
BFC区域不会与float box重叠
BFC是页面上的一个隔离的独立容器,容器里面的子元素,不会影响外面的元素
哪些元素会生成BFC
根元素、float属性不为none。
display为inline-block / table-cell / table-caption,flex,inline-flex
overflow不为visible
ps:通常情况下用overflow 触发BFC环境
2:IFC
创建IFC环境:让行框高度包含100%,让行框内部元素使用Vation-align
不需要被触发
找到一个最大的元素来设置
二:
opacity属性设置模糊程度:例如:opacity valute 从透明值(0.0)——完全不透明(1.0)
背景蒙版模糊 rgba 效果 div hove{ raba 0 0 0 0.8}
curson:设置光标样式(pointer 箭头为手指过去成手的形状的样式)
三:CSS3模块
1:通过新边框样式改变边框样式
boder-radius(边框圆角)
根据左上、右上、右下、左下顺序分布
boder-radius:10px 全部
boder-radius:10px 20px对角相同
2:box-shadow 边框阴影
语法:box-shadow:h-shadow ,v-shadow,blur,color
例如:box-shadow: 10px 20px 10px red
文本阴影
语法:text-shadow:h-shaow,v-shaow,blur,color
ps:设置负值改变方向
四:2D和3D转换
1:2D:tansform:translate(x,y)
。。。。填写兼容的浏览器
2:rotate顺时针旋转。例如:transform:translate(45:deg)负数为逆时针
3:元素尺寸增加或减少,以倍数增加或减少
一:CSS过渡
transtion:
1:规定哪一个属性使用
2:规定效果时长
3:配合hover效果使用
wicth: height: 设计时长
二、动画
@keyframes规则
1:@keyframes用于创建动画,规定动画规则或animation属性
2:属性名称@keyframes需要捆绑在某个选择器上
规定动画名称
规定动画时长
例:div{ animation 命名 时间
@keyframes{ 0%(开始)···
20%(过程)...
100%(结束)..