前端面试题 ===＞【CSS】

CSS面试题总结

1. CSS3新特性

颜色：
- 新增RGBA、HSLA模式；
文字阴影（text-shadow）；
背景：
- background-size、background-origin、background-clip；
边框：
- 圆角、边框阴影（盒子阴影）；
盒模型；
渐变（线性渐变、径向渐变、锥形渐变）；
过渡：transation；
自定义动画：animation @keyfrom；
媒体查询、多栏布局、@media screen and (width:800px) {...}；
图片边框：border-image；
2D转换/3D转换：transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)；
字体图标；
弹性布局：flex；
网格布局：grid；
保持盒子宽高比例：
- 给盒子设置宽度不设高度；
- aspect-ratio: 宽/高;；

2. 外部样式表、内部样式表、行内样式声明各自的使用场景是什么？

外部样式表：
- 适用所有引用该CSS的HTML文档；
内部样式表：
- 仅适用于当前HTML文档；
行内样式表：
- 仅使用于当前HTML元素；

3. @import指令有什么用处，应该用在哪里，有什么限制？

用来导入其他的CSS样式表；
仅允许用在 样式文档 中；
必须位于CSS文档的首行；

4. 什么是块级元素，行内元素，行内块元素，有哪些限制？

块级元素：
- 默认垂直排列，可以设置宽高；
- div、table、ul、ol...；
行内元素：
- 默认水平排列，设置宽高不生效；
- span...；
行内块元素：
- 默认水平排列，可以设置宽高；
- img、input...；

5. 简单选择器有哪几种，写出基本语法形式

元素选择器：
- body {}；
id选择器：
- #id {}；
类选择器：
- .class {}；
属性选择器：
- [title]；
群组选择器：
- h1, h2, h3 {}；
通配符选择器：
- * {}；

6. 结构（上下文）选择器有几种，并举例说明？

后代选择器：
- body div {}；
子元素选择器：
- section > span {}；
同级相邻：
- div + p {}；
同级所有：
- div ~ p {}；

7. :nth-child(n) 和 :nth-of-type(n) 有什么区别？

:nth-child(n)：
- 只与位置关联；
:nth-of-type(n)：
- 与位置和类型均关联；

8. :nth-child(n)和:nth-of-type(n)中的参数n的使用规则

用在字面量中, 从1开始, 如 ::nth-child(3)；
用在表达式中, 从0开始, 如 ::nth-child(2n+1)；
允许负值；

9. 如何画一个三角形？

给一个块级元素设置 宽高为0；
边框设置一定的像素值（border: 5px solid transparent;）；
根据项目需要给对应的边框设置颜色即可（border-top-color: red;）；

10. 如何实现一条 0.5px 的border？

给一个块级元素设置相对定位，并设置其伪元素为绝对定位；
伪元素的大小为父级的200%，边框宽度设置为1px；
让伪元素缩小一半，再设置伪元素的原点为(0, 0)；

css 复制代码

/* 四边框*/
<style>
div {
    position: relative;
    width: 100px;
    height: 100px;
}

div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #333;
    transform: scale(.5);
    transform-origin: 0 0;        
}
</style>

11. 介绍一下CSS盒模型？

不管是哪种盒模型，都是由以下四部分构成：
- margin + border + padding + content；
分类：
- 标准盒模型：
  - box-sizing: content-box;；
  - 设置的 width 只是盒子内容的宽度；
  - 额外设置border、padding都会改变盒子的大小；
- IE盒模型（怪异盒模型）：
  - box-sizing: border-box;；
  - width = content-width + padding + border；
  - 我们设置的宽度就是盒子本身的宽度，额外设置border、padding不会改变盒子的大小，他会去压缩内容的宽度；

12. 什么是flex布局？

定义：
- 是一种一维布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力；
组成：
- 弹性容器 + 弹性盒子 + 主轴 + 侧轴；
主轴对齐方式：
- juetify-content(space-around、space-between、space-evenly、center)；
侧轴（交叉轴）对齐方式：
- align-items(center)；
改变轴向：
- flex-descraption；

13. 弹性盒子(FlexBox)解决CSS中布局的什么问题,最适合用在哪里

解决了传统布局中的元素垂直对齐, 以及响应式布局的问题；
主要用于跨设备的页面布局,特别适合响应式,如移动端；

14. 弹性元素flex属性的常用值,与对应的值组合有哪些,并一一说明

