css Interview Questions

# 1. 基础知识类

# 1.1 CSS 的层叠性

为同一个属性指定了不同的值，层叠最终只会选择一个值来渲染元素

当有多个样式规则冲突声明时，会出现层叠性，CSS 会根据 ①来源②优先级③源码顺序 来决定最终起作用的是哪一个样式规则 如上图所示

1. 来源重要性由低到高
   1. 用户代理 （浏览器默认样式）
   2. 作者 （你写的 CSS）
   3. 作者的！important
2. 内联样式 在标签行内声明样式
3. 判断选择器优先级
4. 源码顺序

tips 经验法则建议（不要使用 id 选择器，不要使用！important）

# 1.2 继承性

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值

# 1.2.1 哪些属性可以继承

（1）字体系列属性 font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）文本系列属性 text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color

（3）表格布局属性 caption-side、border-collapse、empty-cells

（4）列表属性 list-style-type、list-style-image、list-style-position、list-style

（5）光标属性 cursor

（6）元素可见性 visibility

（7）还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性

# 1.2.2 line-height 的继承

三种继承的情况

1. 具体数值 【继承具体数值】
2. 比例 【继承比例】
3. 百分比 【继承计算过的具体数值】

# 1.2.3 不可继承的样式属性

不可继承的样式属性： border, padding, margin, width, height；

# 1.2.4 不可以继承的元素怎么办

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。

使用 inherit 关键字可以强制继承一个通常不会被继承的属性 使用 initial 关键字卡可以将某个属性重制成属性的默认初始值注意与 auto 的区别

# 1.3 选择器相关

# 1.3.1 常用选择器

（1）id 选择器（#myid） （2）类选择器（.myclassname） （3）标签选择器（div,h1,p） （4）后代选择器（h1 p） （5）相邻后代选择器（子）选择器（ul>li） （6）兄弟选择器（li~a） （7）相邻兄弟选择器（li+a） （8）属性选择器（a [rel=“external”]） （9）伪类选择器（a:hover,li:nth-child） （10）伪元素选择器（::before、::after） （11）通配符选择器（*）

# 1.3.2 选择器优先级

ID 选择器，类选择器，标签名

# 1.3.3 伪类选择器与伪元素选择器

在 css3 中使用单冒号来表示伪类，用双冒号来表示伪元素。 但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如 hover、link 等，而伪元素一般匹配的特殊的位置，比如 after、before 等。

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。 也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

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

# 1.3.4 关于伪类 LVHA 的解释

就是因为层叠性，选择器优先级都一样，最终就是按照书写位置决定样式，后书写的会覆盖前书写的

a 标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类 :link、:visited、:hover、:active；

当链接未访问过时： （1）当鼠标滑过 a 链接时，满足:link 和:hover 两种状态，要改变 a 标签的颜色，就必须将:hover 伪类在:link 伪类后面声明； （2）当鼠标点击激活 a 链接时，同时满足:link、:hover、:active 三种状态，要显示 a 标签激活时的样式（:active），必须将:active 声明放到:link 和:hover 之后。 因此得出 LVHA 这个顺序。

当链接访问过时，情况基本同上，只不过需要将:link 换成:visited。

# 1.3.5 LVHA 这个顺序能不能变？

可以，但也只有:link 和:visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

# 1.4 块级元素行内元素

块级元素 display:block/table; 有 div h1 h2 table ul ol p 等 display: inline/inline-block; 有 span img input button 等

• block ：块级元素，前后都有换行符，可设置 width 和 height，padding 和 margin 水平垂直方向均有效
• inline ：内联元素，前后无换行符，在一排排列，不可设置 width 和 height，垂直方向上 padding 和 margin 失效
• inline-block ：内联块级元素，可设置 width 和 height，padding 和 margin 水平垂直方向均有效，前后无换行符

# 1.5 什么是盒子模型

【CSS】盒子模型 - 边框 - 内外边距 - 外边距合并 - 清除内外边距 - 圆角边框 - 盒子阴影 - 文字阴影

盒模型分为两种 IE 盒模型（border-box）、W3C 标准盒模型（content-box）

标准盒子模型： width=content 盒子宽度 = width+padding+border

