CSS常见面试题

CSS
字数统计: 3.9k   |   阅读时长≈ 15 分钟

CSS常见面试题

  1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

  1. box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分 的高/宽

  1. CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

  1. !important声明的样式优先级最高，如果冲突再进行计算。
  2. 如果优先级相同，则选择最后出现的样式。
  3. 继承得到的样式的优先级最低。
  1. CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

  1. 如何居中div？
<div class="main">
  <div class="content"></div>
</div>
.main{
  background-color: yellowgreen;
  width: 300px;
  height: 300px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.content{
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
} 
.content{
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
} 
.main{
  background-color: yellowgreen;
  width: 300px;
  height: 300px;
  text-align: center;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
  1. display有哪些值？说明他们的作用?
  • inline（默认）–内联
  • none–隐藏
  • block–块显示
  • table–表格显示
  • list-item–项目列表
  • inline-block
  1. position的值？
  • static（默认）：按照正常文档流进行排列；
  • relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
  • absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
  • fixed(固定定位)：所固定的参照对像是可视窗口。
  1. 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

  1. 用纯CSS创建一个三角形的原理是什么？
:root{
  --border-width:100px;
}
.main{
  width: 0;
  height: 0;
  margin-top: 100px;
}
.main1{
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: var(--border-width) solid yellowgreen;
}
.main2{
  border-right: 100px solid yellowgreen;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}
.main3{
  border-right: 120px solid yellowgreen;
  border-bottom: 70px solid transparent;
  border-top: 30px solid transparent;
}
/**********************************************/
:root {
  --Width: 0;
  /* --Width:100px; */
  --border-width: 60px;
}

/*三角形 开口向左上*/
.main {
  width: var(--Width);
  height: var(--Width);
  border: var(--border-width) solid;
  border-color: yellow red green black;
  border-bottom-color: transparent;
  /*transparent 表示颜色透明*/
  border-right-color: transparent;
}

/*扇形 开口向下*/
.main2 {
  width: 0;
  height: 0;
  margin-top: 100px;
  border: 100px solid red;
  /* border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent; */
  border-color: #f00 transparent transparent;
  border-radius: 100px;
}

/*等腰梯形*/
.main3 {
  margin-top: 100px;
  width: 100px;
  height: 100px;
  border: 70px solid;
  border-color: red transparent transparent;
}

/*直角梯形*/
.main4 {
  margin-top: 100px;
  width: 0;
  height: 0;
  border: 70px solid;
  border-bottom-width: 0;
  border-color: red red transparent transparent;
}

/*平行四边形*/
.main5 {
  position: relative;
  margin-top: 100px;
  border: solid;
  width: 0;
  height: 0;
  border-width: 100px 70px;
  border-color: yellow red green black;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}

.main5::after {
  content: "";
  position: absolute;
  top: 0;
  right: -140px;
  border-right:70px solid transparent ;
  border-left:70px solid transparent ;
  border-top:100px solid red ;
}
  1. 常见的兼容性问题？
  • 同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
  • IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性
  • 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

**

  1. display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

  1. position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

  1. 对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。
定位方案：

  1. 内部的Box会在垂直方向上一个接一个放置。
  2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的margin box 的左边，与包含块border box的左边相接触。
  4. BFC的区域不会与float box重叠。
  5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  6. 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

  1. 根元素，即html
  2. float的值不为none（默认）
  3. overflow的值不为visible（默认）
  4. display的值为inline-block、table-cell、table-caption
  5. position的值为absolute或fixed

**

  1. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

  1. 父级div定义height
  2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
  3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
  4. 父级div定义zoom
  5. 伪类（最佳）

最佳实现方法：

/*清除浮动，将该class写在浮动元素的父级元素或父级以上的 元素*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}


/*兼容ie*/

.clearfix {
    zoom: 1;
}

**

  1. CSS优化、提高性能的方法有哪些？
    1. 避免过度约束
    2. 避免后代选择符
    3. 避免链式选择符
    4. 使用紧凑的语法
    5. 避免不必要的命名空间
    6. 避免不必要的重复
    7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
    8. 避免！important，可以选择其他选择器
    9. 尽可能的精简规则，你可以合并不同类里的重复规则**
  2. 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

  1. margin和padding分别适合什么场景使用？

何时使用margin：

  1. 需要在border外侧添加空白
  2. 空白处不需要背景色
  3. 上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

  1. 需要在border内侧添加空白
  2. 空白处需要背景颜色
  3. 上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

  1. 全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 200px;
            overflow: hidden;
        }
        .mian{
            height: 200px;
            width: 1000px;
            overflow: hidden;
            animation: identifier 10s 1s linear infinite;
        }
        .mian div{
            width: 200px;
            height: 100%;
            float: left;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: blue;
        }
        .box4{
            background-color: purple;
        }
        .box5{
            background-color: pink;
        }
        @keyframes identifier {
            0% {
                transform: translateX(0);
            }
            20% {
                transform: translateX(-200px);
            }
            40% {
                transform: translateX(-400px);
            }
            60% {
                transform: translateX(-600px);
            }
            80% {
                transform: translateX(-800px);
            }
            100% {
                transform: translateX(-0);
            }
        }
    </style>
</head>
<body>
   <div class="wrap">
        <div class="mian">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
        </div>
   </div>
</body>
</html>
  1. ::before 和 :after中双冒号和单冒号有什么区别和作用?
    1. 冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
    2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
**

  1. 你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

  1. 怎么让Chrome支持小于12px 的文字？

font-size: 20px;-webkit-transform: scale(0.8);

  1. 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing：antialiased

  1. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

  1. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

  1. 可以将

  2. 代码全部写在一排

  3. 浮动li中float：left

  4. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

**

  1. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png：
特点：支持无损压缩、体积大、质量好、支持透明
使用场景：png在处理线条和颜色对比方面有优势，所以经常会被用来做logo或者颜色简单且对比强烈的背景图
jpg/jpeg：
特点：有损压缩、体积小、加载快、不支持透明
使用场景：适用于颜色丰富的场景、如背景图、轮播图、banner图等。
svg：
特点：文本文件、体积小、不失真、兼容性好
使用场景：将 SVG 写入独立文件后引入 HTML
base64 :
特点： 文本文件、基于编码、小图标解决方案
使用场景：小图标
webp：

WebP 是 Google 专为 Web 开发的一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩

特点：兼容png和jpg的优点，但是有兼容性问题。

  1. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
  • 参数是scroll时候，必会出现滚动条。
  • 参数是auto时候，子元素内容大于父元素时出现滚动条。
  • 参数是visible时候，溢出的内容出现在父元素之外。
  • 参数是hidden时候，溢出隐藏。
  1. 阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

  1. div垂直居中 左右10px 宽为高的2倍 内容垂直居中

关键点：padding-top、padding-bottom、margin-top、margin-bottom为百分比的时候，都是相对于父元素的width。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div垂直居中，左右10px，高度始终为宽度一半</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .outer-wrap {
            height: 100%;
            margin: 0 10px;
            background-color: yellowgreen;
            display: flex;
            align-items: center;
        }

        .inner_wrapper {
            background: red;
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 50%;
        }

        .text {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="outer-wrap">
        <div class="inner_wrapper">
            <div class="text">A</div>
        </div>
    </div>
</body>

</html>

第二种：

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.box{
  margin-left: 10px;
  width: calc(100vw - 20px);
  height: calc(50vw - 10px);
  background-color: yellowgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
  1. **
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！