web前端基础篇④

时间:2023-12-25 16:51:49

1.BFC-块级元素-块级格式化上下文
布局规则:
独立区域,与外部毫不相关
内部box会在垂直方向,一个个放置
box垂直方向距离由margin决定
BFC的区域不会与float box重叠
计算BFC高度时,也要计算浮动元素
它是被触发(被生成)的
会触发生成BFC环境的元素:
根元素
float属性不为none
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inline flex
overflow不为visible
使用overflow-hidden可以最大程度的在不影响其他元素的情况下避免生成BFC环境。

IFC-行内元素-行内格式化上下文
不需要触发
创建一个IFC的环境,让行框的高度是包含块的高度的100%,让行框内部的元素使用vertical-align:middle,就可以实现垂直居中。因此,我们可以在行框中插入一个高度100%的inline-block元素,把整个行框撑高直到包含块的100%。
2.css3浏览器前缀
-webkit-谷歌或苹果
-o-欧朋
-moz-火狐
-ms-ie9
3.边框圆角 简写属性
border-radius:10px 四个角
               10px 20px 左上右下、右上左下 对角线
               10px 20px 30px 左上、右上左下、右下
               10px 20px 30px 40px 由左上开始 顺时针方向
4.边框阴影 简写属性
box-shadow:10px 20px 30px grey
            水平  垂直  模糊  颜色
可接负值,为相反方向。
5.文字阴影
text-shadow 使用同上
6.transform 2d转换
translate偏移 rotate旋转角度 scale按比例缩放 skew倾斜转换