CSS面试题汇总

先别着急，看看下面这些小标题，是否能完整回答上来？不会的直接点标题跳转^v^

1、介绍一下标准的css的盒子模型？低版本的IE的盒子模型有什么不同的？

2、伪类和伪元素有什么区别？列举常用的伪类和伪元素？css选择器优先级是什么？

3、几种常见的css布局？通过什么方式实现？

4、网页中应该使用奇数还是偶数的字体？为什么呢？字体单位有哪些？

5、BFC是什么？有什么用？开发中的应用是什么？

6、知道css有个content属性吗？有什么作用？有什么应用？

7、如何居中一个div？垂直居中有哪些方法？水平居中有哪些方法？垂直水平居中呢？如何居中一个浮动元素？如何让绝对定位的div居中？

8、全屏滚动的原理是什么？用到了css的哪些属性？

9、你对line-height是如何理解的？三种赋值方式有何区别？（带单位、纯数字、百分比）

10、回流和重绘分别是什么？触发条件？性能影响？如何减少回流和重绘？

11、link与@important的区别？

---

1、介绍一下标准的css的盒子模型？低版本的IE的盒子模型有什么不同的？

· 有两种：怪异（IE）盒子模型、W3C盒子模型；

盒模型：content、padding、border、margin

区别：IE的content部分把border和padding部分算了进去

IE8及其以下版本浏览器，未声明DOCTYPE，内容宽高会包含内填充和边框，成为怪异盒模型( IE盒模型 )

标准(W3C)盒模型：元素宽度 = width + padding +  margin + border

怪异(IE)盒模型：元素宽度 = width + margin

标准浏览器通过设置css3的box-sizing：border-box，触发怪异模式解析宽高。

box-sizing常用的属性有哪些？分别有什么作用？

box-sizing: content-box; 默认的标准（W3C）盒模型

box-sizing：border-box；怪异盒模型

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

---

 2、伪类和伪元素有什么区别？列举常用的伪类和伪元素？css选择器优先级是什么？

伪类和伪元素：共同作用是给元素添加一些特殊的效果或样式

 伪类：用于选择某个元素的特定状态

伪元素：用于创建一些虚拟的元素

伪类：

:hover 用于选择鼠标悬停在元素上时的状态
:active 用于选择元素被激活（例如被点击）时的状态

: focus 用于聚焦时改变状态

: focus-within 元素或者其子元素聚焦时都会匹配

：vistied a是否访问过

：enabled 和：disabled 能访问和不能访问

    注意：a标签设置disabled属性无效，而非a元素配合pointer-events: none实现

：readonly 和：readwrite，匹配是否设置了readonly属性的输入框元素

    注意：只对input和textarea有效

：root 匹配的就是html根元素标签

：first-child和：last-child 用于匹配父元素的第一个/最后一个子元素

：only-child 匹配只有一个子元素的元素

：nth-child(n) 和：nth-last-child(n) 匹配第n个子元素/匹配从后往前数第n个子元素

   注意：

   :nth-child(odd/even) 奇数/偶数

   :nth-child(-n + 3) 匹配前三个元素

：first-of-type 和:last-of-type 匹配那些具有相同标签的第一个/最后一个子元素

：only-type-of 匹配子元素中标签类型与selector元素一致且只有一个的selector元素

   注意：匹配:only-child的元素一定匹配:only-of-type，反之则不一定

：nth-of-type() 和nth-last-type() 匹配那些具有相同标签的第n个/从后往前数n个

:not() 否定伪类

   注意：

:not()伪类自身优先级为0，最终的优先级由()的选择器表达式决定

:not()伪类可以不断级联，如input:not(:disabled):not(:read-only){ }

：is() 可以把括号中的选择器依次分配出去，对于那种复杂的有很多逗号分隔的选择器非常有用

  注意：:is()最终的优先级由()的选择器表达式决定

伪元素：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

::before 元素的开始位置

::after 元素的结束位置

选择器优先级：

!important > id > class > tag   注意：!important 比内联优先级高

---

 3、几种常见的css布局？通过什么方式实现？

单列布局: 没什么要点，用margin ：auto达到水平居中即可

.contenter {
    margin: auto;
}

三栏布局: 左右两边固定边距，中间自适应

1、float

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

    <div class="middle">middle</div>

<style> 
    .left{
        float:left;
        width: 200px;
        background-color: aqua;
    }
    .right{
        float: right;
        width: 200px;
        background-color: black;
    }
    .middle{
        
        background-color: saddlebrown;
    }
</style>

2、absolute 和 relative

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

<style>
.container {
        position: relative;
    }

    .left {
        position: absolute;
        left: 0;
        width: 200px;
        background-color: aqua;
    }

    .right {
        position: absolute;
        right: 0;
        width: 200px;
        background-color: black;
    }

    .middle {
        position: absolute;
        left: 200px;
        right: 200px;
        background-color: saddlebrown;
    }
</style>

3、flex

<div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
</div>
<style>
    .container {
        display: flex;
    }

    .left {
        
        width: 200px;
        background-color: aqua;
    }

    .right {
        
        width: 200px;
        background-color: black;
    }

    .middle {
        flex: 1;
        background-color: saddlebrown;
    }
</style>

flex 属性是 flex-grow, flex-shrink, 和 flex-basis 的简写形式。使用 flex: 1 实际上等同于 flex: 1 1 0%，即：

1. flex-grow: 1: 元素可以占用父容器中剩余的可用空间。多个具有相同 flex-grow 值的子元素将平分剩余空间。
2. flex-shrink: 1: 当父容器空间不足时，元素可以缩小。多个具有相同 flex-shrink 值的子元素将按比例缩小。
3. flex-basis: 0%: 元素的初始主轴尺寸为 0，然后根据 flex-grow 和 flex-shrink 的值进行调整。

