CSS面试题

css面试题

浏览器内核的理解

渲染引擎：渲染引擎负责解析网页的 HTML、XML、图像等内容，并将其转换为可视化的网页形式展示给用户。它负责处理网页的布局、样式计算、绘制等任务。

javascript引擎：JavaScript 引擎负责解析和执行网页中的 JavaScript 代码，实现网页的动态交互和功能。

v8：用于 Chrome 和 Opera 浏览器，具有高性能和快速执行速度

SpiderMonkey：用于 Firefox 浏览器；

JavaScriptCore：用于 Safari 浏览器；

1、盒模型

CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距。）

分为两种：w3c标准盒模型、IE怪异盒模型

w3c标准盒模型内容的宽高不包括padding+border，内容只是内容

IE怪异盒模型内容的宽高包括padding+border

可以通过box-sizing来转换盒模型

content-box：转换为标准w3c盒模型，content不包括padding+border

border-box：转换为怪异IE盒模型的效果，content包括padding+border

inherit：继承父元素的box-sizing属性的值

2、BFC

BFC是块级格式化上下文，是一个独立的渲染区域，处于BFC区域的元素与其他区域的元素互不影响

触发条件：

根元素：html

定位：position为absolute/fixed

浮动：float不为none

行内：display为inline-block，flex，table,grid,

overflow不为visible

作用：

防止margin重叠，由于左右相邻的两个元素margin会取最大值

清除内部浮动（BFC会包含其所有子元素，因此可以清除内部浮动，防止浮动元素影响到外部元素）

垂直方向的顶部对齐： BFC内部的块框在垂直方向上按照其在包含块中的顺序依次排列，不会出现浮动元素造成的错位

3、选择器权重

!important > 行内样式>内联样式 >外联样式 > ID选择器（100） > 类选择器（10）=5 伪类选择器 = 属性选择器 > 元素选择器（1） = 伪元素选择器 > 通配选择器（*——1） = 后代选择器 = 兄弟选择器

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

4、清除浮动方式：

1、在浮动元素后边添加clear：both的空div元素

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>

2、给父元素添加overflow：hidden或者auto样式，触发BFC

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>  
.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
}

3、使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

5、 link 与 @import 的区别

link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css

当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载

@import需要 IE5 以上才能使用

link可以使用 js 动态引入，@import不行

6、隐藏元素的方法：

display：none ：彻底的隐藏元素，既不会占据空间也不会交互

visibility：hidden：看起来隐藏了但会占据空间，不可以进行交互

overflow：hidden：隐藏了元素移除的部分，会占据空间但不可以交互

opacity：0-1，设置透明度，看起来被隐藏了，但是占据空间且可以交互

z-index：-9999，将层级放到了底层，被完全覆盖了

transform：scale(0,0):平面变换，将元素缩放为0，但是依然占据空间不可以交互

7、可继承和不可继承的css属性

可以被继承：文本属性、字体属性、字体间距、列表样式

color（文本颜色），text-align（文本对齐方式）、text-duration（文本描述）、word-spacing（字间距）、letter-spacing（字母间距）、font- size（字体大小）、font-weight（字体粗细）、font-family（字体类型）、list-style（列表样式）

不可被继承：关于BFC的所有属性

width（宽度）、高度（height）、背景色（background-color）、border（边框）、padding（内边距）、margin（外边距）

8、px/rem/em/vw/vh的区别

px是绝对单位、rem、em、vw、vh都是相对单位

px是屏幕上的小灯泡，1px就是一个小灯泡

rem是基于html根标签字体大小的单位，默认1rem=16px

em是基于父元素字体大小的单位，比如父元素字体大小为10px，那么1em就是10px

vw是基于当前视口的宽度，默认视口宽度为375,1vw就是3.75px

vh是基于当前视口的高度，默认视口高度为667,1vh就是6.67px

9、回流与重绘，怎么形成的，怎么解决？

回流：布局引擎回根据各种样式计算每个盒子在页面上的大小和位置

重绘：当计算好盒模型的位置、大小和其他属性后，浏览器会根据每个盒子的特性进行布局

触发条件：

回流：

添加或删除可见的dom元素

改变元素的位置、尺寸和内容

改变窗口大小

重绘：

改变元素的颜色、背景色等不影响布局的属性

改变文字样式

避免：

使用transform和opacity代替改变元素的位置和尺寸

使用position：absolute进行动画

使用防抖和节流，对于频繁触发的操作，使用节流（控制触发频率）和防抖（合并触发）技术，减少回流和重绘的次数

