CSS 常考面试题资料

1 标准盒子模型

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

• css 中的盒模型包括怪异盒模型和标准盒模型。

• box-sizing: border-box,inherit,content-box

• 标准盒模型：box-sizing: content-box

<div class="box">盒子的高度=content</div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 10px;
  border: 10px solid gray;
  color: green;
}

• 怪异盒模型：box-sizing: border-box,元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

<div class="box">盒子的高度=border+paddig+content</div>

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 10px;
  border: 10px solid gray;
  color: green;
}

• inherit:从父类继承 box-sizing 的值

2 box-sizing 属性？

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

3 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 比内联优先级高

4 CSS 优先级算法如何计算？

• 元素选择符： 1
• class 选择符： 10
• id 选择符：100
• 元素标签：1000
• !important 声明的样式优先级最高，如果冲突再进行计算。
• 如果优先级相同，则选择最后出现的样式。
• 继承得到的样式的优先级最低。

5 CSS3 新增伪类有那些?

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

6 如何居中

7 display 有哪些值？说明他们的作用?

• inline（默认）–内联
• none–隐藏
• block–块显示
• table–表格显示
• list-item–项目列表
• inline-block

8 position 的值？

• static（默认）：按照正常文档流进行排列；
• relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
• absolute(绝对定位)：参考距其最近一个不为 static 的父级元素通过 top, bottom, left, right 定位；
• fixed(固定定位)：所固定的参照对像是可视窗口。

9 用纯 CSS 创建一个三角形的原理是什么？

• 首先，需要把元素的宽度、高度设为 0。然后设置边框样式。
• width: 0;
• height: 0;
• border-top: 40px solid transparent;
• border-left: 40px solid transparent;
• border-right: 40px solid transparent;
• border-bottom: 40px solid #ff0000;

10 一个满屏品字布局如何设计?

• 第一种真正的品字：
  • 三块高宽是确定的；
  • 上面那块用 margin: 0 auto;居中；
  • 下面两块用 float 或者 inline-block 不换行；
  • 用 margin 调整位置使他们居中。
• 第二种全屏的品字布局:
  • 上面的 div 设置成 100%，下面的 div 分别宽 50%，然后使用 float 或者 inline 使其不换行。

11 absolute 的 containing block 计算方式跟正常流有什么不同？

• 无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
• 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
• 否则,则由这个祖先元素的 padding box 构成。
• 如果都找不到，则为 initial containing block。
• 补充：
• static(默认的)/relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）
• absolute: 向上找最近的定位为 absolute/relative 的元素
• fixed: 它的 containing block 一律为根元素(html/body)

12 CSS 里的 visibility 属性有个 collapse 属性值？在不同浏览器下以后什么区别？

• 当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。
• chrome 中，使用 collapse 值和使用 hidden 没有区别。
• firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。

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

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

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

• BFC 是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
• 计算 BFC 的高度时，浮动子元素也参与计算（内部有浮动元素也不会发生高度塌陷）
• BFC 的区域不会与 float 的元素区域重叠
• BFC 内部的元素会在垂直方向上放置
• BFC 内部两个相邻元素的 margin 会发生重叠
• BFC 规定了内部的 Block Box 如何布局
• 定位方案：
• 内部的 Box 会在垂直方向上一个接一个放置。
• Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
• 每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
• BFC 的区域不会与 float box 重叠。
• BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 计算 BFC 的高度时，浮动元素也会参与计算。
• 满足下列条件之一就可触发 BFC
• 根元素，即 html
• float 的值不为 none（默认）
• overflow 的值不为 visible（默认）
• display 的值为 inline-block、table-cell、table-caption
• position 的值为 absolute 或 fixed

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

• 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
• 浮动带来的问题：
• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
• 清除浮动的方式：
• 父级 div 定义 height
• 最后一个浮动元素后加空 div 标签 并添加样式 clear:both。
• 包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。
• 父级 div 定义 zoom

16 设置元素浮动后，该元素的 display 值是多少？

自动变成 display:block

17 移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的 css，适应相应的设备的显示。

<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”> CSS : @media only screen and (max-device-width:480px) {/css 样式/}

18 CSS 优化、提高性能的方法有哪些？

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
• 避免！important，可以选择其他选择器
• 尽可能的精简规则，你可以合并不同类里的重复规则

19 浏览器是怎样解析 CSS 选择器的？

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