nitial, auto, content, 数值；
默认值：
- flex: 0 1 auto；
flex: flex-grow flex-shrink flex-basis；
各种组合,如flex: 1 1 auto; 等价于: flex: auto,...

15. 什么是grid布局？

Grid布局即网格布局，它是一种新的CSS布局模型，二维布局模型，主要作用是将一个页面或元素划分为几个区域，以及定义这些区域的大小、位置、层次等关系；
它将一个页面或元素划分为一个个的网格，可以任意组合不同的网格，做出各种各样的布局；

16.position属性比较，说一下每个属性的区别

relative ：
- 相对定位；
- 相对于自身原来的位置，不脱离标准流；
- 左右margin为auto仍然有效；
absolute ：
- 绝对定位；
- 找到最近一级具有 position属性的祖先元素进行位置的移动，脱离标准流；
- 若没有找到，则相对于浏览器窗口进行位置的移动；
- 左右margin为auto就会失效；
fixed ：
- 固定定位：
- 相对于浏览器可视化窗口，脱离标准流；
- 当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
sticky ：
- 粘性定位；
- 基于用户的滚动位置来定位；
static
- 默认状态，使用正常的布局行为，不脱离文档流；
- top、left、right、bottom等属性不会生效；
当绝对定位和固定定位的参照物都是浏览器窗口时的区别：
- 当出现滚动条的时候，固定定位不会随着页面的滚动而滚动；
- 绝对定位的元素会随着滚动条进行滚动；

17. 为什么需要浮动，浮动带来的影响

最早的浮动是为了实现文字环绕的效果；
浮动的元素会脱离标准流，不占据空间；
为什么需要浮动？
- 实现多个块级元素一行显示；
- 实现两个盒子一左一右的布局方式；
浮动带来的影响？
- 元素浮动之后，脱离标准流，不占据位置，撑不开父级的高度，会影响后面元素的布局；

18. 清除浮动的方法？

给父级设置高度；
给父级设置overflow: hidden / auto;（本质是构建一个BFC）；
额外标签法：
- 在父级元素的最后面添加一个块级元素，添加 clear: both; 属性；

单伪元素法；

css 复制代码

.clearfix::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* 兼容IE */
.clearfix {
    *zoom: 1;
}

双伪元素法；

19. CSS选择器有哪些，它们的优先级是怎么样的？

选择器：
- 通配符、id、类、伪类、属性、标签、伪元素、后代、交集、并集、子代；
优先级：
- !important > 行内样式(1000) > id选择器(100) > 类选择器 = 伪类选择器 = 属性选择器(10) > 标签选择器 = 伪元素选择器(1) > 通配符 / 继承 (0)；

20. CSS隐藏元素的方法有哪些，区别是什么？

display: none;
- 元素隐藏后不占有原来的位置，引起重排（回流）和重绘；
- 该元素下的所有元素都会隐藏；
visibility: hidden
- 元素继续占有原来的位置，引起重绘；
- 该属性具有继承性，其子元素也会继承此属性；
- 若设置 visibility: visible; ，则子元素会显示；
opacity: 0;
- 元素继续占有原来的位置，引起重绘；
- 该元素下的所有元素都会隐藏；
overflow: hidden;
- 溢出隐藏；

21. 实现一个盒子的水平垂直居中

margin（margin-top、margin-left）；
position；
position + margin；
position + transform；
flex；
grid；

22. px、rem、em、vw、vh、vmin、vmax的区别

px ：
- 绝对单位，根据电脑屏幕的分辨率决定；
rem ：
- 相对单位，相对于根标签字号的大小，做移动适配；
em ：
- 相对单位，相对于当前标签的字号大小，如果当前标签没有设置字体大小，则相对于浏览器的默认字体大小；
- em会继承父级元素的字体大小，因此并不是一个固定的值；
vw ：
- 将视口宽度均分为100等份；
- 1vw就等于是视口宽度的1%；
vh ：
- 将视口高度均分为100等份；
- 1vh就等于视口高度的1%；
vmin ：
- 取 vw 和 vh 较小的值；
vmax ：
- 取 vw 和 vh 较大的值；

23. 如何解决 margin 塌陷？

外边距塌陷有两种情况：

两个同级元素，垂直排列，上面盒子设置 margin-bottom，下面盒子设置 margin-top，那么它们两个的margin就会重叠，以大的那个为准；
- 解决方案：
  - 两个外边距不能同时出现；
