一、说一下Css的盒子模型?
HTML中所有元素都可以看成是一个盒子
盒子的组成:content、padding、border、margin
盒子的类型:
- 标准盒模型:margin+border+padding+content -- box-sizing:content-box(默认)
- IE盒模型:margin+content(border+padding) -- box-sizing:border-box
二、Css选择器的优先级?
Css的特性:继承性、层叠性、优先级
不同级别下:
内联样式 > id选择器 > 类选择器、伪类选择器 > 元素选择器 > 通配符选择器 > 浏览器自定义
相同级别内:
同一级别中后书写 > 先书写的
css的引入方式不同 => 优先级的不同 => 内部引入 > 外部 >导入引入
三、隐藏元素的方法有哪些?
- display:none(元素在页面消失,不占据空间)
- opacity:0(透明度为0,占据空间)
- visibility:hidden (元素消失,占据空间)
- position:absolute
四、px和rem的区别是什么?
px是像素,显示器上呈现画面的像素,绝对单位长度
rem是相对单位,相对于html根节点的font-size的值
五、重绘和重排有什么区别?
- 重排(回流):布局引擎会根据所有样式计算出盒模型在页面的位置和大小
- 重绘:计算好盒模型的位置、大小和其他一些属性,浏览器根据每个盒模型特性进行绘制
对DOM的大小、位置修改 => 重排
对DOM的样式修改 => 重绘
六、让一个元素水平垂直居中的方式有哪些?
- 定位 + margin
- 定位 + transform
left:0
right:0
transform:translate(-50%,-50%)
- display
display:flex
justify-content:center
align-items:center
- grid布局
- table局部
七、Css哪些属性可以继承,哪些不可以?
- 字体属性:font
- 文本属性:line-height
- 元素的可见性:visibility:hidden
- 表格布局的属性:border-spacing
- 列表的属性:list-style
- 声音的样式属性
八、有没有用过预处理器?
预处理语言增加了变量、函数、混入等强大的功能
SASS LESS
- 支持样式嵌套
- 支持定义变量 -- @global:#eee;