CSS 面试题（必备）

前言

由于自己最近在找实习工作，看了网上很多面试题，也就是看了，在真正的面试过程中还是回答不出来，所以就决定自己整理一遍，加深点印象。

这系列文章主要参考了CUGGZ大佬的专栏（2021最新前端面试题汇总）👏，与他不同的是，我是通过知识点重要程度来划分的。在回答某些问题时，会先根据自己的思考来回答，如有不全面的地方我就会去参考CUGGZ大佬的回答。

欢迎掘友们过来浅读一下，如发现错别字和描述不得当的地方，望掘友们评论区指正！🙏🙏🙏

整理进度

• 👋 前端面试题系列文章CSS篇（必备)
  
• 👋 前端面试题系列文章CSS篇（掌握)
  
• 👋 前端面试题系列文章CSS篇（理解）
  
• 👋 前端面试题系列文章CSS篇（了解）

1.CSS选择器及其优先级

1.1 选择器权重表及注意事项

选择器	格式	权重
id选择器	#id	0 1 0 0
类选择器	.className	0 0 1 0
属性选择器	[attr=val]	0 0 1 0
伪类选择器	selector:pseudo-class	0 0 1 0
元素选择器	elementName	0 0 0 1
伪元素选择器	selector:pseudo-element	0 0 0 1
通配符选择器	*	0 0 0 0

如表所示：id选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器 > 通配符选择器

注意：

• !important声明与优先级无关，但它会将任何其他声明覆盖掉。强烈建议除了非常情况不要使用它。 权重：10000
• 权重相同时，后面设置的样式生效
• 继承过来的样式没有优先级
• 通用选择器（*）、关系选择符（+、>、~、' '）不会影响优先级
• 样式表来源不同时，内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

1.2 后代选择器 - ' '(使用空格符)

直接/间接的后代样式均会生效

<style>
    .box span {
        color: red;
    }
</style>

<div class="box">
    <div>
        <span>哈哈哈</span>
    </div>
</div>

<div class="box">
    <span>呵呵呵</span>
</div>

<!-- 哈哈哈 呵呵呵 均会变红 -->

1.3 子选择器 - >(使用大于符号)

只有直接子代样式才会生效

<style>
    .box > span {
        color: red;
    }
</style>

<div class="box">
    <div>
        <span>哈哈哈</span>
    </div>
</div>

<div class="box">
    <span>呵呵呵</span>
</div>

<!-- 呵呵呵 会变红 -->

1.4 相邻兄弟选择器 - +(使用加号)

选择与自己最近的一个兄弟元素

<style>
    .box + div {
        color: red;
    }
</style>

<div class="box">哈哈哈</div>
<div>呵呵呵</div>
<div>嘿嘿嘿</div>
<div>嘻嘻嘻</div>

<!-- 呵呵呵 会变红 -->

1.5 通用兄弟选择器 - ~(使用波浪号)

选择所有兄弟元素

<style>
    .box ~ div {
        color: red;
    }
</style>

<div class="box">哈哈哈</div>
<div>呵呵呵</div>
<div>嘿嘿嘿</div>
<div>嘻嘻嘻</div>

<!-- 呵呵呵 嘿嘿嘿 嘻嘻嘻 均会变红 -->

1.6 '~'与'+'选择器有什么不同

• ~ 是匹配元素之后的选择器
• + 是匹配相邻元素的选择器

1.7 交集选择器 - 两个选择器紧密连接

为了精准找到某一个元素

<style>
    div.box {
        color: red;
    }
</style>

<div class="box">哈哈哈</div>
<div>呵呵呵</div>
<p class="box">嘻嘻嘻</p>

<!-- 哈哈哈 会变红 -->

1.8 并集选择器 - ,(使用逗号)

为了给多个元素设置相同的样式

<style>
    .one, .two {
        color: red;
    }
</style>

<div class="one">哈哈哈</div>
<p class="two">嘻嘻嘻</p>

<!-- 哈哈哈 嘻嘻嘻 均会变红 -->

2.display的常见属性值及其作用