20 在网页中的应该使用奇数还是偶数的字体

• 使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏

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

• 何时使用 margin：
  • 需要在 border 外侧添加空白
  • 空白处不需要背景色
  • 上下相连的两个盒子之间的空白，需要相互抵消时。
• 何时使用 padding：
  • 需要在 border 内侧添加空白
  • 空白处需要背景颜色
  • 上下相连的两个盒子的空白，希望为两者之和。

22 元素竖向的百分比设定是相对于容器的高度吗？

• 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

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

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

overflow：hidden；transition：all 1000ms ease

24 什么是响应式设计？响应式设计的基本原理是什么

• 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
• 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
• 页面头部必须有 meta 声明的 viewport。

<meta
  name="’viewport’"
  content="”width=device-width,"
  initial-scale="1."
  maximum-scale="1,user-scalable=no”"
/>

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

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

多行文本垂直居中：需要设置 display 属性为 inline-block。

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

p{font-size:10px;-webkit-transform:scale(0.8);}

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

-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

28 position:fixed;在 android 下无效怎么处理？

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>

29 如果需要手动写动画，你认为最小时间间隔是多久

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

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

• 行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了。
• 解决方法：
• 可以将<li>代码全部写在一排
• 浮动 li 中 float：left
• 在 ul 中用 font-size：0（谷歌不支持）；可以使用 letter-space：-3px

31 display:inline-block 什么时候会显示间隙？

• 有空格时候会有间隙 解决：移除空格
• margin 正值的时候 解决：margin 使用负值
• 使用 font-size 时候 解决：font-size:0、letter-spacing、word-spacing

32 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

外层 div 使用 position：relative；高度要求自适应的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0

33 图片格式解释一下

• png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
• jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在 www 上，被用来储存和传输照片的格式。
• gif 是一种位图文件格式，以 8 位色重现真色彩的图像。可以实现动画效果.
• webp 格式是谷歌在 2010 年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png 小了 45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和 opera 支持。

34 style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下 当然是先加载样式。 写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

35 CSS 属性 overflow 属性定义溢出元素内容区的内容会如何处理?

参数是 scroll 时候，必会出现滚动条。 参数是 auto 时候，子元素内容大于父元素时出现滚动条。 参数是 visible 时候，溢出的内容出现在父元素之外。 参数是 hidden 时候，溢出隐藏。

36 flex 布局

• justify-content:水平对齐方式
• item-aligin：上下对齐方式
• flex-direction：修改方向
• flex-wrap：换行方式
• flex-flow：flex-direction 和 flex-wrap 的简写
• align-content：定义多根轴线的对齐方式
• flex-grow:定义项目的放大比例，默认为 0，即使有剩余空间也不放大
• flex-shrink:定义项目的缩小比例，默认为 1，即如果空间不足，子元素将缩小
• flex-basis：定义在分配多余空间之前，项目占据的主轴空间
• flex:属性时 flex-grow,flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，即有剩余空间不放大剩余空间不够将缩小，子元素占据自身大小。

37 前端一像素问题（画一条 0.5px 的线）

• transform:scaleY(0.5) 使用伪元素设置 1px 的边框，然后对边框进行缩放（scaleY）

• 实现思路：
  • 1、设定目标元素的参考位置
  • 2、给目标元素添加一个伪元素 before 或者 after,并设置绝对定位
  • 3、给伪元素添加 1px 的边框
  • 4、用 box-sizing:border-box 属性把边框都包进宽和高里面
  • 5、宽和高设置为 200%
  • 6、调整盒子模型缩小为 0.5
  • 7、调整盒子模型的位置，以左上角为基准 transform-origin:0 0;
• noreder-image:设置图片的边框

38 左边定宽，右边自适应

• 方案一：左边设置浮动，右边宽度设置 100%
  • .left{float:left} .right:{width:100%}
• 方案二：左边设置浮动，右边用 cacl 去补宽度计算，
  • .left{float:left} .right:{width:cacl(100vw - 200px)}
• 方案三：父容器设置 display:flex right 部分是设置 flex：1
• 方案四：右边 div 套个包裹、并前置、左及包裹 双浮动

39 水平居中，上下居中

• flex:

<div class="parent">
  <div class="children">123</div>
</div>

.parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

• absolute+transform
• absolute+ 负 margin
• absolute+ margin auto
• absolute + clac
• writing-mode
• table
• table-cell
• grid
• lineheight

