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

CSS面试题总结

1. CSS3新特性

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

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

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

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

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

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

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

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

1. 元素选择器：
   • body {}；
2. id选择器：
   • #id {}；
3. 类选择器：
   • .class {}；
4. 属性选择器：
   • [title]；
5. 群组选择器：
   • h1, h2, h3 {}；
6. 通配符选择器：
   • * {}；

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

1. 后代选择器：
   • body div {}；
2. 子元素选择器：
   • section > span {}；
3. 同级相邻：
   • div + p {}；
4. 同级所有：
   • div ~ p {}；

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

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

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

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

9. 如何画一个三角形？

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

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

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

/* 四边框*/
<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盒模型？

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

12. 什么是flex布局？

1. 定义：
   • 是一种一维布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力；
2. 组成：
   • 弹性容器 + 弹性盒子 + 主轴 + 侧轴；
3. 主轴对齐方式：
   • juetify-content(space-around、space-between、space-evenly、center)；
4. 侧轴（交叉轴）对齐方式：
   • align-items(center)；
5. 改变轴向：
   • 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属性比较，说一下每个属性的区别

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

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

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

18. 清除浮动的方法？

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

   .clearfix::after {
       content: '';
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   
   /* 兼容IE */
   .clearfix {
       *zoom: 1;
   }
   

5. 双伪元素法；

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

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

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

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

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

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

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

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

23. 如何解决 margin 塌陷？

• 外边距塌陷有两种情况：

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

       .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();这个属性进行缩放；

  <style>
      p span {
          display: block;
          font-size: 12px;
          transform: scale(.8);
          -webkit-transform: scale(.8);
      }
  </style>
  
  <p> <span> 使用CSS怎么然谷歌浏览器支持小于12px的文字？ </sapn> <p>
  

26. BFC是什么？

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

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

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