IE 盒子模型： width=content+padding+border 盒子宽度 = width

# 1.6 对 line-height 是如何理解的？

line-height 指的是一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离。 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的。 一个容器没有设置高度，那么撑开容器的高度的是 line-height, 而不是容器内部的文字内容。 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中。 line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会。

# 1.7 为什么 img 是 inline 还可以设置宽高

img 属于替换元素，替换元素一般有内在尺寸和宽高比，所以具有 width 和 height，可设定

HTML 中的替换元素：img、input、textarea、select

# 1.8 什么是浮动？用处 清除浮动

【CSS】浮动 float - 清除浮动 - 标准流 - 浮动布局

# 1.9 什么是定位？用处

【CSS】定位–静态定位 - 相对定位 - 绝对定位 - 子绝父相 - 固定定位 - 粘性定位

# 1.10 display 有哪些值？说明他们的作用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none 元素不显示，并从文档流中移除。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承 display 属性的值。 grid 定义一个容器属性为网格布局 flex 定义一个弹性布局

# 1.11 负外边距

# 1.12 BFC

# 定义

块级格式化上下文（block formatting context,BFC)

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

# 触发方式 / 哪些元素会生成 BFC

1. 根元素，即 HTML 标签
2. 浮动元素：float 值为 left 或 right
3. 定位元素：position 为 fixed 或 absolute 的元素
4. overflow 值不为 visible，为 auto、scroll、hidden 的元素
5. display 值为 inline-block、table-cell、table-caption、flex、inline-flex 的元素

# 约束规则

1. 内部的 box 会在垂直方向上一个接一个放置
2. 内部的 box 垂直方向上的距离由 margin 决定
3. 每个元素的左外边距与包含块的左边界相接触，即使浮动元素也如此
4. BFC 的区域不会与 float 的元素区域重叠
5. 计算 BFC 高度时，浮动元素也参与计算

# 作用

1. 阻止元素被浮动元素覆盖
2. 可用来清除浮动带来的外边距塌陷问题
3. 阻止因浏览器四舍五入造成的多列布局换行的情况
4. 阻止相邻元素 margin 合并（防止外边距折叠）
5. 可以用来自适应两栏布局

# 1.13 隐藏页面中某个元素的方法？

1. opacity=0；
2. visibility=hidden；
3. display：none；
4. position 移到外部；
5. z-index 图层遮盖

# visibility=hidden, opacity=0, display:none 区别

• opacity=0; 元素透明度为 0，该元素被隐藏起来，但不会改变页面布局，如果该元素已经绑定一些事件，仍能触发
• visibility=hidden; 元素不可见但仍然存在，不会改变页面布局，但不会触发该元素已经绑定的事件
• display:none; 元素不显示并且会改变页面布局，可理解为该元素从页面中被删除

从占据空间角度看： display: none; 会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden; 不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见；

从继承方面角度看： display: none; 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility:hidden; 是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible; 可以让子孙节点显式；

从重绘和重排角度看： 修改常规流中元素的 display 通常会造成文档重排。 修改 visibility 属性只会造成本元素的重绘

读屏器不会读取 display: none; 元素内容；会读取 visibility: hidden 元素内容

# 1.14 什么是外边距重叠？ 重叠的结果是什么？

首先，外边距重叠就是 margin-collapse。相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。 折叠结果遵循下列计算原则：

两个相邻的外面边距是正数时，折叠结果就是他们之中的较大值； 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值； 两个外边距一正一负时，折叠结果是两者的相加的和；

毗邻的两个或多个 margin 会合并成一个 margin，叫做外边距折叠。规则如下： 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠； 浮动元素或 inline-block 元素或绝对定位元素的 margin 不会和垂直方向上的其他元素的 margin 折叠； 创建了块级格式化上下文的元素，不会和它的子元素发生 margin 折叠； 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠；

# 2. CSS3 新特性

# 2.1 CSS3 有哪些新特性？