40 position

• 值：relative，static（默认值），absolute,sticky,fixed
• absolute 会根据上一级 position 的值不为 static 进行定位，如果向上一直没有找到 position,则相对整个 body 进行定位
• fixed 相对的是视图的窗口，或者 frame 框架（setFram 的子框架，一种 html 标签）

41 z-index 属性

• z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺手较低的元素的前面
• position 的值的属性大于 z-index
• z-index 仅能在定位元素上奏效（例如：position：absolute）元素可拥有负的 z-index 属性值

42 圣杯和双飞翼布局、三栏布局（两边两栏宽度固定，中间栏宽度自适应）

• 圣杯布局：a,b,c 三个盒子外面套一层 d 盒子，d 的左右 padding 值是留给 a,c 的宽度；a,b,c 浮动，b 宽度 100%，b 在 d 中的位置就 ok；a 的 margin-left 负 100，就和 b 重叠了，让后相对向左一个宽度的位置就在 d 的 padding 预设位置处了，同理 c 给 margin-right 一个宽度值，然后相对一个左边的位置就在 d 的 paddding 预设位置处了。
• 双飞翼布局：a,b,c 三个盒子，其中 a 盒子外面套了一个 d 盒子，首先 d，b，c 浮动给 d 一个 100%宽度，给 a 一个 paddind 值，左右宽度留给 b,c,中间的位置就是 d，然后 b 中 margin-left 负 100%，b 的位置 ok,c 中 margin-right 一个 padding 宽度 c 的位置也 ok
• flex：a,b,c 三个盒子，a，c 中 flex 一个宽度中间 b 就是剩余的宽度
• calc:a,b,c 三个盒子浮动，a,c 盒子固定宽度，中间盒子宽度 100%减去 a,c 宽度
• box-sizing：bac，b 里面有 d 盒子，b 给 padding 怪异盒子，里面的宽度就是 b,a,c 浮动
• 绝对定位：abc 外面套 d 盒子，a,b,c 固定定位，a,c 固定宽度，b 用 padding 撑开以 ac 宽度为 padding 值

43.伪类

• link:表示连接正常情况下（即页面加载完成时）显示的颜色
• hover：表示鼠标悬停时显示的颜色
• visited：链接被点击时显示的位置
• focus: 元素获得光标焦点时的颜色
• active: 元素处于激活状态
• link --> visited --> hover --> focus --> active

44 使元素消失的方法

• visibility:hidden 该元素隐藏起来了，但是不会改变页面布局，该元素绑定的事件不会被触发
• display:none 把元素隐藏起来了，并且改变页面的布局，可以理解成在页面中把该元素删掉
• z-index:-1
• opacity:0 该元素隐藏起来了，但不会改变页面布局，并且如果该元素已经绑定了一些事件（如 click），该事件也能触发

45 使用 css 实现一个持续的动画效果

animation: mymove 5s infinite;
@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}

46 CSS 中 link 和@import 的区别是

• link 属于 HTML 标签，而@import 是 CSS 提供的;
• 页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
• link 方式的样式的权重 高于@import 的权重.

47 transition 和 ainmation 的区别

• animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，
• 他们的主要区别是 transition 需要触发一个事件才能改变属性；
• 而 animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from...to,而 animation 可以一帧一帧的。
• transition 规定动画的名字 规定完成过渡效果需要多少秒或毫秒 规定速度效果 定义过渡效果何时开始
• animation 指定要绑定到选择器的关键帧的名称

48 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

 <style type="text/css" media="all">
 /* @import "../fouc.css"; */
 </style>

而引用 CSS 文件的@import 就是造成这个问题的罪魁祸首。IE 会先加载整个 HTML 文档的 DOM，然后再去导入外部的 CSS 文件，因此，在页面 DOM 加载完成到 CSS 导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

49 rem 与 em 的区别

rem 是根据根的 font-size 变化，而 em 是根据父级的 font-size 变化

• rem：相对于根元素 html 的 font-size，假如 html 为 font-size：12px，那么，在其当中的 div 设置为 font-size：2rem,就是当中的 div 为 24px
• em：相对于父元素计算，假如某个 p 元素为 font-size:12px,在它内部有个 span 标签，设置 font-size：2em,那么，这时候的 span 字体大小为：12*2=24px