番外02：前端八股文面试题-CSS篇

一：CSS基础

1：CSS选择器及其优先级

2：display的属性值及其作用

属性值	作用
none	元素不显示，并且会从文档流中移除
block	块类型，默认元素为父元素宽度，可设置宽高，换行显示
inline	行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示
list-item	像块类型元素一样显示，并添加样式列表标记
table	此元素会作为块级表格来显示
inherit	规定应该从父元素继承dispaly属性的值

3：display的block、inline和inline-block的区别

（1）block：会独占一行 🔜 多个元素另起一行 🔜 可以设置width,height,margin和padding属性

（2）inline：元素不会独占一行 🔜 设置width,height无效 🔜 水平方向可设置margin和padding 🔜 垂直方向不可以。

（3）inline-block：对象设置为inline对象 🔜 对象的内容作为block呈现

（4）行内元素和块级元素的特点

        1）：行内元素

        - 设置宽高无效

        - 可以设置水平方向的margin和padding，垂直方向不可以

        - 不会自动换行

        2）：块级元素

        - 可以设置宽高

        - 设置margin和padding都有效

        - 可以自动换行

        - 多个块状，默认排列从上到下

4：隐藏元素的方法有哪些

属性值	占据空间	响应绑定监听事件
display:none	不会在页面中占据位置	不响应
visibility:hidden	占据空间	不响应
opacity:0	占据空间	响应
position:absolute	元素移除可视区域	-
z-index:负值	元素被其余元素遮盖	-
clip/clip-path	占据位置	不响应
transform:scale(0,0)	占据位置	不响应

5：link和@import的区别

两者都是外部引用CSS的方式，区别如下：

link	@import
XHTML标签，除了加载CSS外，还可以定义RSS等事务	只能加载CSS
引用CSS时，页面载入时同时加载	页面完全载入以后加载
无兼容问题	低版本浏览器不支持
支持使用JavaScript控制DOM去改变样式	不支持

6：display:none与visibility:hidden的区别

两个属性都是让元素隐藏，不可见

（1）在渲染树中

        display:none 元素从渲染树中消失，不会占据空间

        visibility:hidden 不会让元素从渲染树中消失，会占据响应的空间

（2）是否继承属性

        display:none 非继承属性 🔜 子孙节点会随着父节点从渲染树消失 🔜 修改子节点的属性也无法显示。

        visibility:hidden 继承属性 🔜 子孙节点消失继承了hidden 🔜 设置visibility:visible​ 可以让子孙节点显示.

（3）修改文档流 🔜 display会重排 🔜 visibility会重绘

（4）使用读屏器 🔜 display:none的内容不会被读取 🔜 visibility:hidden的内容会读取

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

伪元素：内容元素的前后插入额外的元素和样式，这些元素并不会在文档中生成

伪类：将特殊的效果添加到特定选择器上

总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

8： 对盒模型的理解

CSS3中盒模型分为两种：标准盒子模型、IE盒子模型

四部分组成：margin,border,padding,content

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

• 标准盒模型的width和height属性的范围只包含了content，
• IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型

• ​box-sizeing: content-box​表示标准盒模型（默认值）
• ​box-sizeing: border-box​表示IE盒模型（怪异盒模型）

9：margin和padding的使用场景

（1）需要在border外侧添加空白，且空白处不需要背景（色）时：margin

（2）需要在border内测添加空白，且空白处需要背景（色）时：padding

10：z-index属性在什么情况下会失效

（1）父元素position为relative时，子元素的z-index失效。

（2）元素没有设置position，属性为非static属性

（3）元素设置z-index的同时还设置了float浮动

二：页面布局

1：常见的CSS布局单位

px,%,em.rem,vw/vh

（1）px：页面布局的基础 🔜 终端屏幕所能显示的最小区域

（2）%：可以使得浏览器组件中的宽高 🔜 随着浏览器的变化而变化

（3）em,rem：

        em：相对于父元素

        rem：相对于根元素

（4）vw / vh与视图窗口有关的单位

2：px,em,rem的区别及使用场景

px：固定的像素，一旦设置了就无法适应页面大小而改变

em和rem相对于px更具灵活性 🔜 相对长度单位 🔜 长度不是固定的，更适用于响应式布局

em相对于父元素，rem相对于根元素

3：两栏布局的实现

左边一栏宽度固定，右边一栏宽度自适应

（1）浮动 🔜 左边元素宽度设置200px，向左浮动 🔜 右边元素margin-left:200px，宽度auto

（2）flex布局 🔜 左边固定宽度200px 🔜 右边设置为flex:1

4：三栏布局的实现

左右两栏宽度固定，中间自适应布局

（1）绝对定位：左右两栏设置为绝对定位，中间设置对应方向大小的margin的值

（2）flex布局：左右栏设置固定大小，中间一栏设置flex:1

（3）利用浮动：左右栏设置固定大小 + 设置对应方向的浮动 🔜 中间一栏设置左右两个方向的margin

5：水平垂直居中的实现

（1）绝对定位：top:50%,left:50%;transform:translate(-50%,-50%)

（2）绝对定位：四方向设置为0 🔜 margin:auto（宽高固定）

（3）flex布局：align-item:center / justify-content:center

6：对flex布局的理解及其使用场景

（1）flex-direction属性决定主轴的方向

（2）flex-wrap：一条轴线排不下，如何换行

（3）flex-flow：flex-direction和flex-wrap属性的简写形式

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

（5）align-items：项目在交叉轴上的如何对齐

（6）align-content：多根轴线的对齐方式

flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。