css 面试考点全面总结

2020-03-23

Offer / 字节跳动

Word count: 4.1k | Reading time≈ 16 min

# css 面试考点全面总结

拿到字节跳动实习生 offer 总结

回馈分享一波自己的知识点总结

希望读者依此构建自己的知识树（思维导图）

偷懒一下：可参考我自己总结思维导图 : 点这里

附带：高频面试题积累文档。来自于（学长、牛客网等平台）

自己开发的博客地址：zxinc520.com

github 地址: 点击

此篇 css 考点共总结 17 大知识点：全部弄懂了，面试很容易。

# 1、盒模型 (box model)

# 1.1、是什么？

网页设计中 css 技术所使用的一种思维模型

# 1.2、为什么会出现不同模型

当年微软的 IE 浏览器占据超过 80% 市场份额的时候，想自己独立制定一套浏览器标准，其中就包括 IE 的盒模型，但是有很多公司不同意 IE 的做法，他们遵循的是 W3C 的标准来定制浏览器，也就造成了现在浏览器不同的 CSS 盒模型，但是仍有很多老网站采用的是老 IE 的标准 (怪异模式)，因此很多浏览器保留了 IE 的怪异模式。

# 1.3、盒模型的两种标准

标准模型
- 元素宽高＝内容（content）的宽高
IE 模型
- 元素宽高＝内容（content）＋填充（padding）＋边框（border）的总宽高

# 1.4、组成

content
padding
border
margin

# 1.5、CSS3 中标准或者怪异模式之间的切换（box-sizing）

box-sizing ： content-box 采用标准模式也是默认样式
box-sizing： border-box 采用 ie 怪异模式

# 2、IFC 与 BFC

# 2.1、BFC

BFC | 块级格式化上下文（Block Formatting Context）

# BFC 布局规则

内部的 Box 会在垂直方向，一个接一个地放置。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的 BFC。
BFC 的区域不会与 float box 重叠。
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算 BFC 的高度时，浮动元素也参与计算

# BFC 使用场景

外边距折叠问题
清除浮动

# 触发 BFC 的方法

float 属性不为 none
元素的 position 为 absolute 或 fixed
display 属性为下列之一:table-cell | table-caption| inline-block | flex | inline-flex
overflow 属性不为 visible

# 2.2、IFC

IFC | 行内格式化上下文（Inline Formatting Context）

# IFC 布局规则

在行内格式化上下文中，框 (boxes) 一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding 在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

# 3、margin 塌陷及合并问题

注意：margin 塌陷问题和合并问题都只对垂直方向有效

# 3.1、margin 塌陷问题

描述

这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的 margin-top 取两个元素中 margin-top 较大的值。

因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有 “棚顶” 一样，因此叫 margin 塌陷问题。
解决方法
1. 给外层元素认为加一个 “棚顶”:border。
  
  这种方法虽然能够解决问题，但是在日常开发中我们不使用它，因为他在外观上对元素进行了改变。
2. 触发 BFC
  - float 属性不为 none
  - 元素的 position 为 absolute 或 fixed
  - display 属性为下列之一:table-cell | table-caption| inline-block | flex | inline-flex
  - overflow 属性不为 visible

# 3.2、margin 合并问题

描述：具体表现为两个元素并列时，两者相隔的外边距取的是两者所设置 margin 的最大值。
margin 合并问题解决办法
- 我们仍然用 bfc 来解决。可以给其中一个元素包起来，在外层元素中设置 bfc 渲染规则。此时这个元素的渲染规则就改变了，就能够解决这个问题。

# 4、float

# 4.1、浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以通过 float 属性将元素定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。通过下面代码实现两个 div 元素在一行显示。

# 4.2、清除浮动

浮动元素后面的同级标签加 clear: both | left | right 属性

推荐使用：after（伪类） 伪类原理：相当于在父元素里添加一个子元素（默认内联元素），用来清除容器内的浮动元素。                                       	display: "block";
    clear:both;
    height:0;
    content: "";

触发 BFC
- float 属性不为 none
- 元素的 position 为 absolute 或 fixed
- display 属性为下列之一:table-cell | table-caption| inline-block | flex | inline-flex
- overflow 属性不为 visible

# 5、flex

# 5.1、描述

2009 年，W3C 提出了一种新的方案 ----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。

Flex 是 Flexible Box 的缩写，意为 "弹性布局"，用来为盒状模型提供最大的灵活。

任何一个容器都可以指定为 Flex 布局。

# 5.2、容器的属性