新增各种 CSS 选择器 （:not (.input)：所有 class 不是 “input” 的节点） 圆角 （border-radius:8px） 多列布局 （multi-columnlayout） 阴影和反射 （Shadow\Reflect） 文字特效 （text-shadow） 文字渲染 （Text-decoration） 线性渐变 （gradient） 旋转 （transform） 缩放，定位，倾斜，动画，多背景 媒体查询（@media）; RGBA 和透明度；@font-face 属性；多背景图；盒子大小；语音；CSS3 2D 转换：transform: translate ()、rotate ()、scale () CSS3 3D 转换：transform: rotateX ()、rotateY () CSS3 过渡：transition CSS3 动画：animation

# 2.2 transition 有哪些属性？

transition-property：指定过渡的属性值 transition-delay：指定延迟过渡时间 transition-duration：指定过渡持续时间 transition-timing-function：指定过渡动画缓动类型（ease-out / 快 - 慢、ease-in / 慢 - 快、ease-in-out / 慢 - 快 - 慢、liner 线性过渡、cubic-bezier 贝塞尔曲线等）

# 2.3 新增伪类

（1）elem:nth-child (n) 选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n 可以接受具体的数 值，也可以接受函数。

（2）elem:nth-last-child (n) 作用同上，不过是从后开始查找。

（3）elem:last-child 选中最后一个子元素。

（4）elem:only-child 如果 elem 是父元素下唯一的子元素，则选中之。

（5）elem:nth-of-type (n) 选中父元素下第 n 个 elem 类型元素，n 可以接受具体的数值，也可以接受函数。

（6）elem:first-of-type 选中父元素下第一个 elem 类型元素。

（7）elem:last-of-type 选中父元素下最后一个 elem 类型元素。

（8）elem:only-of-type 如果父元素下的子元素只有一个 elem 类型元素，则选中该元素。

（9）elem:empty 选中不包含子元素和内容的 elem 类型元素。

（10）elem:target 选择当前活动的 elem 元素。

（11）:not (elem) 选择非 elem 元素的每个元素。

（12）:enabled 控制表单控件的禁用状态。

（13）:disabled 控制表单控件的禁用状态。

(14):checked 单选框或复选框被选中。

# 2.4 flex

Flex 布局教程：语法篇 - 阮一峰的网络日志

概念： Flex 是 Flexible Box 的缩写，意为” 弹性布局”，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称” 容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称” 项目”。

# 2.5 网格布局 grid

CSS Grid 网格布局教程 - 阮一峰的网络日志

# 2.6 grid 布局和 flex 布局的区别

flex 布局是轴线布局，只能指定 items 针对轴线的位置，可以看作是一维布局；grid 布局则是将容器划分为行和列，产生单元格，然后指定 items 所在的单元格，可以看作是二维布局。

# 2.7 box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果；
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果；
box-sizing: inherit; // 继承父元素 box-sizing 属性的值；

# 2.7 rgba () 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度；

rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果；

# 2.8 响应式 em 与 rem

• px 绝对长度单位，最常用
• em 相对长度单位，相对于【父元素】，不常用
• rem 相对长度单位，相对于【html 根元素】，常用于响应式布局

在 html 设置 font-size，其他元素可以继承，使用 rem 单位

# 2.9 响应式 media query 媒体查询

通过使用 media query + rem 来实现移动端的响应式布局

