前言

除了第5题来自网易，其他题目均为字节跳动的css面试题，第9题和第10题更是所有公司几乎都会考察的问题，是我们必须要掌握的重中之重！

1.盒模型相关问题

1.1什么是盒模型？

每个元素都是一个一个的盒子，它由margin,border,padding,content组成，最中间的蓝色就是content平时我们就在对里面的content设置各种样式，整体的盒子就会根据设置的样式渲染在浏览器中。

1.2标准盒模型和IE盒模型的区别？

标准盒模型：高度和宽度是是内容content的宽高（不加内边距和边框）

标准盒模型.jpg

IE盒模型：IE盒模型的宽高除了content的宽高，还包含内边距（padding）和边框（border）

IE盒模型.jpg

1.3怎么设置这两者盒模型？

用box-sizing可以设置盒子模型

标准盒模型：box-sizing: content-box;
IE盒模型：box-sizing: border-box;

2.如何使用JS获取和设置盒模型的宽高？你能想到几种方法？

dom.style.width(只能获取行内样式的值，但是能设置宽高)
dom.offsetWidth(只能获取)
dom.getBoundingClientRect().width(只能获取)
window.getComputedStyle(dom).width(只能获取)
dom.CurrentStyle.width(只能获取，且只支持IE)

3.描述一下下面这个盒子的大小，颜色等信息（content-box模型）

<style>
  body {
    background-color: gray;
  }

  div {
    color: blue;
    width: 100px;
    background-color: pink;
    border: 10px solid;
    padding: 20px;
  }
</style>

注意是等信息，看到的都说
大小：0
padding：pink（继承content颜色）padding颜色和背景色相同
border：blue（继承字体颜色）

4.当用border-radius将small盒子设置成圆，内容会超出圆形吗？

会超出，因为border-radius属性只是改变视觉效果，实际上盒子占据的空间还是不变的

5.当元素设置成inline-block会出现什么问题？怎么消除？

问题：元素之间会有间隙
解决方案：
1. 父容器font-size设置为0，子容器再把font-size设置回来（不设置回来内容就没有了）
2. 去掉HTML中的空格（有点丑，可读性太差）,用注释换行可以增加一下可读性
3. 借助html注释
4. margin给一个负值，不同浏览器值不同
5. 去掉a标签的闭合标签
6. 父容器设置letter-spacing为负值，子容器将letter-spaceing重新设置为0
7. 父容器设置word-spacing为负值，子容器将word-spaceing重新设置为0

6.行内元素可以设置padding、margin吗

行内元素padding、margin只在左右有效，上下无效！

7. padding：1px2px3px; 这代码有什么效果

上：1px
右：2px
下：3px
左：（2px）没有就对应着2px

8. 内边距的百分比数值是怎么计算的？

根据父元素的宽度计算的

9.清除浮动的方法（百分之一万会被问到的问题）

9.1浮动的特点

优势：
1. 可以控制元素的位置
2. 可以实现文字的环绕效果
缺陷：浮动的元素会脱离文档流，导致无法撑起父容器的宽高，导致父容器高度塌陷

9.2清除浮动方法

在父容器结束标签之前，插入清除浮动的块级元素（弊端：造成性能浪费，增加了不需要的文档流，增加了浏览器的渲染压力）
给父容器增加一个after伪元素，在伪元素上做clear操作（推荐）
给同级邻后的元素加上clear属性（不是很推荐）
将父容器设置成为BFC容器

10.BFC

（Block Formatting Context）块级格式化上下文

10.1 BFC创建方法：

overflow：auto || hidden || overlay || scoll
float: 值不为none；
position: absolute || fixed
display: inline-block || inline-... || table
flex: flexd || inline-flex

10.2 BFC的特点：

BFC容器内部的盒子会垂直方向一个接一个排列（常规文档流）
BFC是页面上的一个独立的容器，容器里的子元素不会影响到外面的元素
计算BFC容器的高度时，会考虑BFC所包含的所有元素，连浮动元素也包含
可以解决margin重叠的bug

这里BFC主要会问到的问题，对BFC的概念没有什么讲解，想要深入学习BFC的同学可以看下面这篇文章，来自网易考拉 juejin.cn/post/684490…

更新分割线

11. 画一条0.5px的线

<meta name="viewport "content= "width = device-width, initial-scale=0.5">
ransform:scale(0.5);
border-image();

12. rem

(function(){
  let width = document.documentElement.clintWidth
  let fontS = width/10;
  document.documentElement.style.fontSize = fontS +'px';
})()

【面试题】CSS面试题

前言