flex-direction
- row | row-reverse | column | column-reverse
flex-wrap
- flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow
- 属性是 flex-direction 和 flex-wrap 的简写
justify-content
- justify-content: flex-start | flex-end | center | space-between | space-around;
align-items
- align-items: flex-start | flex-end | center | baseline | stretch;
align-content
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;

# 6、CSS 浏览器兼容性的 4 个解决方案

浏览器 CSS 样式初始化
浏览器私有属性
- 我们经常会在某个 CSS 的属性前添加一些前缀，比如 - webkit- ，-moz- ，-ms-，这些就是浏览器的私有属性。 -webkit- (谷歌，Safari, 新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器 (包括 iOS 系统中的火狐浏览器); 简单的说，所有基于 WebKit 内核的浏览器)
  
  -moz- (火狐浏览器)
  
  -o- (旧版 Opera 浏览器)
  
  -ms- (IE 浏览器和 Edge 浏览器)
- 对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面
CSS hack 语法
- 有时我们需要针对不同的浏览器或不同版本写特定的 CSS 样式，这种针对不同的浏览器 / 不同版本写相应的 CSS code 的过程，叫做 CSS hack!
- 例如 IE：
```
 
```
自动化插件
- Autoprefixer 是一款自动管理浏览器前缀的插件，它可以解析 CSS 文件并且添加浏览器前缀到 CSS 内容里，使用 Can I Use（caniuse 网站）的数据来决定哪些前缀是需要的。
- 目前 webpack、gulp、grunt 都有相应的插件，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让 CSS 兼容性浪费你的时间！

# 7、position（定位）

# 7.1、文档流

简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML 的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。

一般使用 margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。margin 用于布局分开元素使元素与元素互不相干；padding 用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段 “距离”。

只要不是 float 和绝对定位方式布局的，都在文档流里面。

# 7.2、属性

