CSS面试题

错误之处，欢迎指正，持续更新中。

1. 基础

1. px、em、rem和vw/vh有什么区别？

  1. px是像素，是一个绝对单位。
  2. em设置在字体上，表示相对于父级元素字体大小的倍数；
    设置在宽度、高度等上，表示相对于自身字体大小的倍数。
    如果父级没有设置字体大小，那么就继续向上找，如果到html依然没有设置字体大小，那么就会使用浏览器的基准字号。 
/*
<body>
  <div class="wrapper">
    <div class="container"></div>
  </div>
</body>
*/
html{
  font-size: 20px;
}
.wrapper{
  font-size: 2em;  /*相对于父级html字体大小，20px * 2 = 40px */
  height: 1em;     /*相对于自身字体大小，40px * 1 = 40px*/
}
.container{
  font-size: 2em;  /*相对于父级wrapper字体大小，40px * 2 = 80px */
  height: 1em;     /*相对于自身字体大小，80px * 1 = 80px*/
}
  1. rem
    表示相对于跟元素html字体大小的倍数。
/*
<body>
  <div class="wrapper">
    <div class="container"></div>
  </div>
</body>
*/
html{
  font-size: 20px;
}
.wrapper{
  font-size: 2rem;  /*相对于html字体大小，20px * 2 = 40px */
  height: 1rem;     /*相对于html字体大小，20px * 1 = 20px*/
}
.container{
  font-size: 2rem;  /*相对于html字体大小，20px * 2 = 40px */
  height: 1rem;     /*相对于html字体大小，20px * 1 = 20px*/
}
  1. vw/vh
    1vw = 视口宽度的1%
    1vh = 视口高度的1%
    在pc端，视口就是指浏览器窗口的大小。
    在移动端，视口就是Layout Viewport（布局视口，不包含任务栏标题栏操作栏等）的大小。

2. 选择器权重。

  1. 内联样式 1000
  2. id选择器 100
  3. 类、伪类和属性选择器 10
  4. 元素选择器和伪元素选择器 1
  5. 通配符选择器 0
  6. !important优先级最高。

3. display

1. inline、block和inline-block有什么区别？

  1. inline
    不独占一行，和其他非独占一行元素都在同一行。
    元素的宽、高、边距不可设置，宽度为内容的宽度。
  2. block
    块级元素独占一行。
    可以设置元素的宽（默认情况下与父元素宽度一致）、高、边距。
  3. inline-block
    不独占一行，和其他非独占一行元素都在同一行。
    可以设置元素的宽（默认情况下为内容的宽度）、高、边距。

2. display: inline-block;什么时候会显示间隙，如何消除间隙？

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车、换行等）都会被浏览器处理，在字体不为0的情况下代码中的空白符就占据了一定宽度，因此出现了间隙。
解决办法：

  1. 书写时标签不换行。
  2. 父级标签font-size: 0;。
  3. 设置为浮动元素。

3. flex属性的三个值分别是什么？

flex: flex-grow flex-shrink flex-basis;

  1. flex-grow
    当父元素的宽度大于所有子元素宽度之和时，根据这个值来分配父元素剩余的宽度。
/*
<body>
  <div class="wrapper">
    <div class="box"></div>
  </div>
</body>
*/
.wrapper{
  width: 100px;
  height: 100px;
  display: flex;
}
.box{
  width: 50px;
  height: 50px;
  flex-grow: 0.5; /*此时div.box的实际宽度为（100 - 50）* 0.5 + 50 = 75*/
}
  1. flex-shrink
    当父元素的宽度小于所有子元素的宽度之和时，根据这个值来决定如何缩放子元素。
.wrapper{
  width: 300px;
  height: 100px;
  display: flex;
  border: 1px solid black;
}
.box1{
  width: 250px;
  height: 50px;
  background-color: #ccc;
  flex-shrink: 1;
}
.box2{
  width: 250px;
  height: 50px;
  background-color: #f40;
  flex-shrink: 3;
}

总宽度: 250 + 250 = 500
超出宽度：500 - 300 = 200
宽度*缩放比相加: 1 * 250 + 3 * 250 = 1000
div.box1占比: 1 * 250 / 1000 = 0.25
div.box1缩小宽度: 0.25 * 200 = 50
div.box1实际宽度: 250 - 50 = 200
div.box2占比: 3 * 250 / 1000 = 0.75
div.box2缩小宽度: 0.75 * 200 = 150
div.box2实际宽度: 250 - 150 = 100

  1. flex-basis
    用于设置子元素的占用空间（也就是宽度，并且会覆盖宽度的值。）
.wrapper{
  width: 100px;
  height: 100px;
  display: flex;
}
.box{
  width: 50px;
  height: 50px;
  flex-basis: 70px; /*此时div.box的实际宽度为70*/
}

4. 简单介绍弹性盒子布局中的换行和排序。

  1. 换行
    默认情况下，弹性盒子布局中，如果一行放不下所有子元素，将不会换行，而是对子元素进行缩放。有a b c三个元素，那么：
    a的新宽度 = （a的原始宽度 / a+b+c的宽度之和）* 父盒子的宽度
flex-wrap: wrap;

如果换行之后，某个元素的宽度大于父盒子宽度，那么默认情况下，该元素的宽度等于父盒子的宽度。

  1. 排序
    通过给子元素设置order属性来进行排序，order值越小，越靠前。

4. 简要描述position四种定位分别是什么，有什么区别。

  1. static
    默认值，没有定位，元素出现在正常的流中（即使设置top、bottom、left或right位置也不会发生改变）
  2. absolute
    绝对定位，设置top、bottom、left和right会相对于父元素（非static定位）进行定位，如果父元素是static定位，会继续向上找，一直到body。
  3. relative
    相对定位，设置top、bottom、left和right会相对于元素初始位置进行定位。
  4. fixed
    绝对定位，设置top、bottom、left和right会相对于浏览器窗口进行定位。

5. 简要说明两种盒模型。

  1. IE盒模型
.box{
  width: 100px;  
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;   /* 设置盒子为IE盒模型 */
}

盒子的总体宽、高均为100px（content + padding + border ）

  1. 标准（W3C）盒模型
.box{
  width: 100px;  
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box;
}

盒子的content区域宽、高均为100px。

6. 列举实现div居中的几种方式。

  1. 定位
.box{
  width: 200px;
  height: 100px;
  background-color: #aaa;
  position: absolute;   /*设置div元素定位为position*/
  top: calc(50% - 50px);  /*设置top值为50% - 自身高度的一半*/
  left: calc(50% - 100px);  /*设置left值为50% - 自身宽度的一半*/

  /* 或者使用margin */
  /* top: 50%;
  left: 50%;
  margin-top: -50px;       
  margin-left: -100px; */  

  /* 或者使用transform */
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}
  1. 弹性盒子
    通过设置父元素的flex样式，来使子元素居中。
.container{
  width: 500px;
  height: 300px;
  background-color: #cfcfcf;
  display: flex;
  justify-content: center;
  align-items: center;    
}

7. 如何实现九宫格布局？

  1. 弹性盒子
.container{
  width: 350px;
  height: 350px;
  display: flex;   /*主要代码*/
  flex-wrap: wrap;  /*主要代码*/
  justify-content: center;  /*主要代码*/
  align-content: center;   /*主要代码*/
  border: 1px solid black;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 1px;
}
  1. 浮动
.container{
  width: 306px;
  height: 306px;
  border: 1px solid black;
}
.box{
  width: 100px;
  height: 100px;
  margin: 1px;
  background-color: #000;
  float: left;   /*主要代码*/
}

8. 如何实现三个盒子平分浏览器？

  1. 浮动
    设置盒子宽度为33.3%，然后设置左浮动。
.box1{
  width: 33.3%;
  height: 200px;
  background-color: #000;
  float: left;
}
.box2{
  width: 33.3%;
  height: 200px;
  background-color: #f0f;
  float: left;
}
.box3{
  width: 33.3%;
  height: 200px;
  background-color: #ff0;
  float: left;
}
  1. 弹性盒子
    设置盒子宽度为33.3%，然后设置父级body为弹性盒子布局。
body{
  display: flex;
}
.box1{
  width: 33.3%;
  height: 200px;
  background-color: #000;
}
.box2{
  width: 33.3%;
  height: 200px;
  background-color: #f0f;
}
.box3{
  width: 33.3%;
  height: 200px;
  background-color: #ff0;
}

9. 如何使用css画一个三角形。

.box{
  width: 0;
  height: 0;
  border-top: 10px solid black;
  border-left: 10px solid black;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
}

10. 如何清除浮动？

清除浮动就是让浮动元素的父元素高度撑开，那么之后的元素就都会避开这一区域进行排列。

  1. clear属性
/*
<div class="box1"></div>
<div class="clear-box"></div>
<div class="box2"></div>
*/
.box1{
  width: 100px;
  height: 100px;
  background-color: #f40;
  float: left;
}
.clear-box{
  clear: both;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: #000;
}

当设置clear: both;时，意为该元素的左右都不可以有浮动元素，所以该元素会下移直至换行，而为了让该元素换行，那么浮动元素的父元素就要进行空间的计算，这样父元素的高度就被撑起来了。

  1. overflow属性
    通过给浮动元素的父元素设置overflow: hidden;属性设置盒子为BFC，从而使父元素的高度撑开。
/*
<div class="father">
  <div class="div1"></div>
</div>
<div class="div2"></div>
*/
.father{
  overflow: hidden;
}
.div1{
  width: 100px;
  height: 100px;
  float: left;
}
.div2{
  width: 100px;
  height: 100px;
}
  1. after伪元素
.father::after{
  content: "";
  display: block;
  clear:both;
}
.div1{
  width: 100px;
  height: 100px;
  float: left;
}
.div2{
  width: 100px;
  height: 100px;
}
  1. height
    通过给浮动元素的父元素设置高度来清除浮动，比较局限性，只适合固定高度的布局。

11. 如何消除图片间隙？

  1. display: block;
    这种方法的不足之处就是会让图片独占一行，带来换行。
  2. vertical-align
vertical-align: bottom;    /*设置为top也可以*/

这种方法不足之处就是只能消除上下的间隙。

  1. 浮动
    这种方法会改变文档流，会导致块级元素不换行，可能会需要清除浮动。
  2. 消除换行
    图片左右间隙的产生是因为换行，可以通过标签不换行的方式来清除左右间隙。

12. 列举css隐藏元素的几种方式和区别。

  1. display
display: none;  /*元素不在占据浏览器中的页面空间*/
  1. opacity
opacity: 0;   /*元素还在，但是已经透明了，看不到*/
  1. visibility
visibility: hidden;  /*元素还在，但是设置为不可见了，看不到*/

13. 如何旋转一张图片？

img{
  width: 100px;
  transform: rotate(90deg);  /* 顺时针旋转90度 */
}

14. animation和transform的区别是什么？

  1. animation的可控性更高，可以定义多个关键帧，但是transition只能设置初始状态和结束状态。
  2. animation更应该称之为动画，而transition就是平滑的改变css。
  3. animation能自动触发，但transition需要一些动作，例如:hover才能触发。
  4. animation可以循环执行，transition只能触发一次。

15. 如何实现两栏布局？

  1. 浮动
    这种写法是基于常规流不会避开浮动流的概念。
/*
<div class="box1"></div>
<div class="box2"></div>
*/
.box1{
  width: 200px;
  height: 20px;
  float: left;
  background-color: #f40;
}
.box2{
  width: auto;
  margin-left: 200px;
  height: 20px;
  background-color: #000;
}
  1. 定位
.box1{
  width: 200px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f40;
}
.box2{
  width: auto;
  margin-left: 200px;
  height: 20px;
  background-color: #000;
}
  1. 弹性盒子
    这种方法是使用flex-grow属性，让第二个盒子占满剩余宽度。
/*
<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
*/
.wrapper{
  width: 100%;
  height: 20px;
  display: flex;
}
.box1{
  width: 200px;
  height: 20px;
  background-color: #f40;
}
.box2{
  width: auto;
  height: 20px;
  background-color: #000;
  flex-grow: 1;
}

16. transform: translateZ(0);有什么作用?

在使用transform做动画时，会把元素提升为一个复合层，变成3D效果，因而使用GPU进行渲染；但是在使用JavaScript操作css属性做动画时，并不会将元素提升为复合层，因而使用translateZ(0)来将元素提升为复合层，使用GPU进行渲染。

