字节跳动最爱考的前端面试题：CSS 基础

注意：每道题前面出现的 (xx) 数字代表这道题出现的频次，此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。

（2）写代码：css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）

  
    
    
    
    
  
  
    

      

        
hello
      
    
  

复制代码

参考链接

• github.com/cttin/cttin…

请你讲一讲 CSS 的权重和优先级

权重

• 从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

优先级

• 权重相同，写在后面的覆盖前面的
• 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

参考链接

• zhuanlan.zhihu.com/p/41604775

问：介绍 Flex 布局，flex 是什么属性的缩写：

• 弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中
• flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写

参考链接

• www.ruanyifeng.com/blog/2015/0…

问：CSS 怎么画一个大小为父元素宽度一半的正方形？

  
    
    
    
    
  
  
    

      

    
  


复制代码

CSS实现自适应正方形、等宽高比矩形

• 双重嵌套，外层 relative，内层 absolute
• padding 撑高
• 如果只是要相对于 body 而言的话，还可以使用 vw 和 vh
• 伪元素设置 margin-top: 100%撑高

双重嵌套，外层 relative，内层 absolute

  
    
    
    
    
  
  
    

      
hello
    
  


复制代码

padding 撑高画正方形

  
    
    
    
    
  
  
    

      

    
  


复制代码

相对于视口 VW VH

  
    
    
    
    
  
  
    

      

    
  


复制代码

伪元素设置 margin-top

  
    
    
    
    
  
  
    

      

    
  


复制代码

参考链接

• www.fly63.com/article/det…

（2）问：实现两栏布局的方式：

左 float，然后右 margin-left（右边自适应）

  
    
    
    
    
  
  
    

    

  


复制代码

右 float，margin-right

  
    
    
    
    
  
  
    

    

  


复制代码

BFC + float

  
    
    
    
    
  
  
    

    

  


复制代码

float + 负 margin

  


hello
world
复制代码

圣杯布局实现两栏布局

  
    
    
    
    
  
  
    

      
你好
      
我好
    
  


复制代码

flex 实现两栏布局

  
    
    
    
    
  
  
    

      
你好
      
我好
    
  


复制代码

参考链接：juejin.im/post/5e8d52…

position + margin

  
    
    
    
    
  
  
    

      
你好
      
我好
    
  


复制代码

实现三列布局的方式

position + margin-left + margin-right

  
    
    
    
    
  
  
    

      

      

      

    
  


复制代码

通过 float + margin

  
    
    
    
    
  
  
    

      

      

      

    
  


复制代码

圣杯布局

  
    
    
    
    
  
  
    

      
中间内容
      
左侧区域
      
右侧区域
    
  


复制代码

双飞翼布局

  
    
    
    
    
  
  
    

      
hello world
    
    
你好
    
王鹏浩
  


复制代码

flex 布局

  
    
    
    
    
  
  
    

      
hello world
      
你好
      
王鹏浩
    
  


复制代码

参考链接

• segmentfault.com/a/119000000…
• blog.csdn.net/crystal6918…
• blog.csdn.net/zhoulei1995…

问：CSS 动画有哪些？

• animation

animation、transition、transform、translate 这几个属性要搞清楚：

• animation：用于设置动画属性，他是一个简写的属性，包含6个属性
• transition：用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
• transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系
• translate：translate只是transform的一个属性值，即移动，除此之外还有 scale 等

参考资料

• juejin.im/post/5b137e…

（3）问：用css2和css3分别写一下垂直居中和水平居中

CSS2

水平居中：

• div + margin: auto;
• span + text-align

垂直居中

• 使用 position 然后 left/top 和 margin 的方式垂直居中（已知宽高和未知宽高）
• 使用 position + margin
• 使用 display: table-cell;

已知宽高，进行水平垂直居中

  
    
    
    
    
  
  
    

      

    
  


复制代码

宽高未知，比如 内联元素，进行水平垂直居中

  
    
    
    
    
  
  
    

      我想居中显示
    
  

复制代码

绝对定位的 div 水平垂直居中

  
    
    
    
    
  
  
    

      
我想居中显示
    
  

复制代码

图片和其他元素使用 display: table-cell; 进行垂直居中

  
    
    
    
    
  
  
    

      
我想居中显示
    
  

复制代码

CSS3

垂直、水平居中

  
    
    
    
    
  
  
    

      
我想居中显示
    
  


复制代码

（2）问：visibility 和 display 的差别（还有opacity)

• visibility 设置 hidden 会隐藏元素，但是其位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘
• display 设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。
• opacity 会将元素设置为透明，但是其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘

问：opacity 可以有过渡效果嘛？

可以设置过渡效果

问：BFC 与 IFC 区别

BFC 是块级格式上下文，IFC 是行内格式上下文：

• 内部的 Box 会水平放置
• 水平的间距由 margin，padding，border 决定

参考链接：

• juejin.im/entry/5938d…
• zhuanlan.zhihu.com/p/74817089

问：BFC会与float元素相互覆盖吗？为什么？举例说明

不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。

参考链接

• zhuanlan.zhihu.com/p/25321647

问：了解box-sizing吗？

box-sizing 属性可以被用来调整这些表现:

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

（2）什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件

五种：

• 浮动元素，float 除 none 以外的值
• 定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-block，table-cell，table-caption
• overflow 除了 visible 以外的值（hidden，auto，scroll）
• HTML 就是一个 BFC

BFC 的特性：

• 内部的 Box 会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由 margin 决定
• bfc 的区域不会与 float 的元素区域重叠。
• 计算 bfc 的高度时，浮动元素也参与计算
• bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

（2）问：了解盒模型吗？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型

标准盒子模型：宽度=内容的宽度（content）+ border + padding

低版本IE盒子模型：宽度=内容宽度（content+border+padding），如何设置成 IE 盒子模型:

box-sizing: border-box;
复制代码

参考链接

• zhuanlan.zhihu.com/p/74817089

问：说一下你知道的position属性，都有啥特点？

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。

问：两个div上下排列，都设margin，有什么现象？

• 都正取大
• 一正一负相加

问：为什么会有这种现象？你能解释一下吗

是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加

BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。

问：清除浮动有哪些方法？

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

• clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：{clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置成inline-block，其margin: 0 auto居中方式失效
• 给父级添加overflow:hidden 清除浮动方法
• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.float_div:after{
  content:".";
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}
.float_div{
  zoom:1
}
复制代码

参考链接

• juejin.im/post/5cc59e…
• segmentfault.com/a/119000001…
• juejin.im/post/5ca80d…
• juejin.im/post/5e8d52…
• juejin.im/post/5cc59e…
• juejin.im/post/5a0c18…
• juejin.im/post/5ce607…
• juejin.im/post/5e8b16…

了解更多加入我们前端学习圈