static
relative (相对定位）
absolute
fixed
z-index
- z-index 指定了一个元素及其子元素的 z-order，元素之间有重叠的时候，z-index 可以决定让哪一个元素在上方。通常来说 z-index 较大的元素会覆盖较小的一个。仅对定位的元素有效。元素之间重叠默认的顺序是后面的元素会盖住前面的元素。如果设置了 z-index 可以改变这个顺序。但只对同级的元素有效。父元素永远在子元素后面。

# 8、行内元素和块级元素

# 区别

块元素，总是在新行上开始；内联元素，和其他元素在一行
块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素
块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。

# 9、Sass/Scss、Less、stylus

# 9.1、CSS 预处理器

概念

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。
优点

虽然各种预处理器功能强大，但使用最多的，还是以下特性：变量（variables），代码混合（ mixins），嵌套（nested rules）以及代码模块化 (Modules)。

# 9.2、区别

编译环境不一样

Sass 的安装需要 Ruby 环境，是在服务端处理的，而 Less 是需要引入 less.js 来处理 Less 代码输出 css 到浏览器，也可以在开发环节使用 Less，然后编译成 css 文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。Stylus 需要安装 node，然后安装最新的 stylus 包即可使用
变量符不一样

Less 是 @，而 Scss 是 $， Stylus样式中声明变量没有任何限定，你可以使用“$ ” 符号开始。
输出设置
处理条件语句
引用外部 CSS 文件
Sass 和 Less 的工具库不同

# 10、css3 动画

# 10.1、常用特效 / 变换（transform）

scale（2D 缩放）
rotate（2D 旋转）
translate（2D 位移）
skew（2D 倾斜）

# 10.2、animation

属性
- animation-name ：规定需要绑定到选择器的 keyframe 名称。
- animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function：规定动画的速度曲线。
- animation-delay ：规定在动画开始之前的延迟。
- animation-iteration-count：规定动画应该播放的次数。
- animation-direction ：规定是否应该轮流反向播放动画。
- animation-fill-mode ：规定动画在播放之前或之后，其动画效果是否可见
简写：

animation: name duration timing-function delay iteration-count direction fill-mode;
举例：

animation: wang 3s linear 1s infinite alternate forwards ;

# 10.3、keyframes

这个属性用来定义一系列关键帧。也就是在动画运行的全过程中的一个个中间点。

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

# 11、居中布局

使用 Flex
使用绝对定位

inline-block

.parent2{ text-align: center; } .parent2 span{ display: inline-block;
height:50% } .parent2 .child{ display: inline-block; color: #fff; }
<div class="parent2">
  <span></span>
  <div class="child">hello world-2</div>
</div>

使用 table 和 table-cell

.parent1 {
  display: table;
}
.parent1 .child {
  display: table-cell;
}

子元素是单行文本

设置父元素的 text-align 和 line-height = height

利用 grid 布局

.container {
  display: grid;
}
.box {
  justify-self: center;
  align-self: center;
}

利用绝对定位和 margin:auto

/* 无需知道被居中元素的宽高 */
.box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.container {
  position: relative;
}

# 12、等高布局

flex 布局

使用负 margin-bottom 和正 padding-bottom 对冲实现

.Article > li {
  float: left;
  margin: 0 10px -9999px 0;
  padding-bottom: 9999px;
}

模仿 table 布局

父：display: table; 子： display: table-cell;
grid 布局

# 13、三栏布局

# 13.1、特点

两侧宽度固定，中间宽度自适应
中间部分在 DOM 结构上优先，以便先行渲染
都需要一个格外的 Div.container
允许任意列的高度最高

# 13.2、圣杯布局

特点：使用了相对定位
优势：在 DOM 结构上显得更加值观和自然

实现

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            overflow: hidden;
            padding: 0 100px 0 100px;

        }

        .middle,.left,.right{
            position: relative;
            float: left;
        }

        .left{
            width: 100px;
            height: 100px;
            background: red;
            margin-left: -100%;
            left: -100px;
        }

        .right{
            width: 100px;
            height: 100px;
            background: green;
            margin-left: -100px;
            right: -100px;

        }
        .middle{
            background: blue;
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

# 13.3、双飞翼布局

特点：不需要定位，只用了浮动和负边距
优势
- 不需要使用定位，所以更加简洁
- 允许的页面最小宽度通常比圣杯布局更小

实现：

<style>
       .container {
           overflow: hidden;
       }
       .middle, .left, .right {
           float: left;
           height: 100px;
       }
       .left {
           width: 100px;
           background: red;
           margin-left: -100%;
       }
       .right {
           width: 100px;
           background: blue;
           margin-left: -100px;
       }
       .middle {
           width: 100%;
           background: aqua;
       }
       .inner {
           margin: 0 100px;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="middle">
       <div class="inner">middle</div>
   </div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

# 13.4、区别

两者都是为了不让左右俩不遮住 middle，经典圣杯布局通过父亲 padding 给左右俩腾位置从而不会遮住 middle 内容，而双飞翼是 middle 设置 margin，限制内部内容区域，从而左右俩遮的地方不会影响到 middle 内容

对于三栏布局，modern solution 是 flex box/grid 布局，这两者可以轻松实现 mobile-friendly 的方案，也可以控制顺序，middle 依然可以先渲染，2019 年兼容性不错了，如果 APP 无视 IE，这是优选

# 14、多栏布局

# 14.1、栅格系统（grid systems）

特点：利用浮动实现的多栏布局
表现： Bootstrap

# 14.2、多列布局

特点：将内容按指定的列数排列
表现：报纸排版
使用方式：通过 css3 的 column
- IE10 及以上和其它现代浏览器
- 但 -webkit- 以及 -moz- 前缀不能省略
- 比 flex 弹性布局更稳定、更兼容
语法
- columns: <‘column-width’> || <‘column-count’>
  
  设置对象的列数和每列的宽度。复合属性。
- column-width ：设置对象的宽度
- column-count ：用来定义对象中的列数，使用数字 1-10 表示
- column-gap ：设置列与列之间的间距
- column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '>
  - 设置对象的列与列之间的边框。复合属性
  - column-rule: 10px solid #090;
- column-fill：auto | balance
  - 设置对象所有列的高度是否统一

# 15、弹性布局（Flexbox）

CSS3 引入的新模式
- 用来为盒装模型提供的最大的灵活性
- 目前已经得到了所有现代浏览器的支持
优势
- 轻松实现视图大小变化时对元素的相对位置的大小的保持
- 减少了对浮动布局的依赖以及重置元素的大小
注意
- Webkit 内核的浏览器，必须加上 -webkit 前缀 display：-webkit-flex
- 子元素的 float、clear 和 vertical-align 属性失效

# 16、流式布局

主要靠百分比进行排版
对应布局
- 瀑布流布局
  - 表现：参差不齐的多栏布局
  - 实现方式：同样可以用 column 实现

# 17、响应式布局

特点
- 一个网站能够兼容多个终端
- 解决不用设备之间分辨率之间的兼容问题
实现方式
- css3 的媒体查询
- 检测设备屏幕大小，通过 css 媒体查询来有针对性的更改页面的布局

Donate

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.