前端面试题 ===> 【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文档中;
  • 必须位于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 只是盒子内容的宽度;
    • IE盒模型(怪异盒模型):
      • box-sizing: border-box;
      • width = content-width + padding + border

12. 什么是flex布局?

  • 定义:
    • 可以最大限度的扩展和收缩容器内的元素,以最大限度的填充空间;
  • 组成:
    • 弹性容器 + 弹性盒子 + 主轴 + 侧轴;
  • 主轴对齐方式: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
    • 相对定位;
    • 相对于自身原来的位置,不脱离标准流;
    • 左右marginauto仍然有效;
  • absolute
    • 绝对定位;
    • 找到最近一级具有 position属性 的祖先元素进行位置的移动,脱离标准流;
    • 若没有找到,则相对于浏览器窗口进行位置的移动;
    • 左右marginauto就会失效;
  • fixed
    • 固定定位:
    • 相对于浏览器可视化窗口,脱离标准流;
  • 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的区别

  • px:绝对单位,根据电脑屏幕的分辨率决定;
  • rem:相对单位,相对于根标签字号的大小,做移动适配;
  • em:相对单位,相对于当前标签的字号大小,如果当前标签没有设置字体大小,则相对于浏览器的默认字体大小(em会继承父级元素的字体大小,因此并不是一个固定的值);

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 中双冒号和单冒号有什么区别、作用(伪类和伪元素的区别)?

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

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

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

    html 复制代码
    <style>
        p span {
            display: block;
            font-size: 12px;
            -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 的高度时,浮动元素也参与计算;
  • 哪些元素会生成BFC:
    • 根元素;
    • float 属性不为 none
    • positionabsolutefixed
    • displayinline-block、table-cell、table-caption、flex、inline-flex
    • overflow 不为 visible

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

  • vh/vw: 视口大小占比, 与设备相关;
  • auto: 为默认值, 通常与设备无关;
  • 100%: 受父容器的影响;
相关推荐
雯0609~4 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ7 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z13 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
程序猿进阶27 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
彭世瑜37 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40438 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish38 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five39 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序39 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54140 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript