前端面试·CSS

月晕
1,818 阅读17分钟

关于面试中的一些CSS问题，问题合集请看前端小白的面试问题集。

1.CSS样式的优先级

  • CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高;
  • CSS 优先规则2："直接样式"比"祖先样式"优先级高;
  • CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
  • CSS 优先规则4：计算规则 选择器的特殊性值分为四个等级，如下：
    （1）标签内选择符x,0,0,0
    （2）ID选择符0,x,0,0
    （3）class选择符/属性选择符/伪类选择符 0,0,x,0
    （4）元素和伪元素选择符0,0,0,x
    计算方法：
    （1）每个等级的初始值为0
    （2）每个等级的叠加为选择器出现的次数相加
    （3）不可进位，比如0,99,99,99
    （4）依次表示为：0,0,0,0
    （5）每个等级计数之间没关联
    （6）等级判断从左向右，如果某一位数值相同，则判断下一位数值
    （7）如果两个优先级相同，则最后出现的优先级高，!important也适用
    （8）通配符选择器的特殊性值为：0,0,0,0
    （9）继承样式优先级最低，通配符样式优先级高于继承样式
    （10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
    CSS计数规则 计算实例：
    （1）#demoa{color:orange;}/特殊性值：0,1,0,1/
    （2）div#demoa{color:red;}/特殊性值：0,1,0,2/

2.CSS有哪些布局方法？

  • 固定布局
    宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。
  • 流式布局
    以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多
  • 弹性布局
    浮动部分和清楚浮动部分主要是兼容添加的一些代码，重点看弹性布局的部分，弹性布局相对前两种出现的比较晚些，但是弹性布局功能还是很强大的，布局也非常方便，但是此布局形式在pc端并不推荐使用，ie9以下浏览器均不支持，另外火狐等一些浏览器也需要做兼容，移动端目前绝大部分浏览器都已经支持弹性布局，在移动端大家可以尝试使用。
  • 浮动布局
    浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动哦。
  • 定位布局
    定位布局也是目前比较常用的一种布局方式，关键词：position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。

3.如何实现垂直水平居中？

一般常见的几种居中的方法有：

对于宽高固定的元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水 平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对 齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素

(1)可以使用flex布局实现水平垂直居中

(2)利用table，在父元素设置display:table;

子元素设置：display:table-cell;vertical-align:middle;

(3)移动端用：-webkit-transform: translate3d(-50%,-50%,0);

4.说一说flex布局

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex 容器，它的所有子元素都会成为它的项目。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还 可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候， 项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

5.做过哪些移动端适配？

目前只做过h5的一些移动端简单适配，比如弹性布局、ui框架里根据不同屏幕大小进行不同的网格划分。

6.IE的盒模型是什么，标准的盒模型是什么，如何转换？

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的 范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

7.rem,em,px的区别是什么？

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

  • px特点：

IE无法调整那些使用px作为单位的7a64e4b893e5b19e31333366306431字体大小；

国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

  • em特点 ：

em的值并不是固定的；

em会继承父级元素的字体大小。

  • rem特点：

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

8.如何实现三列布局？

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。

这里以左边宽度固定为100px，右边宽度固定为200px为例。

（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

.left{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: red;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #3A2CAC;
}

（2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。

.main {
    display: flex;
}
.left{
    width: 400px;
    background-color: red;
}
.center{
    background-color: blue;
    word-break: break-word;
}
.right{
    background-color: red;
    width: 400px;
}

（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #631D9F;
}
.right{
    float: right;
    width: 300px;
    height: 100px;
    background: red;
}
.center{
    margin-left: 300px;
    margin-right: 300px;
    background-color: #4990E2;
}

（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}

9.CSS3有哪些新特性？

详情参看:个人总结（CSS3新特性）
1.过渡 2.动画 3.形状转换 4.选择器 5.阴影 6.边框 7.背景 8.反射 9.文字 10.颜色
11.渐变 12.滤镜 13.弹性布局 14.栅格布局 15.多列布局 16.盒模型定义 17.媒体查询 18.混合模式

10.CSS3动画

CSS3动画属性animation和CSS3的transition属性一样是一个复合属性，它包含了8个属性：
animation-name，主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画， 从而执行动画。
animation-duration，主要用来设置动画播放所需时间，一般以秒为单位。
animation-timing- function主要用来设置动画的播放方式，与transition-timing-function类似。
animation-delay、主要用来指定动画开始时间，一般以秒为单位。
animation-iteration- count、主要用来指定动画播放的循环次数。
animation-direction、主要用来指定动画的播放方向。
animation-play- state，主要用来控制动画的播放状态。
animation-fill- mode，主要用来设置动画的时间外属性。

11.CSS3实现loading动画

给一个元素设置宽高相等的数值，border-radius设置成50%使其变成一个圆形，将背景色设置为透明，给元素加上几个像素的边框，并配上自己喜欢的颜色，需要注意的是，这里要将其中一个边的边框设置为透明，使其看起来像是一个只有四分之三的圆环，然后为其设置动画，让它动起来就可以了。给一个定位元素设置transform:translate(-50%, -50%)，再配合top和left的50%，可以使元素水平和垂直居中。之所以将translate(-50%, -50%)写在了form和to里面，是因为如果直接在元素上写"transform:translate(-50%, -50%)"，在动画里又写"transform: rotate(0deg)"会覆盖掉元素上的transform属性而导致无法居中。 最后在关键帧设置转速：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css 转圈</title>
  <style>
    .turn{
      width:100px;
      height: 100px;
      background: aqua;
      animation:turn 1s linear infinite;      
      margin: 100px auto;
    }
    /* 
      turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放
     */
    @keyframes turn{
      0%{-webkit-transform:rotate(0deg);}
      25%{-webkit-transform:rotate(90deg);}
      50%{-webkit-transform:rotate(180deg);}
      75%{-webkit-transform:rotate(270deg);}
      100%{-webkit-transform:rotate(360deg);}
    }
  </style>
</head>
<body>
  <div class="turn"></div>
</body>
</html>

12.display:inline和block的区别？display有哪些值？

  • display:block
    ①block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
    ②block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    ③block元素可以设置margin和padding属性。
  • display:inline
    ①inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
    ②inline元素设置width,height属性无效
    ③inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果
  • display:inline-block
    简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

13.display:none和visibility:hidden的区别

  • display:none：元素隐藏，会脱离文档流，不占位置，且会引起回流和重绘
  • visibility:hidden：只是隐藏内容，并没有脱离文档流，会占据页面的空间，只会引起重绘

14.flexbox中align-self是做什么用的？

align-items在伸缩容器上使用它，伸缩容器内部所有的元素都一致地受制于align-items的值。 但是有些时候，我们希望伸缩容器内部某个元素在侧轴上的排列方式有所差异。此时就不能使用align-items，因为align-items作用于整体。我们希望作用于部分。这就是align-self的发挥场地。
可取值：align-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

15.伪类与伪元素有什么区别？

  • 伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。
//html
<ul>
    <li>11111</li>
    <li>22222</li>
</ul>   
//css
li:first-child {
    color: red;   
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足
  • 伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
//html
<p>
    Hello, World
</p>
//css
p::first-letter {
  color: red;
}
//最终结果：
<p>
    <span class="first-letter">H</span>ello, World
</p>
.first-letter {
  color: red;
}

16.什么是BFC，什么能触发BFC，应用场景

定义：

BFC(Block formatting context) 直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

触发条件：

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

应用场景：

1.利用BFC避免margin重叠

如果两个行内元素设置margin，会出现margin重叠的问题，如下代码会布置两个margin为30px的元素。

<style>
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>

但将其中一个元素用bfc包裹，则两个元素的margin为60px。

<style>
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

2.自适应两栏布局 首先让边栏left脱离文档流，使用流动float，但这样会造成left遮挡right的内容。

<style>
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

这时候可以设置right为BFC,BFC的区域不会与float box重叠。

<style>
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

3.清除浮动

  • 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
  • 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
 .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }
  • 使用after伪元素清除浮动（推荐使用）
 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>
  • 使用before和after双伪元素清除浮动(代码更简洁)
 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

17.CSS解析顺序

CSS选择器匹配元素是逆向解析

因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。

🌰栗子： 如果从【水果】也就是【左】方向开始找，我们就会找3次。但是如果从【橘子】开始找，我们只需要一次就好了。 这是一个最简单的例子，根据这个例子我们也能看出，我们子元素只能有一个父元素，但是父元素可以有一堆子元素，所以还是从子元素，也就是【右】方向找会节约时间。

18.display、visibility和opacity的区别

display: none

  • （1）DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
  • （2）事件监听：无法进行 DOM 事件监听；
  • （3）性能：动态改变此属性时会引起重排，性能较差；
  • （4）继承：不会被子元素继承，毕竟子类也不会被渲染；
  • （5）transition：transition 不支持 display。

visibility: hidden

  • （1）DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
  • （2）事件监听：无法进行 DOM 事件监听；
  • （3）性 能：动态改变此属性时会引起重绘，性能较高；
  • （4）继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
  • （5）transition：transition 支持 visibility。

opacity: 0

  • （1）DOM 结构：透明度为 100%，元素隐藏，占据空间；
  • （2）事件监听：可以进行 DOM 事件监听；
  • （3）性 能：提升为合成层，不会触发重绘，性能较高；
  • （4）继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
  • （5）transition：transition 支持 opacity。
avatar
文章
阅读
粉丝