开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
1、说一下css的盒模型。
在HTML页面中的所有元素都可以看成是一个盒子 盒子的组成:内容content、内边距padding、边框border、外边距margin
标准盒模型 margin + border + padding + content
IE盒模型 margin +content(border +padding)
控制盒模型的模式: box-sizing:content-box（默认值，标准盒模型)、border-box(IE盒模型) ;
ep:
div{
height:200px;
width:200px;
padding:10px;
border:3px;
margin:200px;
}
在标准盒模型中盒子是226px x 226px (h/w+padding+border)；
在IE盒模型中是200px x 200px当时内容被padding和border压缩成174px x 174px
2、css选择器的优先级?
css的特性:继承性、层叠性、优先级
优先级:写css样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式。
标签、类/伪类/属性、全局选择器、行内样式、id、 !important
顺序：!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器
a[target]{
color:blue;
}
3、隐藏元素的方法有哪些?
display: none;不占据空间，不能点击- 元素在页面上消失，占据空间
opacity: 0;;占据空间可点击 - 设置了元素的透明度为0，元素不可见，占据空间位置
visibility: hidden;占据空间不可点击 - 让元素消失，占据空间位置，一种不可见的状态
position: absolute;（移动到画面外） - clip-path: 元素剪切掉
clip-path: circle(0%);
继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ： 修改元素会造成重绘，性能消耗较少
4、px和rem的区别是什么?
px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%; 1rem = 10px;(16px*62.5%=10px)
5、重绘重排有什么区别?
重排（回流）:布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
重绘:计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
浏览器的渲染机制
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
对DON的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘
6、让一个元素水平垂直居中的方式有哪些?
- 定位+margin
- 定位+transform
- flex布局
- grid布局
- table-cell布局
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}
.parent {
display: table-cell;
height: 200px;
width: 200px;
background-color: orange;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
7、CSS的哪些属性哪些可以继承?哪些不可以继承?
css的三大特性:继承、层叠、优先级
子元素可以继承父类元素的样式
- 1.字体的一些属性: font
- 2.文本的一些属性: line-height
- 3.元素的可见性: visibility:hidden
- 4.表格布局的属性: border-spacing
- 5.列表的属性: list-style
- 6.页面样式属性: page
- 7.声音的样式属性
8、有没有用过预处理器?
预处理语言增加了变量、函数、混入等强大的功能
9、已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。
<img src="1.jpg" style="width:480px!important;">
<img src="1.jpg" style="width:480px!important; max-width: 300px"><img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" ><img src="1.jpg" style="width:480px!important; width:300px!important;">
10、如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
兼容：
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
11、BFC
- BFC:块级排版上下文的渲染区域，可以触发产生BFC的元素有float、position、overflow不是hidden、inline-block、flex子项和grid子项;
- IFC:行级排版上下文的渲染区域，触发产生条件，只包含行级盒子的容器才创建一个IFC。作用:方便于水平居中和vertical-align:middle的垂直居中。
- FFC:也就是flex区域了，当display值为flex或者inline-flex才会创建一个FFC，作用和flex一样，自适应布局。
- GFC∶网格排版的渲染区域。也就是Grid布局产生的区域，当display值为grid才会产生GFC。
BFC就是块级格式上下文，是页面盒模型布局中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
创建BFC的方式有:
- html根元素
- float浮动
- 绝对定位
- overflow不为visiable
- display为表格布局或者弹性布局
BFC主要的作用是:
1.清除浮动 2.防止同一个BFC容器中的相邻元素间的外边距重叠问题
BFC特性：垂直方向的距离由margin决定，并且会发生margin折叠的问题，两个元素之间的margin只取最大的那个margin来使用，不会叠加，同时水平方向上的左margin会触及到容器的左margin(从左开始排)
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
