一、css
1. 说一下css的盒模型
在HTML中所有元素都可以看成是一个盒子
盒子的组成: 内容content、内边距padding、边框border、外边距margin
盒模型的类型:
标准盒模型
margin + border + padding + content
IE盒模型
margin + content(border + padding)
控制盒模型的方式:box-sizing: border-box (IE盒模型) ; content-box (标准盒模型)
2. css选择器的优先级?
css的特性: 继承、优先、层叠
优先级:写css样式时,给一个元素多种样式,谁的优先级高就显示谁
标签、类/伪类/属性、全局、id、行内、!important
这些选择器优先级:!important > 行内 > id > 类 > 标签 > 全局
3. 隐藏元素的方法
display: none;
元素在页面上消失,不占据空间
visibility: hidde;
让元素隐藏,占据空间位置,处于不可见的状态
opacity: 0;
元素变透明,占据空间位置
position: absolute;
让元素处于页面外,不占据空间位置
clip-path
剪切元素
4. px和rem的区别
px是像素,在每个显示器上的px大小都是相同的
rem是一个相对的单位,它参照的是html节点上的font-size的值,
可以在html节点上设置font-size: 62.5%, 这样的1rem = 10px
5. 重排与重绘的区别?
重排(回流):浏览器会根据所有的样式计算出盒模型在页面上的布局和大小,如果改变
DOM会影响到预算的几何属性,这时浏览器需要重新构造渲染树,这个 过程称为重排
重绘:浏览器就昂收到影响的部分重新绘制在屏幕上的过程称为重绘
引起重排重绘的原因:
- * 添加或删除DOM元素
- * 元素尺寸位置改变
- * 浏览器页面初始化
- * 浏览器窗口大小改变
注意:重排一定导致重绘,重绘不一定导致重排,比如改变某些元素的背景颜色,颜色等减少重排重绘的方法:
- 不在布局信息改变时做DOM查询
- 对于多次重排的元素,比如动画,使用绝对定位使其脱离文档流,不影响其他元素
6. 元素水平居中的方式有哪些
1. 定位 + margin
通过设置子元素在父元素中上下左右都是0,用margin: auto来自动居中
2. 定位 + transform
- 设置子元素在父元素中top和left都是50%,用transform的translate(-50%, -50%)实现居中
- 设置子元素在父元素中top和left都是calc(50% - 自身宽高的一半)
3. flex布局
justify-content: center align-item: center
4. grid布局
justify-item: center align-item: center
5. table布局
display: table 子元素的行设置display: table-row, 列设置display: table-cell