10、css3动画和过渡：

（1）、transition：

transition-property:过渡的名称

transition-duration:过渡需要的时间(秒)

transtion-timing-function:过渡方式

（ease：默认，开始缓慢，中间加速，结尾缓慢）

（linear：匀速进行）

（ease-in：开始缓慢，结尾加速）

（ease-out：开始加速，结尾缓慢）

（ease-in-out：开始缓慢，中间加速，结尾缓慢）

transition-delay：过渡的延迟时间(秒)

（2）、transform：

translate(x,y)：以x轴和y轴进行运动

rotate(30deg):以中心旋转30度——transform-origin（旋转原点——必须在元素本身，不可在hover这种交互效果里）:left top左上 角,left bottom左下角开始

scale(x,y）：缩放，以x轴和y轴进行缩放，默认是1，大于一放大

skew(xdeg,ydeg)：变形，以x轴或y轴进行拉伸多少度

（3）、以3d效果展示：

首先在外部容器内使用：transform-style:preserve-3d,

（设置距离视图的距离：）perspective:300px

,距离视图的距离为300px

然后在hover中设置

3d位移：transform：transilate3d(x,y,z)以x轴，y轴，z轴进行移动，z轴是3d视图与我们的距离，数字越大离我们越近，视图越大

3d旋转：transform: rotate3d(x,y,z,100deg)以x轴，y轴，z轴默认都为0，哪个轴为1就按哪个轴进行旋转

3d缩放：transform：scale3d(x,y,z)根据x轴、Y轴，和Z轴进行缩放

（4）逐帧动画animation&&@keyframes：

animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。 阅读关于initial的介绍。
inherit	从父元素继承属性。 阅读关于initinherital的介绍。

@keyframes

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值：0-100% from (和0%相同) to (和100%相同)注意： 您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

11、flexbox，应用场景？

flex:1和flex:auto的区别?

flex:1

flex:1是CSS中flex属性的一个常见用法，它主要用于指定元素在Flex容器中的弹性大小。flex属性是flex-grow、flex-shrink和flex-basis的简写形式。当只使用一个值时，它等同于flex-grow的值设为该值，而flex-shrink和flex-basis的值则会被设定为0和auto，即在有剩余空间时，元素会扩大，但在空间不足时，不会缩小，且初始尺寸为0。

flex:auto

flex:auto则是指定了flex-grow和flex-shrink的值都是1，而flex-basis的值则是auto。这意味着，当Flex容器有剩余空间时，元素会像flex:1那样扩张，而在容器尺寸不足时，元素则会缩小以适应容器，其初始尺寸为内容尺寸

全称为flexible box，意为“弹性布局”，可以简便、完整、响应式地实现各种页面布局

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向

每根轴都有起点和终点，这对于元素的对齐非常重要

属性：+

flex-direction（决定主轴的方向(即项目的排列方向)）

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿

• 如下图所示：

flex-wrap （弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行）

属性对应如下：

• nowrap（默认值）：不换行
• wrap：换行，第一行在下方
• wrap-reverse：换行，第一行在上方 默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩

flex-flow（是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap）

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content（定义了项目在主轴上的对齐方式）

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：两个项目两侧间隔相等

效果图如下：

align-items（定义项目在交叉轴上如何对齐）

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content（定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch（默认值）：轴线占满整个交叉轴

效果图如下：

12、css3新特性：

选择器：

子元素选择器：>

相邻兄弟选择器：+

属性选择器：[标签名]

伪类选择器:

（p:nth-child(2):选择属于其父元素的第二个子元素的每个<p>元素）

(div:last-child:选择属于其父元素的最后一个子元素)

(div:first-child:选择属于其父元素的第一个子元素)

样式：

border-radius：创建圆角边框

box-shadow：为元素添加阴影

border-image：使用图片来绘制边框

动画：

过渡动画transition:

css属性（transition-property）、

过渡时间（transition-duration）、

过渡方式（transition-timing-function

ease：默认，开始慢，中间加速，结尾慢

linear：匀速进行

ease-in：开始缓慢，后边加速

ease-out：开始加速，后边缓慢

ease-in-out：先变快再到慢

）、

动画延迟（transition-delay）

文字：

word-spacing：字间距

letter-spacing：字母间距

white-space：换行

渐变：

横向渐变：linear-gradient()

纵向渐变：radial-gradient()

13、如果要做优化，CSS提高性能的方法有哪些？

1、内联关键css样式：

把关键的css样式写在标签内，这样就会在html下载完成之后就去执行css样式，否则就要等到html下载完成之后再去下载css文件，影响用户体验

2、异步加载css：

（1）、使用javascript将link标签插到head标签最后

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling )

（2）、设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS

<link rel="stylesheet" href="mystyles.css" media="noexist" οnlοad="this.media='all'">

3、资源压缩：

使用webpack、rollup等工具将css文件压缩成一行，使文件变小

4、不要使用@import：

因为@import引入的css文件会在所有文件加载完毕之后才会下载css文件

14、如何画一个三角形

三角形原理:边框的均分原理

div {
  width:0px;
  height:0px;
  border-top:10px solid red; 
  border-right:10px solid transparent; 
  border-bottom:10px solid transparent; 
  border-left:10px solid transparent;
}

父元素{
    overflow:hidden;
}
div{
    width:100px;
    height:100px;
    background-color: red;
    transform-origin:left bottom;
    transform:rotate(45deg);
}

15、左边定宽，右边自适应如何实现？

html样式：

<div class="box-all">
    <div class="box-left">
    </div>
    <div class="box-right"> 
    </div>
</div>

1、使用flex

.box-all{
     width:1000px;
        height:200px;
     background-color:gray;
        display:flex;
}

.box-all .box-left{
    width:200px;
    height:200px;
    background-color: red;
}
.box-all .box-right{
    flex:1;
    background-color: blue;
}

2、使用float+margin-left：

.box-all{
    width:1000px;
    height:200px;
}
.box-all > div{
    height:200px;
}
.box-all .box-left{
    float:left;
    width:200px;
    background-color: red;
}
.box-all .box-right{
    margin-left:200px;
    background-color: blue;
}

3、使用calc内置函数计算：

.box-all{
    width:1000px;
    height:200px;
}
.box-all > div{
    height:100%;
}
.box-all .box-left{
    float:left;
    width:200px;
    background-color: red;
}
.box-all .box-right{
    float:right;
    width:calc(100% - 200px);
    background-color: blue;
}

16、如何实现Chrome浏览器文字大小12px？

（1）、使用zoom进行自适应缩放

将设置好的样式后面加上zoom:0.8;就可以实现了

div{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
}

（2）、使用缩放功能：-webkit-transform:scale()

div{
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }

17、怎么实现单行/多行文本超出显示省略号？

单行实现：

div{
        width:200px;
        height:100px;
        white-space:nowrap; /*設置不換行*/
        text-overflow:ellipsis; /*内容超出显示省略号*/
        overflow:hidden; /*文字超出隐藏超出内容*/
    }

多行实现：

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;  //用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
        display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示,要和上一行一起使用
        -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
        overflow: hidden;   //内容超出隐藏
        text-overflow: ellipsis; //多行文本的情况下，用省略号“…”隐藏溢出范围的文本
    }
</style>
<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >

18、css预编译器是什么，都有哪些？

由于我们在编写过程中需要很多的css样式代码，css呢不支持嵌套，代码复用性差，编程能力较弱，于是出现了sass，less和stylus预编译器，他们有嵌套，变量以及作用域等功能来弥补css的先天不足。

嵌套：三者嵌套方式都一样，不过sass和stylus可以不写{} 、less必须得写 &、>方式都一样

变量：sass使用$符号，less使用@符号，stylus使用=赋值的方式

作用域：sass没有全局作用域，后定义的会覆盖先定义的、less和stylus存在作用域，从内到外依次查找，直到作用域的最顶端

代码模块化：三者都可以以模块的方式引入其他样式文件使用@import

19、flex：1是由哪三个属性组成的？

flex实际上是flex-grow、flex-shrink和flex-basis` 三个属性的缩写。

flex-grow：定义项目的的放大比例

• 默认为0，即 即使存在剩余空间，也不会放大；
• 所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
• flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍
• flex-shrink：定义项目的缩小比例；

• • 默认为1，即 如果空间不足，该项目将缩小；
  • 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
  • flex-shrink为0：空间不足时，该项目不会缩小；
  • flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

• flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

• • 默认值为auto，即 项目原本大小；
  • 设置后项目将占据固定空间。

20、说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

设备像素：物理像素，最小的像素单位，是屏幕上的一个个小块

设备独立像素：抽象单位，用于在不同设备之间产生不同的视觉尺寸和布局

css像素：css中使用的逻辑单位，用于网页设计和布局的单位。

dpr（device pixel ratio）：设备像素比，基于设备像素和设备独立像素的比例产生不同的视觉效果。

ppi：每英寸有多少设备像素数量，ppi越高，图像越清晰

#