属性值	作用
block	生成一个块级元素盒。默认宽度为父元素宽度，高度由内容撑开，独占一行，可以设置宽高
inline	生成一个或多个内联元素盒。宽度和高度由内容决定，同行显示，不可以设置宽高
inline-block	生成块级元素盒，但它与block的区别在于，可以和行内元素在同行显示。宽度和高度由内容决定，可以设置宽高
none	使元素不再显示，不会占据任何空间，并且从文档流中移除
flex	类似块级元素并且根据弹性盒模型布局它的内容
grid	类似块级元素并且根据网格模型布局它的内容
table	该元素的行为类似于 HTML 中的<table>元素，也是一个块级别的盒子
inherit	规定从父元素继承display属性值
list-item	像块级元素一样显示，并添加样式列表标记，单独值将导致元素的行为类似与一个列表元素

其它属性值请👉查阅MDN

3.display的block、inline和inline-block的区别

• block
  • 独占一行
  • 默认宽度为父元素宽度，高度由内容决定
  • 可以设置width、height、padding和margin等属性
• inline
  • 和其它行内级元素在同一行
  • 默认宽高由内容决定
  • 不可以设置宽高，可以设置水平方向的padding和margin属性
• inline-block
  • 和其它行内级元素在同一行
  • 默认宽高由内容决定
  • 可以设置width、height、padding和margin等属性
  • 可以这样理解
    • 对外来说，它是一个行内级元素
    • 对内来说，它是一个块级元素

对于行内元素和块级元素，其特点如下：

1. 行内元素
   1. 设置宽高无效
   2. 不会自动换行
2. 块级元素
   1. 可以设置宽高
   2. 会自动换行
   3. 默认排列从上到下

4.隐藏元素的方法有哪些

• display: none;: 渲染树不会包含该渲染对象，元素不显示出来，并且不占据任何空间，也不会响应绑定的监听事件。
• visibility: hidden;: 虽然元素看不见，但是会占据元素应该占据的空间，也不会响应绑定的监听事件。
• opacity: 0;: 设置整个元素的透明度，会影响所有的子元素。会占据元素应该占据的空间，并且能够响应元素绑定的监听事件。
• rgba设置颜色，将a设置为0: 也是设置透明度，不会影响子元素。
• position: absolute;: 通过绝对定位将元素移除可视区域内，以此来隐藏元素。
• z-index: 负值: 通过其他元素来将此元素遮盖住，以此来隐藏元素。
• transform: scale(0, 0);: 将元素缩放为0，来实现元素的隐藏。元素仍占据该占据的位置，不会响应绑定的监听事件。

5.display:none与visibility:hidden的区别

1. 是否移除渲染树
   • display: none;: 元素完全从渲染树中消失，渲染时不会占据任何空间。
   • visibility: hidden;: 元素不会从渲染树中消失，渲染的元素还是会占据相应的空间，只是内容不可见。
2. 是否是继承属性
   • display: none;: 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。
   • visibility: hidden;: 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。
3. 修改常规文档流中元素的 display 会造成文档的重排；修改 visibility 属性只会造成本元素的重绘。
4. 如果使用读屏器，display: none;的内容不会被读取；visibility: hidden;的内容会被读取。

6.对盒模型的理解

盒子模型包含四个部分，分别是:

• 内容（content），元素内容的width/height
• 内边距（padding），元素与内容之间的间距
• 边框（border），元素自己的边框
• 外边距（margin），元素与其它元素之间的间距

以前的CSS2.1的时候只有content-box，也就是标准盒子模型，box-sizing的默认值。content-box表示的是元素的宽度和高度就是内容宽度和高度。

现在的CSS3中新增了一个盒子模型border-box，也就是IE盒子模型，又称为怪异盒子模型。border-box表示的是元素的宽度和高度是除去元素外边距的宽度和高度。它的计算公式：

1. width = border + padding + 内容宽度
2. height = border + padding + 内容高度

在CSS中可以通过box-sizing来设置盒子模型中宽高的表现行为。

7.CSS3有哪些特性

• 新增很多好用的选择器（比如：结构伪类选择器，:not()）
• 圆角边框（border-radius）
• 盒子阴影（box-shadow）
• 盒子倒影（box-reflect）
• 文字阴影（text-shadow）
• 渐变（gradient）
• 多列布局（column-count）
• 转换（transform），包括 旋转、倾斜、位移、缩放
• 过渡效果（transition）
• 关键帧动画（@keyframes）
• 媒体查询（@media）

8.单行、多行文本溢出隐藏，并考虑兼容性

• 单行文本溢出

