css常见面试题

new money

已于 2022-10-09 15:09:43 修改

阅读量164

点赞数

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

于 2022-09-30 14:59:13 首次发布

本文链接：https://blog.csdn.net/work33/article/details/127105598

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

BFC

块级作用域上下文（里面的元素是独立起来的，不会受外面的元素影响）
例子

解决margin合并 or 塌陷
设置了相同的margin只会生效最大值。相同的话就是合并

让某个子元素添加父元素并使用bfc 格式化块级上下文

常见布局

flex伸缩盒子布局（常用）

设置了flex的元素称为容器，里面的项目叫做子项
整个容器分为两条轴。水平的主轴（main axis）和垂直的交叉轴（cross axis）

注意。不常用的属性
子项属性：
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。（就是改变子项的顺序）
flex属性其实就是这三个
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（人话：初始化占据多少px）

应用

常用于移动端 or 水平垂直居中
瀑布流
轮播图

position定位布局

口诀：父绝子相
这种布局会脱离文档流，也是生成bfc的一个条件。设置相对定位的元素会去找最近的绝对定位元素，以他为基准去实现偏移。没有就是html这个根
应用：

返回顶部 / 头部栏随着滚动条滚动
水平垂直居中

浮动布局

也是脱离文档流效果和postion差不多，也是生成bfc的一个条件。有浮动的地方一般需要在他的兄弟加清除浮动的属性，避免浮动带来的影响
应用

左边不变宽度，右边可变

grid布局（暂时还是兼容性不好的一个布局）

瀑布流

px rem em vh vm 计量单位的区别

px像素单位，是相对于显示器屏幕分辨率而言的。不会变的。设计稿给的都是这个单位，但是我哦们需要根据项目的适配方案换算单位
rem 一个相对单位。也是响应式布局的灵魂。1rem = 16px。宽高设置rem也是按照html来动态计算，只适用在html这个元素上
em 也是相对单位它基准点为父节点字体的大小，子元素设置rm是根据他的父元素来计算的。宽高设置rem也是按照html来动态计算
vh vm 更具屏幕的视口。

重绘、重排（回流）

转载的地方

重排我们可以理解为重新排列布局
怎么触发重排呢？
简单来说，就是JS动态控制DOM结构的时候，且有DOM结点的几何信息元素发生改变时，才会执行回流。
window大小被修改
增加删除DOM结构
元素的尺寸发生变化
offsetWidth 和 offsetHeight ,offset… ,clientWidth,client…,scrollTop,scroll…
重绘这个词我们可以更加轻易地去理解它，即重新执行渲染，

所有导致元素非几何信息发生变化的操作都会触发重绘。

注意：回流一定会重绘，但是重绘不一定会回流！

盒子模型

在css里面每个元素都是一个盒子，盒子由 margin+ border + padding + content 组成

标准模型（默认）

width = content
width设置了多少content就是多少，不会将width分给padding和border
在这里插入图片描述

ie模型

width = content + padding + border
width设置的值会被他们三个平分
在这里插入图片描述

常见的块级元素和行级元素

块级(可以直接设置宽高
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

行级（不行直接设置宽高）
p span h1 a

语义化标签

header aside main footer table picture

link 和import 的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。（加载更多类型）
link引用CSS时，在页面载入时同时加载**（不阻塞DOM渲染）；@import需要页面网页完全载入以后加载（阻止）**。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

伪元素和伪类的区别和作用？

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如

a:hover {color: #FF00FF}
p:first-child {color: red}

CSS 优化和提高性能的方法有哪些？

加载性能：
（1）css压缩：将写好的css进行打包压缩，可以减小文件体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。
（3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。