两个子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会粘连；
- 解决方案：
  - 为父盒子设置border，添加border之后父子盒子就不是真正意义上的贴合（可以将border设置成透明）；
  - 为父盒子添加overflow: hidden;；
  - 为父盒子设定padding；
  - 为父盒子添加position: fixed;；
  - 为父盒子添加disaply: table;；
  - 利用伪元素给父元素的前面添加一个空元素；
    css 复制代码
```
.father::before {
    content: '';
    display: table;
}
```

24. ::before 和 ::after 中双冒号和单冒号有什么区别、作用（伪类和伪元素的区别）？

区别：
1. 在CSS中伪类一直用 : 表示，如:hover、:active等；
2. 伪元素在CSS1中已经存在，当时语法是用 : 表示，如:before、:after，后来在CSS3中修订， 伪元素 使用 :: 表示，如::before、::after（单冒号的写法依然可以生效）；
3. 单冒号（:）用于CSS3的伪类；
4. 双冒号（::）用于CSS3的伪元素；
5. 想让插入的内容出现在其他内容的前面，使用::before，否则使用::after；
6. 在代码顺序上，::after生成的内容也比::before生成的内容靠后；
作用：
1. ::before 和 ::after 的主要作用是在元素内容的前后加上指定内容；
2. 伪类于伪元素都是用于向选择器加特殊效果；
3. 伪类于伪元素的本质区别在于是否抽象的创建了新的元素；
4. 伪类只要不是互斥的就可以叠加使用；
5. 伪类优先级 === 类优先级；
6. 伪元素优先级 === 标签优先级；

25. 使用CSS怎么让谷歌浏览器支持小于12px的文字？

针对谷歌浏览器内核，加webkit前缀，用 transform: scale();这个属性进行缩放；

html 复制代码

<style>
    p span {
        display: block;
        font-size: 12px;
        transform: scale(.8);
        -webkit-transform: scale(.8);
    }
</style>

<p> <span> 使用CSS怎么然谷歌浏览器支持小于12px的文字？ </sapn> <p>

26. BFC是什么？

定义：
- BFC简称为块级格式化上下文，它是一个完全独立的渲染区域（布局环境），它规定了内部的盒子如何布局，并且不会影响到外面元素的布局；
布局规则 ：
- 内部的 Box 会在垂直方向，一个接一个地放置；
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
  会发生重叠；
- 每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
- BFC 的区域不会与 float box 重叠；
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此；
- 计算 BFC 的高度时，浮动元素也参与计算；
哪些CSS属性会触发BFC ：
- float 属性不为 none；
- position 为 absolute 或 fixed；
- display 为 inline-block、table-cell、table-caption、flex、inline-flex；
- overflow 不为 visible；

27. vh/vw单位,与auto, 100%有什么区别

vh/vw: 视口大小占比, 与设备相关;
auto: 为默认值, 通常与设备无关;
100%: 受父容器的影响；

前端面试题 ===＞ 【CSS】

CSS面试题总结

1. CSS3新特性

2. 外部样式表、内部样式表、行内样式声明各自的使用场景是什么？

3. @import指令有什么用处，应该用在哪里，有什么限制？

4. 什么是块级元素，行内元素，行内块元素，有哪些限制？

5. 简单选择器有哪几种，写出基本语法形式

6. 结构（上下文）选择器有几种，并举例说明？

7. :nth-child(n) 和 :nth-of-type(n) 有什么区别？

8. :nth-child(n)和:nth-of-type(n)中的参数n的使用规则

9. 如何画一个三角形？

10. 如何实现一条 0.5px 的border？

11. 介绍一下CSS盒模型？

12. 什么是flex布局？

13. 弹性盒子(FlexBox)解决CSS中布局的什么问题,最适合用在哪里

14. 弹性元素flex属性的常用值,与对应的值组合有哪些,并一一说明

15. 什么是grid布局？

16.position属性比较，说一下每个属性的区别

17. 为什么需要浮动，浮动带来的影响

18. 清除浮动的方法？

19. CSS选择器有哪些，它们的优先级是怎么样的？

20. CSS隐藏元素的方法有哪些，区别是什么？

21. 实现一个盒子的水平垂直居中

22. px、rem、em、vw、vh、vmin、vmax的区别

23. 如何解决 margin 塌陷？

24. ::before 和 ::after 中双冒号和单冒号有什么区别、作用（伪类和伪元素的区别）？

25. 使用CSS怎么让谷歌浏览器支持小于12px的文字？

26. BFC是什么？

27. vh/vw单位,与auto, 100%有什么区别

前端面试题 ===＞【CSS】