overflow: hidden;         // 溢出隐藏
text-overflow: ellipsis;  // 溢出部分用省略号显示
white-space: nowrap;      // 规定段落中的文本不进行换行

• 多行文本溢出

overflow: hidden;              // 溢出隐藏
text-overflow: ellipsis;       // 溢出部分用省略号表示
display: -webkit-box;          // 作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;  // 设置伸缩盒子的子元素排列方式，从上到下垂直排列
-webkit-line-clamp: 3;         // 显示的行数

• 考虑兼容

p {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}

/* 使用伪元素 */
p::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%); 
    background: -o-linear-gradient(right, transparent, #fff 55%); 
    background: -moz-linear-gradient(right, transparent, #fff 55%); 
    background: linear-gradient(to right, transparent, #fff 55%);
}

9.对flex布局的理解及其使用场景

flex布局就是使用Flexbox来进行布局的方案。Flexbox是Flexible Box的缩写，译为“弹性盒子”。弹性盒子是一种用于按行或按列布局元素的一维布局方法，它里面的元素可以膨胀以填充额外的空间，收缩以适应更小的空间。在页面中，任何一个容器都可以指定为flex布局。

注意：当元素设为flex布局以后，子元素的float、clear和vertical-align属性将会失效。

从以上模型中可以发现，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），在flex容器中，flex item默认沿着水平的主轴排列，也就是从 main start -> main end。

下面是对应用在flex container 和 flex item 上的属性介绍。
应用在 flex container 上的CSS属性:

• flex-flow: 是flex-direction和flex-wrap的简写，默认是row nowrap
• flex-direction: 决定了主轴（main axis）的方向，有4个取值，分别是：row默认值、row-reverse、column、column-reverse
• flex-wrap: 决定了flex容器是单行还是多行，有3个取值，分别是：nowrap默认值、wrap多行、wrap-reverse
• justify-content: 决定了 flex items 在主轴上的对齐方式，有6个值，分别是：
  • flex-start 默认值，与 main start 对齐
  • flex-end 与 main end 对齐
  • center 居中对齐
  • space-between flex items 之间的距离相等，与 main start 和 main end 两端对齐
  • space-around flex items 之间的距离相等，两端的 flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
  • space-evenly flex items 之间的距离相等，与 main start 和 main end 之间的距离等于 flex items 之间的距离
• align-items: 决定了 flex items 在交叉轴（cross axis）上的对齐方式，有6个值，分别是：
  • normal 在弹性布局中，效果和stretch一样
  • stretch 当 flex items 在交叉轴方向的 size 为 auto 时，会自动拉伸至填充 flex container
  • flex-start 与 cross start 对齐
  • flex-end 与 cross end 对齐
  • center 居中对齐
  • baseline 与基准线对齐
• align-content: 决定了多行 flex items 在交叉轴上的对齐方式，用法与 justify-content 类似

应用在 flex item 上的CSS属性:

• flex-grow: 决定了 flex items 如何扩展（拉伸），可以设置任意非负数字，默认值为0，flex container 在主轴上有剩余 size 时，flex-grow 属性才会生效。注意：flex items 扩展后的最终 size 不能超过 max-width\max-height
• flex-basis: 用来设置 flex items 在主轴上的 base size，默认值为 auto
• flex-shrink: 决定了 flex items 如何收缩，默认值为1，与flex-grow刚好相反
• order: 决定了 flex items 的排布顺序，可以设置任意整数，值越小越排在前面，默认值为 0
• align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
• flex: 是flex-grow | flex-shrink | flex-basis 的简写，默认值为0 1 auto, 可以指定1个、2个、3个值

flex布局中两个重要概念:

• 开启了flex布局的元素叫 flex container（flex 容器）
• flex container 里面的子元素叫 flex item（flex 项目）

flex item具备以下特点：

• 默认情况下是包裹内容的，但是可以设置宽高
• 布局将受到 flex container属性的设置来进行控制和布局
• 不再严格区分块级元素和行内级元素

10.为什么需要清除浮动？清除浮动的方式

浮动最初是用于在一段文本内浮动图像，实现文字环绕效果。但是早期的CSS标准中没有提供好的左右布局方案，因此在一段时间里浮动成为了网页多列布局最常用的工具。

因为浮动不是标准的布局方案，所以使用它来布局界面就会出现一系列的问题。一旦元素设置了浮动，就会让其脱离标准流，引起高度塌陷问题。对高度塌陷的理解：由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度。

浮动元素引起的问题：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会层叠在浮动元素下面
• 若浮动元素不是第一个元素，则该元素之前的元素也需要浮动，否则会影响页面的显示结构

清除浮动就是为了让父元素在计算总高度的时候，把浮动子元素的高度算进去。

清除浮动的方式：

1. 给父元素设置固定高度（扩展性不好，不推荐）
2. 在父元素最后增加一个空的块级子元素，并且让它设置clear: both;（①会增加很无多意义的空标签，维护麻烦；②违反了结构和样式分离的原则。不推荐）
3. 包含浮动元素的父级标签天加overflow: hidden;或者overflow: auto;
4. 给父元素添加一个伪元素（推荐），代码如下:

/* 定义一个公共的CSS样式 */
.clear-fix::after {
    content: "";
    display: block;
    clear: both;

    visibility: hidden;   /* 浏览器兼容性 */
    height: 0;            /* 浏览器兼容性 */
}

.clear-fix {
    *zoom: 1;            /* 兼容IE6/7，触发 hasLayout */
}

11.对BFC的理解，如何创建BFC

块格式化上下文（Block Formatting Context，BFC）是页面的一块渲染区域并且有一套渲染规则，决定了子元素如何定位以及与其它元素之间的排列布局之间的关系。

BFC是一个独立的布局环境，相当于是一个容器，在其中按照一定的规则对块级元素进行摆放，并且不会影响其它布局环境中的盒子。如果一个元素触发BFC，则BFC中的元素布局不受外界的影响。注意：块级元素在标准流中的布局是属于BFC的

创建BFC的条件：

• 根元素: body/:root
• float: left/right
• position: absolute/fixed
• overflow: 除了visible
• display: inline-block/table-cell/table-caption/flex/grid...

BFC的特点：

• 垂直方向上，自上而下排布
• 垂直方向的间距由margin决定
• 同一个BFC中上下相邻的盒子的margin会折叠
• BFC中每个元素的左边缘紧挨着包含块的左边缘
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC内部不会影响外部元素
• BFC区域不会与浮动的元素发生重叠

BFC的作用：

• 解决margin重叠问题
• 解决高度塌陷问题，前提是浮动的父级BFC高度为auto
• 创建自适应两栏布局，左边浮动，右边overflow: hidden;

12.position的属性有哪些，区别是什么

属性值	含义
static(默认值)	元素按照normal flow（标准流）布局。此时top、right、bottom、left、和z-index属性无效，块级元素从上往下排布，行内级元素从左往右排布
relative(相对定位)	元素按照normal flow布局，可以通过top、right、bottom、left进行定位，定位参照对象是元素自己原来的位置，应用场景：在不影响其它元素位置的前提下，对当前元素位置进行微调
absolute(绝对定位)	元素脱离normal flow（脱离标准流），可以通过top、right、bottom、left进行定位，定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口
fixed(固定定位)	元素脱离normal flow，可以通过top、right、bottom、left进行定位，定位参照对象是视口，特点：当画布滚动时，固定不动
sticky(粘性定位)	元素按照normal flow布局，可以看作是相对定位和固定（决定）定位的结合体。它允许被定位的元素表现的像相对定位一样，直到滚动到某个阈值点，当达到这个阈值点时，就会变成固定（绝对定位）。sticky是相对于最近滚动祖先包含滚动视口的
inherit	规定从父元素继承 position 属性的值

relative、absolute、fixed三者之间的区别：

• absolute/fixed会脱离标准流，relative不会
• absolute参照对象是最邻近的定位祖先元素，如果找不到，参照对象是视口；fixed参照对象是视口；relative参照的是元素原来的位置

13.如何解决移动端 Retina 屏1px问题？

移动端1px问题指的是：开发人员在开发过程中指定了border: 1px;，测试会发现在 Retina 屏上，1px会变粗。原因很简单——CSS中的 1px 不能和移动设备上的 1px 划等号。它们之间的比例关联有一个专门的属性来描述：

window.devicePixelRatio = 设备的物理像素 / CSS像素

以 iphone6 为例，iphone6 的屏幕宽度为 375px，设计师做的视觉稿一般是 750px，也就是 2x，这个时候设计师在视觉稿上画了 1px 边框，于是你就写了border: 1px;。这样问题就产生了，设计师的1px是相对于物理像素，而你的1px是相对于CSS像素。我们应该设置borde: 0.5px;才对。

1px问题的解决方案：

• 0.5px

优点：简单，没有副作用
缺点：支持 iOS8+，安卓带兼容

.border-1px {
    border: 1px solid #999;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px {
        border: 0.5px solid #999;
    }
}

/* dpr=2 和 dpr=3 情况下 border 相差无几，下面代码可以省略 */
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-1px {
        border: 0.333333px solid #999;
    }
}