17. 介绍下auto单位。

  1. 当一个块盒的宽度设置为auto时，代表着这个块盒的宽度要将独占这一行的剩余空间都吸收掉。高度设置为auto，代表着适应文本的高度，让文本撑起来。
  2. 在水平方向上，margin（margin-left、margin-right）也可以吸收剩余空间，使用margin: 0 auto;来实现居中就是运用了这一特点，margin-left和margin-right平分剩余的空间。
    在一个块盒中，margin的吸收能力低于width的吸收能力
  3. 在垂直方向上，margin-top和margin-bottom的取值为auto时，表示0。

18. 介绍下百分比单位。

  1. width、margin、padding的百分比都是相对于父元素的宽度。
  2. height
    如果父级的height为auto或者0，那么子级高度为0；
    如果父级的height为给出的一个值，那么子级的高度百分比是相对于父元素的高度进行计算。
.container{
  width: 300px;
  height: 200px;
}
.box{
  width: 50%;   /* 150px */
  height: 50%;  /* 100px */
  padding: 10%; /* 30px */
  margin: 20%;  /* 60px */
}

19. 介绍下浮动以及相关的影响。

  1. 浮动的元素一定是一个块盒。
  2. 浮动中的auto
    浮动盒子宽度设置为auto时，宽度适应内容（自适应），
    margin为auto时，相当于为0。
  3. 常规流（块盒）和浮动流：
    常规流影响浮动流，但是浮动流不能影响常规流（常规流会无视浮动流的存在）。
/* 
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
*/
.box1{
  width: 100px;
  height: 100px;
  background-color: #f40;
}
.box2{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #000;
}
常规流影响浮动流
.box1{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #000;
}
.box2{
  width: 200px;
  height: 100px;
  background-color: #f40;
}
常规流无视浮动流存在
  1. 文字环绕（行盒）
  • 行盒在排列时，会避开浮动流。
/* 
<body>
  <div class="box1"></div>
  <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt optio, rem mollitia nostrum tempore nemo? Reprehenderit perferendis aliquam repellendus! Quisquam?</span>
</body>
*/
.box1{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #000;
}
文字环绕效果
  • 神奇的现象
/* 
<body>
  <div class="box1"></div>
  <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt optio, rem mollitia nostrum tempore nemo? Reprehenderit perferendis aliquam repellendus! Quisquam?</div>
</body>
*/
.box1{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #000;
}
.box2{
  width: auto;
  height: auto;
  border: 1px solid black;
}
文字环绕

此时，常规流块盒确实没有避开浮动流，但是文字却避开了，那是因为如果文字没有处于行盒中，浏览器会生成一个匿名行盒对文字进行包裹。

  1. 高度坍塌
    容器盒子设置高为auto时，如果内容盒子是浮动流，那么容器盒子不会被撑起高度。

20. 什么是BFC？

BFC指块级格式化上下文，是一个独立存在和外界隔离的容器。可以通过为盒子添加：
position: absolute;
overflow: hidden;
float: left;
任一个属性，来设置盒子为BFC。

<div class="container">   <!--处于根元素的BFC中  -->
    <div class="box"></div>   <!--处于根元素的BFC中  -->
</div>
<div class="wrapper" style="position: absolute;">   <!--处于根元素的BFC中  -->
    <div class="box2"></div>   <!--处于wrapper元素的BFC中  -->
</div>
  1. BFC盒子会计算内部浮动元素的高度，以此可以避免高度坍塌。
  2. 处于同一个BFC的盒子，重叠外边距会合并。
  3. 一个常规流的BFC盒子不会无视浮动流，会避开浮动流进行排列。

2. 进阶

1. 如何动态加载外部css文件？

const styleSheets = document.createElement('link');
styleSheets.href = "./index.css";
styleSheets.rel = "stylesheet";
styleSheets.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheets);

2. link和@import引入css样式的区别是什么？

  1. link引入的css在加载页面时同时加载，而@import引入的css要在页面加载完毕后加载。
  2. link是HTML提供的标签，而@import是css的语法规则。
  3. link支持javascript控制DOM改变样式，而@import不支持。（未能测试出该点，知道这点的详细测试方法的请告知下）
  4. @import只有在IE5以上的版本才能识别，而link无此问题。

3. less对比css有什么优势？

  1. less是css预处理语言，需要编译后才能转换为浏览器可识别的css。
  2. less在css的基础上，提供了嵌套、变量以及函数等功能，更方便编写。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,552评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,666评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,519评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,180评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,205评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,344评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,781评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,449评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,635评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,217评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,775评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2赞 341