@media only screen and (max-width: 374px) {
/* iPhone5或更小 */
html {
	font-size: 86px;
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iPhone6/7/8/X */
html {
	font-size: 100px;
}
@media only screen and (min-width: 414px) {
/* iPhone6p或更大 */
html {
	font-size: 110px;
}

# 2.10 视口与 vm、vh

rem 的弊端：“阶梯” 性

网页视口尺寸

window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度 （浏览器可视区域）
document.body.clientHeight // body 高度

• vm 相对于视口宽度的 1%
• vh 相对于视口高度的 1%

视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。

# 3. 实际应用类

# 3.1 如何让盒子垂直居中

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

对于宽高固定的元素

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

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

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

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

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

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

主要记住这两种 定位 or flex 具体可以参考 YK 菌之前的博文【CSS】实现盒子居中对齐的七种方法

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

采用的是相邻边框连接处的均分原理。
将元素的宽高设为 0，只设置 border ，把任意三条边隐藏掉（颜色设为 transparent），剩下的就是一个三角形。

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

# 3.3 一个满屏品字布局如何设计？

简单的方式： 上面的 div 宽 100%， 下面的两个 div 分别宽 50%， 然后用 float 或者 inline 使其不换行即可

.content {
    width: 50%;
    height: 150px;
    margin: 0 auto;
}
.top {
    width: 40%;
    height: 50px;
    background-color: pink;
    margin-bottom: 50px;
    margin-left: 30%;
}
.left {
    width: 45%;
    height: 50px;
    background-color: pink;
    float: left;
}
.right {
    width: 45%;
    height: 50px;
    background-color: pink;
    float: right;
}

<div class="content">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>>

# 3.4 CSS 多列等高如何实现？

（1）利用 padding-bottom|margin-bottom 正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow: hidden），这样父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，当它里面的任一列高度增加了，则 父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的 padding-bottom 补偿这部分高度差。

（2）利用 table-cell 所有单元格高度都相等的特性，来实现多列等高。

（3）利用 flex 布局中项目 align-items 属性默认为 stretch，如果项目未设置高度或设为 auto，将占满整个容器的高度的特性，来实现多列等高。

# 3.5 三种文档流

# 普通流

普通文档流 指的是网页元素的默认布局行为。行内元素跟随文字的方向从左到右排列，当到达容器边缘时会换行。块级元素会占据完整的一行，前后都有换行

普通流中，盒子一个接着一个排列 块级格式化上下文里，盒子竖着排列；行内格式化上下文中，盒子横着排列 当 position 为 static 或 relative，并且 float 为 none 时会触发普通流 position：static，盒的位置是常规流布局里的位置 position：relative，盒偏移位置由 top、bottom、left、right 属性定义。即使有偏移，仍然保留原有位置，其他常规流不能占用这个位置

# 定位流

盒从常规流中被移除，不影响常规流的布局 当 position 为 fixed 或 absolute 时为绝对定位元素 position：absolute，元素定位将相对于上级元素中最近的一个 relative、fixed、absolute，如果没有则相对于 body

# 浮动流

左浮动元素尽量靠左靠上，右浮动同理 除非设置 clear，否则普通流环绕在其周围 浮动元素不影响块级元素的布局，但会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局 浮动元素最高点不超过当前行的最高点和其前面的浮动元素的最高点；不超过它的包含块，除非元素本身已经比包含块更宽 行内元素只出现在左浮动元素的右边或右浮动元素的左边

# 3.6 页面布局方式

方式	布局特点	设计方法	缺点
静态布局（Static Layout）	无论浏览器尺寸具体多少，网页布局始终按照最初写代码时的布局来实现	居中布局，所有样式使用绝对宽度和高度 px；屏幕宽高调整时通过滚动条来浏览被遮掩部分	不能根据用户的屏幕尺寸做出不同表现
流式布局（Liquid Layout）	屏幕分辨率变化时，页面内元素的大小会变化而布局不变；屏幕太大或太小都会导致元素无法正常显示	使用 % 定义宽度，px 定义高度，配合 max-width/min-width 控制尺寸流动范围以免过大或过小影响阅读	如果屏幕尺寸跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示
自适应布局（Adaptive Layout）	屏幕分辨率变化时，页面内元素的位置会变化而大小不会变化	创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，屏幕分辨率改变时，切换不同的静态布局（通过 @media 媒体查询给不同尺寸的设备切换不同样式）	需要需要为不同的设备开发不同的页面，增加开发成本；当需求改变时可能会改动多套代码，流程繁琐。
响应式布局（Responsive Layout）	每个屏幕分辨率下会有一个布局样式，即屏幕分辨率变化时，元素位置和大小都会变	@media 媒体查询 + 流式布局	媒体查询是有限的，只能适应主流媒体的宽高
弹性布局（rem/em 布局）	包裹文字的各元素的尺寸采用 rem/em 做单位（em 相对其父元素，rem 始终相对 html 大小，即页面根元素），页面主要划分区域的尺寸仍使用百分数或 px	一般使用 rem，根据屏幕大小来控制 html 元素的 font-size，即可自动改变所有用 rem 定义尺寸的元素的大小	只做到了宽度自适应，无法满足一些对高度或者元素间距要求较高的设计

# 流式布局 VS 响应式布局

流式布局用于解决类似的设备不同分辨率之间的兼容（分辨率差异较小）；响应式布局用于解决不同设备之间不同分辨率的兼容（分辨率差异较大）

# 自适应布局 VS 响应式布局

共同点：检测设备，根据不同设备采用不同 CSS，且 CSS 都采用百分比确定宽度

区别：响应式布局在不同设备上看上去是不一样的，会随着设备的改变而改变展示样式；自适应布局在所有的设备上看上去是一样的模板，不过是长度或者图片变小了

# 3.7 CSS 预处理器 / 后处理器是什么？为什么要使用它们？

预处理器，如：less，sass，stylus, 用来预编译 sass 或者 less，增加了 css 代码的复用性，还有层级，mixin， 变量，循环， 函数等，对编写以及开发 UI 组件都极为方便。

后处理器， 如： postCss, 通常被视为在完成的样式表中根据 css 规范处理 css，让其更加有效。目前最常做的是给 css 属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

结构清晰， 便于扩展 可以很方便的屏蔽浏览器私有语法的差异 可以轻松实现多重继承 完美的兼容了 CSS 代码，可以应用到老项目中

# 3.8 link 与 @import 的区别？

link 是 HTML 方式， @import 是 CSS 方式； link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC； link 可以通过 rel=“alternate stylesheet” 指定候选样式； 浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式； @import 必须在样式规则之前，可以在 css 文件中引用其他文件；

总的来说： link 优于 @import

# 3.9 css sprites 是什么？如何使用？

css 精灵图，把一堆小的图片整合到一张大的图片（png）上，利用 CSS 的 “background-image”，“background- repeat”``，“background-position” 的组合进行背景定位 background-position 可以用数字能精确的定位出背景图片的位置，减轻服务器对图片的请求数量。

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

一般情况下，页面加载时自上而下的。将 style 标签至于 body 之前，为的是先加载样式。 若是写在 body 标签之后，由于浏览器以逐行方式对 html 文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（页面闪烁）。

# 3.11 圣杯局部

两侧内容宽度固定，中间内容宽度自适应 三栏布局，中间一栏最先加载、渲染出来（主要内容）

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    header {
      background-color: pink;
    }

    .main {
      width: 100%;
      float: left;
      background-color: skyblue;
    }

    .center {
      margin: 0 100px 0 100px;
    }

    .left {
      width: 100px;
      background-color: green;
      float: left;
      margin-left: -100%;
    }

    .right {
      width: 100px;
      background-color: red;
      float: left;
      margin-left: -100px;
    }

    footer {
      background-color: pink;
      clear: both
    }
  </style>
</head>

<body>
  <header>头部</header>
  <div class="main">
    <div class="center">主区域</div>
  </div>
  <div class="left">左区域</div>
  <div class="right">右区域</div>
  <footer>底部</footer>
</body>

</html>

# 3.12 双飞翼布局

两侧内容宽度固定，中间内容宽度自适应 三栏布局，中间一栏最先加载、渲染出来（主要内容）

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    header {
      background-color: pink;
    }

    .wrapper{
      width: 100%;
      float: left;
    }

    .center {
      width: 100%;
      background-color: skyblue;
      float: left;
      margin: 0 100px;
    }

    .left {
      width: 100px;
      background-color: green;
      float: left;
      margin-left: -100%;
    }

    .right {
      width: 100px;
      background-color: red;
      float: left;
      margin-left: -100px;
    }

    footer {
      background-color: pink;
      clear: both
    }
  </style>
</head>

<body>
  <header>头部</header>
  <div class="wrapper">
    <div class="center">主区域</div>
  </div>
  <div class="left">左区域</div>
  <div class="right">右区域</div>
  <footer>底部</footer>
</body>

</html>

# 4. 一些相关问题

# 4.1 简单介绍使用图片 base64 编码的优点和缺点。

base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性。

使用 base64 的优点是：

（1）减少一个图片的 HTTP 请求

使用 base64 的缺点是：

（1）根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体 积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。

（2）使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件，比如 HTML 或者 CSS，这相比域直接缓存图片的效果要 差很多。

（3）兼容性的问题，ie8 以前的浏览器不支持。

一般一些网站的小图标可以使用 base64 图片来引入。

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

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