前端面试题目总结（CSS）

jasmine_qiqi

已于 2022-05-03 15:18:29 修改

阅读量394

点赞数

分类专栏：前端八股文文章标签： css 前端面试

于 2022-05-03 10:18:12 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124551186

版权

7 篇文章 9 订阅

订阅专栏

1、新添加了盒子模型，box-sizing属性来指定盒子模型，有两个：border-box（默认）、content-box，borde-box的大小为wdith，content-box的盒子大小为width+padding+border。
2、新添加了选择器，如伪类选择器、伪元素选择器等。
3、添加了布局，flex弹性盒子布局和grid网格布局。
4、新添加了transform转换效果，translate位移、scale缩放、rotate旋转
5、新添加了transition过渡效果，transition:css属性花费时间效果曲线（默认为ease）延迟时间（默认为0）
6、新添加了animation动画效果@keyframes myfirst{from{} to{}}

CSS常见的选择器有id选择器（#id）、类选择器（.class）、标签选择器（h1）、通配符选择器（*）、子选择器（ul>li）、后代选择器（div p）、伪类选择器（a:hover）、伪元素选择器（a::before）
CSS选择器优先级：！important>内联样式（1000）>id选择器（100）>类选择器（10）>标签选择器（1）>通配符选择器（0）
权重相加判断优先级，如果权重相同就选最后的那个样式为准
可以继承的样式有字体、颜色，不可以继承的有宽高、内外边距

flex弹性盒子布局是ES6新添加的网页布局，它的作用就是可以随着页面的大小改变自适应页面布局。
flex的常见属性：
1、flex-direction：指定flex主轴的方向，默认是row（水平方向）。column是垂直方向。
2、justify-content：主轴方向上的元素对齐方式，默认为flex-start，起始位置对齐。
3、align-items：侧轴方向上的元素对齐方式，默认为stretch，高度占满整个容器。center：垂直居中。
4、flex-warp：是否换行，默认nowrap不换行，可能会溢出。wrap换行，溢出的Flex子项会自动放到下一行。
5、aligin-content：多行的对齐方式，默认为stretch，高度占满整个容器。
6、align-self：：单独指定某flex子项的对齐方式
7、flex：复合属性，flex:flex-grow(扩展比率),flex-shrink((伸缩比率),flex-basis(伸缩基准值)。常用flex:1，就元素平均布局

1、static（默认为静止的），没有定位
2、relative（相对定位），相对于自身的位置定位
3、postion（绝对定位），相对于相近的relative父元素进行定位。
4、fixed（固定定位），相对于浏览器窗口进行固定定位，适合于顶部导航栏。
aboslute与relative的区别：
(1)realtive不脱离文档流，absolute脱离文档流。所以realtive适合做absolute的容器
(2)relative只有两个值（left、right、top、bottom）如果同时存在，left会取代right，top取代bottom。而absolute可以取四个值。

它们的相同点都是隐藏元素
不同点有两个：
1、display:none，它是不占位的。visibility:hidden是占位的。因为display:none，它第一次是不绘制的，第二次才绘制，已经没有位置了，所以不占位。visibility:hidden第一次就绘制了，所以占位。
2、display:none，触发回流和重绘。visibility:hidden触发重绘。
回流就是：修改盒子大小或者位置，就会触发回流。
重绘就是：修改元素的字体大小、颜色，就会触发重绘。
触发回流一定会触发重绘，而触发重绘不一定会触发回流。
因为浏览器渲染的过程就是将HTML解析器解析成JS解析器+DOM+CSS解析器，
然后下一步render（把DOM和CSSDOM结合在一起），
然后下一步layout（㮂计算确定DOM的位置），只要你修改的盒子大小或位置，就会触发回流。
最后一步就是渲染到页面上，只要你修改字体大小或颜色，就会触发重绘。
所以触发回流一定会触发重绘，而触发重绘不一定会触发回流。
所以display:none，不占位，修改了盒子位置，触发回流，然后下一步触发重绘。而visibility:hidden占位，没有触发回流，只是渲染，触发了重绘。

关注