4、grid

<div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
</div>
    .container {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
    }

    .left {
        
        
        background-color: aqua;
    }

    .right {
        
        
        background-color: black;
    }

    .middle {
       
        background-color: saddlebrown;
    }

 grid-template-columns: 200px 1fr 200px; 是用于创建 CSS Grid 布局的属性之一，它定义了网格容器中列的大小和分布。具体来说，这个属性指定了每一列的宽度。

1fr: 这是一个占据剩余空间的列，剩余空间按照比例分配给这一列。1fr 表示剩余空间的一个单位份额。

---

4、网页中应该使用奇数还是偶数的字体？为什么呢？字体单位有哪些？

偶数字号相对更容易和web设计的其他部分构成比例关系。

px：固定值

em：继承父级元素的字体大小，如果父元素没有的话，会向上追溯。默认1em=16px。em = 像素值 / 父级font-size

rem：相对长度单位，相对其根元素来设置大小，任意浏览器的默认字体高都是16px；所有未经浏览器调整的浏览器都符合1rem = 16px

html {
    font-size: 20px;
}

<div style="font-size: 1rem;">111</div> //20px
<div style="font-size: 2rem;">222</div> //40px

注意：如何做移动适配：以设计稿400px为例，移动设备 / 设计稿宽度 * x = x px，x为任意整数值

ex： 

---

5、BFC是什么？有什么用？开发中的应用是什么？

BFC: 块级格式上下文block formatting context ，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

应用：

阻止margin重叠；自适应两栏布局；可以阻止元素被浮动元素覆盖；可以包含浮动元素（清除内部浮动）

BFC布局规则：浮动的元素会被父级计算高度（父级元素触发了BFC）

非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）

margin不会传递给父级（父级触发BFC）

属于同一个BFC的两个相邻元素上下margin会重叠

---

6、知道css有个content属性吗？有什么作用？有什么应用？

content属性专门应用在before/after伪元素上，用来插入生成内容。最常见的是利用伪类来清除浮动

.clearfix:after {
    content:".";       //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;  //清除左右两边的浮动
 }

---

7、如何居中一个div？垂直居中有哪些方法？水平居中有哪些方法？垂直水平居中呢？如何居中一个浮动元素？如何让绝对定位的div居中？

水平居中：

1、flex+margin：auto

2、flex+justify-content :center 

3、定位 + bottom + right + top + left 0 + margin : auto

4、grid + justify-self :center + align-self :center

5、定位 + left 50%  + margin-left - 一半的px值

垂直居中：

1、line-height 

水平垂直居中：

1、absolute +  bottom + right + top + left 0 + margin : auto

2、absolute +  left 50% + top 50% + margin-left/top - 一半的px值

3、flex+justify-content :center + align-items:center

---

 8、全屏滚动的原理是什么？用到了css的哪些属性？

原理类似于轮播图，超出的部分隐藏，滚动时显示

可能用到的css属性：overflow: hidden; transform: translate(100%, 100%); display:none

---

9、你对line-height是如何理解的？三种赋值方式有何区别？（带单位、纯数字、百分比） 

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离

如果一个标签没有定义height属性，那么其最终表现的高度是由line-height决定的

一个内容没有设置高度，那么撑开容器高度的是line-height而不是容器内的文字内容

把line-height值设为height一样大可以实现单行文字的垂直居中

line-height 和 height 都能撑开一个高度，height会触发haslayout，而line-height不会

---

10、回流和重绘分别是什么？触发条件？性能影响？如何减少回流和重绘？

重绘：当元素的样式改变需要浏览器重新绘制样式

回流：当元素的大小、隐藏、位置改变，需要浏览器重新计算元素几何信息，以及重新渲染页面时，会影响当前元素，祖先元素和后代元素。

触发条件：

• 添加或删除可见的DOM元素
• 元素尺寸改变
• 内容变化，例如用户在input框中输入文字
• 页面渲染初始化
• 浏览器窗口尺寸改变 —— 触发重排(回流)。

性能影响：

• 回流比重绘的代价要高。回流的过程比重绘复杂，因为它涉及到更多的计算。
• 回流必将引发重绘，而重绘不一定会引发回流。

如何减少回流和重绘：

使用transform替代top。
使用visibility替换display: none —— 因为前者只会触发重绘，后者会触发回流（重排）。
不要使用table布局，因为可能很小的一个小改动会导致整个table的重新布局。
避免在循环中对DOM进行频繁操作，可以使用documentFragment进行批量操作。

container.style.padding = '20px'; //触发回流，改变元素大小
container.style.borderWidth = '5px';
//使用cssText合并成一次操作
container.style.cssText = 'padding: 20px; border-width: 5px;';

let list = document.getElementById('list'),
    frag = document.createDocumentFragment(),
    items = ['Item 1', 'Item 2', 'Item 3'];

// 使用DocumentFragment作操作
items.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item;
    frag.appendChild(li);
});

// 把DocumentFragment一次性添加到DOM中，减少页面回流
list.appendChild(frag);

---

11、link与@import的区别？ 

1、link是HTML方式，@import是css方式

2、link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOCU（文档样式短暂失效）

3、link可以通过rel = “ alternate stylesheet”指定候选样式

4、浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式

5、@import必须在样式规则之前，可以在css文件中引用其他文件

6、总体来说，link优于@import

---

12、文本省略号的css属性怎么设置？

.content {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
}