但在 IOS7 及以下和 Android 等其它系统里，0.5px 将会被显示为 0px。所以我们需要通过JS检测浏览器能否处理 0.5px 的边框

if (window.devicePixelRatio && devicePixelRatio >= 2) {
    let testElem = document.createElement('div')
    testElem.style.border = '0.5px solid transparent'
    document.body.appendChild(testElem)
}

if (testElem.offsetHeight == 1) {
    document.querySelector('html').classList.add('hairlines')
} else {
    document.body.removeChild(testElem)
}

• viewport + rem

缺点：

• 通过JS对文档进行修改，所以性能上有一定影响
• 会对项目中所有使用rem单位的对象进行影响。如果是老项目，则会全部更改CSS样式（不适合老项目改造）

通过设置缩放，让CSS像素等于真正的物理像素

const scale = 1 / window.devicePixelRatio;
const viewport = document.querySelector('meta[name="viewport"]')
if (!viewport) {
    viewport = document.createElement('meta')
    viewport.setAttribute('name', 'viewport')
    window.document.head.appendChild(viewport)
}

viewport.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minium-scale=${scale}`)

// 设置根字体大小
let docEl = document.documentElement
let fontSize = 10 * (docEl.clientWidth / 320) + 'px'
docEl.style.fontSize = fontSize

// 在CSS中使用rem单位就行了

• 伪元素 + transform（推荐）

注意：如果需要满足圆角，需要给伪类也加上border-radius
优点：兼容性好，无副作用

为什么用伪元素？因为伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放 基于media查询判断不同的设备像素比，对线条进行缩放

.border-1px::before {
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #999;
    transform-origin: 50% 0%;
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .border-1px::before {
        transform: scaleY(0.5);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
    .border-1px::before {
        transform: scaleY(0.33);
    }
}

• svg（推荐）

优点：实现简单，可以实现圆角
缺点：需要学习svg语法

因为svg是矢量图形，它的1px对应的物理像素就是1px 可以搭配PostCSS和postcss-write-svg使用

@svg border-1px {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}

.svg {
    border: 1px solid transparent;
    border-image: svg(border-1px param(--color #00b1ff)) 2 2 stretch;
}

14.代码实现题

14.1 两栏布局

两栏布局一般指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

• flex布局实现（推荐），在父元素中使用flex布局，左边元素设置固定宽度200px，右边元素设置为flex: 1

<style>
.main {
    display: flex;
    height: 500px;
}
.left {
    width: 200px;
    background-color: red;
}
.right {
    flex: 1;
    background-color: blue;
}
</style>

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

• 利用定位实现，将父级元素设置为相对定位，左边元素使用绝对定位，并且宽度设为200px。将右边元素的margin-left设置为200px

<style>
.main {
    position: relative;
}
.left {
    position: absolute;
    width: 200px;
    height: 500px;
    background-color: red;
}
.right {
    margin-left: 200px;
    height: 500px;
    background-color: blue;
}
</style>

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

• 利用定位实现，将父元素设置为相对定位，左边元素设置固定宽度为200px，右边设置绝对定位，并且left设为200px，其余方位设为0

<style>
.main {
    position: relative;
    height: 500px;
}
.left {
    width: 200px;
    height: 100%;
    background-color: red;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px;
    background-color: blue;
}
</style>

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

• 利用浮动实现，将左边元素设为左浮动，并且设置固定宽度。右边元素设置overflow: hidden;触发BFC。因为默认情况下在浮动元素后面的非浮动元素会重叠在浮动元素下面，由于BFC区域的元素不会与浮动元素发生重叠，所以需要触发BFC

<style>
.left {
    float: left;
    width: 200px;
    height: 500px;
    background-color: red;
}

.right {
    overflow: hidden;
    height: 500px;
    background-color: blue;
}

/* 还有一中较简单的浮动实现 */
/*
.left {
  float: left;
  width: 200px;
  height: 500px;
  background-color: red;
}

.right {
  margin-left: 200px;
  height: 500px;
  background-color: blue;
}
*/
</style>

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

14.2 三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间宽度自适应，三栏布局的具体实现：

• 利用flex布局，左右两栏设置固定宽度，中间设置flex: 1;（实现简单）

<style>
.main {
    display: flex;

    height: 500px;
    background-color: yellow;
}

.left, .right {
    width: 100px;
    background-color: blue;
}

.center {
    flex: 1;
    background-color: red;
}
</style>

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

• 利用定位来实现，父元素使用相对定位，左右两栏设置绝对定位，固定宽度，右边还需要设置top: 0; right: 0;，中间设置对应两边的margin值

<style>
.main {
    position: relative;
    background-color: yellow;
}

.left {
    position: absolute;
    width: 100px;
    height: 500px;
    background-color: blue;
}

.right {
    position: absolute;
    top: 0;
    right: 0;

    width: 100px;
    height: 500px;
    background-color: blue;
}

.center {
    height: 500px;
    margin-left: 100px;
    margin-right: 100px;

    background-color: red;
}
</style>

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

• 使用浮动来实现，左右两栏设置固定宽度，左边向左浮动，右边向右浮动，中间设置对应两边的margin值。注意：中间一栏必须放到最后

<style>
.main {
    height: 500px;
    background-color: yellow;
}

.left {
    float: left;
    width: 100px;
    height: 500px;
    background-color: blue;
}

.right {
    float: right;
    width: 100px;
    height: 500px;
    background-color: blue;
}

.center {
    margin-left: 100px;
    margin-right: 100px;
    height: 500px;
    background-color: red;
}
</style>

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

14.3 水平垂直居中

使用flex布局，通过设置 flex container 中的justify-content和align-items两个属性就可以让 flex items 实现水平垂直居中。该方法需要考虑兼容性问题，具体👉请查阅Can I use

<style>
.main {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 500px;
    background-color: yellow;
}

.box {
    width: 200px;
    height: 200px;
    background-color: red;
}
</style>

<div class="main">
    <div class="box"></div>
</div>

• 使用定位来实现，父元素使用相对定位，子元素使用绝对定位，设置子元素的left: 50%; top: 50%;将子元素的左上角移到页面中心，再通过translate: (-50%, -50%);将子元素的中心点移到页面的中心。该方法需要考虑兼容性问题，具体👉请查阅Can I use

<style>
.main {
    position: relative;

    height: 500px;
    background-color: yellow;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);

    background-color: red;
}
</style>

<div class="main">
    <div class="box"></div>
</div>

• 使用定位来实现，父元素使用相对定位，子元素使用绝对定位，设置子元素四个方向的值都为0，并将margin设置为auto。由于宽高固定，因此对应方向实现平分，可以实现和垂直方向上的居中。该方法适用于盒子有宽高的情况

<style>
.main {
    position: relative;

    height: 500px;
    background-color: yellow;
}

.box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    width: 200px;
    height: 200px;
    margin: auto;

    background-color: red;
}
</style>

<div class="main">
    <div class="box"></div>
</div>

14.4 三角形

通过CSS绘制三角形主要是用到盒子模型的border属性。 让我们来看看给一个盒子设置一个很宽的边框，不设置宽高时的样子：

<style>
div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: red yellow green blue;
}
</style>

<div></div>

可以看到，border属性是由三角形组成的

• 上三角

<style>
div {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}
</style>

<div></div>

• 下三角

<style>
div {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}
</style>

<div></div>

• 左三角

<style>
div {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid blue;
}
</style>

<div></div>

• 右三角

<style>
div {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid blue;
}
</style>

<div></div>

• 左上三角

<style>
div {
    width: 0;
    height: 0;
    border-top: 100px solid yellow;
    border-left: 100px solid yellow;
    border-bottom: 100px solid transparent;
    border-right: 100px solid transparent;
}
</style>

<div></div>

至此，CSS面试题（必备篇）告一段落🎉。让我们期待下一篇——掌握篇，继续加油！💪