这篇文章主要收录了css中选择器、元素类型、浮动、定位、flex布局、盒子模型、形变以及动画、移动端适配等等相关知识

1 初识css

css全称Cascading Style Sheets，层叠样式表

修饰网页样式并不是只有css，当时有个强力竞争对手svg，但是css的层叠性让它脱颖而出

目前css3只是某些模块升级到3，不是全部，有些模块已经升级到4了

官方文档

www.w3.org/TR/CSS22/pr…

中文文档

developer.mozilla.org/zh-CN/docs/…

查看css属性可用性

caniuse.com/

css属性变成标准standard需要经过草稿drafts、备选推荐、推荐这几个步骤；

谷歌一般会在草稿里看看哪些属性好不好用，好用就支持，而别的浏览器可能不怎么做；

所以有时css有些属性出现兼容性问题

2 css引入

html三种引入css：

• 内联样式
• 文档样式表
• 外部样式表

现代开发网页要结构与样式分离

外部样式表引入

• link元素
• style元素里@import

<style>
    @import url();
</style>

link效率高一点

css引入css

@import url();

2.1 css文件编码

指定单个css文件编码

@charset "utf-8";

3 选择器

• 通配选择器
• 元素选择器
• 类选择器
• id选择器
• 属性选择器
• 组合
• 伪类
• 伪元素

3.1 通配选择器

通用属性的设置，比如

{
    margin: 0;
    padding: 0;
}

通配符 ***** ，但是一般列出需要使用这些通用属性的元素，因为*内部原理是在网页元素中做个遍历，给每个元素加上这些样式，这样可能影响网页运行效率，因为有些元素是不需要这些属性的

3.2 id选择器

id名一个页面只能有一个（规范）

3.3 类选择器

• 一个元素可以多个类选择器，空格分开

<h2 class="title">123</h2>

.title {
    
}

3.4 伪类选择器

动态伪类

• :link （a:link 未访问的链接）
• :visited （a:visited 已访问的链接）
• :focus （获取焦点时）
• :hover （a:hover 鼠标移动到）
• :active （a:active 点击未松手）

同时存在以上属性时，推荐这个顺序，不然会有很多问题

（女朋友看到lv包包后，haha大笑）

:hover和:active也可以应用到其它元素上

应用

去掉a元素的焦点状态

a:focus {
    outline: none;
}

或者

<a tabindex="-1"></a>

tabindex可以调整tab选中元素的顺序

结构伪类

• :nth-child() 正着数
• :nth-last-child() 倒着数
• :nth-of-type() （例子：p:nth-of-type(2) 只数p元素，且是第2个子元素）
• :nth-last-of-type()
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :root 代表html
• :only-child（父元素中唯一子元素）
• :only-of-type
• :empty

否定伪类

• :not()

除了（）

目标伪类

• :target 用于锚点链接

3.5 属性选择器

<style>
    [title] {
      color: red;
    }
  </style>

<div title="div">123</div>
<p title="p">111</p>

div和p都有title属性，其它属性同理

3.6 元素选择器

<h2>123</h2>

h2 {
    
}

3.7 伪元素选择器

常用伪元素

• ::before
• ::after
• ::first-line
• ::first-letter

::first-line

第一行

::first-letter

第一个字母

::before

在一个元素的内容之前插入内容

span::before {
  content: "123";
  color: red;
}

<span>hhh</span>

hhh前面多出123并且是红色

除了文字，还可以加图片

span::before {
  content: url();
  color: red;
}

<span>hhh</span>

::after

在一个元素的内容之后插入其它内容

注意：

• 伪元素可以看成是行内元素
• content属性不能少

3.8 组合选择器

后代选择器

div sapn {
    
}

间接后代和直接后代

子选择器

直接子代

div>span {
    
}

兄弟选择器

div+span {
    
}

交集选择器

1.同时符合两个条件的元素：div元素、class="one"

div.one {
    
}

2.同时符合3个条件的元素：div元素、class="one"、属性值title="test"

div.one[title="test"] {
    
}

并集选择器

只要符合任一条件即可：div元素或class="one"

div, .one {
    
}

4 常用的css属性

• color，文字颜色，前景色更严谨
• font-size，文字大小
• background-color，背景颜色
• width/height，宽高

颜色

rgb颜色空间

red: 0-255

green: 0-255

blue: 0-255

rgba

red: 0-255

green: 0-255

blue: 0-255

alpha: 0-1 透明度，0完全透明

16进制

两个一样写一个，缩小css体积

4.1 div的outline属性

调试技巧

在开发者工具加上这段样式

div {
    outline: 2px solid red !important;
}

可以清晰地看出网页的结构，并且可以知道哪一块用的div

4.2 line-height

文本的最小行高

行高：两行文字基线baseline之间的间距

行距会等分

应用：

块级元素垂直居中

4.3 display

元素类型是浏览器赋予的，并且可以更改

display常见4个属性可以更改

• block 变成块级
• inline 变成行内级
• inline-block 变成行内块（同时具备块级和行内级特点）
• none 隐藏

巩固练习：

• 邮箱下拉菜单
• 模拟百度分页列表

4.4 visibility

控制元素可见性，有2个常用值，

• visible
• hidden

区别display: none;，它还占据空间，display不占据

4.5 overflow

控制内容溢出的行为

• visible
• hidden
• scroll

4.6 cursor

鼠标样式

auto

default 跟随操作系统

pointer 小手

text 竖线

4.7 文字省略

三条件：

• 内容超出不换行（white-space）
• 内容超出不显示（overflow）
• 内容溢出结尾省略号（text-overflow）

white-sapce

内容超出是否换行

• normal 换
• wrap 不换

text-overflow

设置文字溢出部分行为

• clip 溢出裁剪
• ellipsis 溢出那行的结尾省略号表示

前提是overflow不为visible

white-space: wrap;
overflow: hidden;
text-overflow: ellipsis

5 文本属性

5.1 text-align

元素内容在元素中的水平对齐方式

• left
• right
• center

5.2 text-decoration

装饰文字的装饰线

• none 去除a元素默认下划线
• underline 下划线
• overline 上划线
• line-through 中划线（删除线）

5.3 letter-spacing

字母间距

5.4 word-spacing

单词间距

5.5 text-transform

大小写转化

• capitalize 首字母大写
• uppercase 全部大写
• lowercase 全部小写

5.6 text-indent

缩进

6 列表属性

• list-style-type 设置li元素前面标记的样式（none值用的多）
• list-style-image
• list-style-position

7 表格属性

• border-collapse

7.1 细线表格

<table>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
  </table>

table {
  /* 单元格合并 */
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 20px;
}

为什么要进行单元格边框合并？

给单元格设置边框时，单元格是紧挨着的，两个单元格会有重叠的部分，本来1px的重叠成2px，因此做出细线表格

border-collapse: collapse;这个属性很重要

8 表单属性

8.1 去除input的tab键选中效果

input {
    outline: none;
}

8.2 textarea禁止缩放

textarea {
    resize: none;
}

9 字体

9.1 font-size

字体大小

9.2 font-family

字体类型；

与操作系统有关系；

为了防止设置的字体操作系统不存在，一般设置多个，从左往右，找到为止；

9.3 font-weight

字体粗细

normal：400

bold：700

9.4 font-style

斜体

• normal
• italic 用字体的斜体显示（前提是这种字体支持斜体）
• oblique 文本倾斜

9.5 网络字体

要想使用os没有字体，怎么做？

<div class="box">
    我是是
</div>

@font-face {
  /* 命名 */
  font-family: "zsf";
  /* 路径 */
  src: url();
}
.box {
  font-family: "zsf";
}

常见字体种类

• ttf
• otf
• eof
• svg
• woff

字体图标

阿里巴巴字体图标库

在font文件夹里放需要字体

<span>对应字符串</span>

@font-face {
  /* 命名 */
  font-family: "zsf";
  /* 路径，可多个，为了兼容 */
  src: url();
}
span {
  font-family: "zsf";
}

或者使用附带的css文件（下载字体图标时有），link进来，就可以省去@font-face了，或者

<span class="iconfont icon-arrow"></span>

(可以去掉那对应字符串了，因为那css文件设置了伪元素::after，会自动加上图标对应的字符串编码)

使用图片方式比较

img元素	网站重要组成部分
background-image	先加载css再解析url；可以使用精灵图减少请求次数
iconfont字体图标	字体图标放大时不会失真；也可以减少请求次数

10 CSS特性

• 继承
• 层叠

10.1 继承性

何为继承？

一个元素要是没有设置某属性值，就继承父元素的值，有的话就用自己的

可继承的属性

不用死记硬背用多了就熟练了，直接查文档

developer.mozilla.org/zh-CN/docs/…

那有些不支持继承的属性要是想继承呢？

• 100%
• inherit

注意

继承过来的是计算值，而不是字面值，在使用em为单位就会区别出来了

10.2 层叠性

• css允许多个相同名字的css属性层叠在一个元素上

基本层叠

后面覆盖前面（前提是同类型选择器）

带权重的层叠

选择器的权重

方便比较，数值不重要

权重高的生效

• !important 10000
• 内联样式 1000
• id 100
• 类、属性、伪类 10
• 元素、伪元素 1
• 通配符 0

比较的话也是从权重大的开始比较，有一样权重的就比数量

11 元素类型

根据元素能不能在同一行显示，html元素主要分2类

• 块级元素
• 行内级元素

11.1 块级元素

• 独占父元素一行

常见：div、p、h1-h6、table、form、列表等等

11.2 行内级元素

• 多个行内级元素可以在父元素的同一行中显示

常见：a、img、span、input、button等等

元素之间的空格

只要是行内级元素之间都会有空格，产生的原因是代码的换行符

较好的解决方法：

给元素加float

11.3 另一种分法

根据内容（是否浏览器会替换掉元素）类型，html元素可以主要分2大类元素

• 替换元素
• 非替换元素

替换元素

元素本身没有实际内容，浏览器根据元素类型和属性，来决定元素的具体显示内容

常见：img、input、video等等

非替换元素

与替换元素相反

宽高由内容决定

注意

"行内级元素不能设置宽高"这种说法是不准确的

比如常见的img和input，可以设置宽高

行内级非替换元素不能生效的属性：

• width
• height
• margin-top
• margin-buttom

对行内级非替换元素特殊的属性

padding的上下（上下多出区域，但不占据空间）

border的上下（上下多出区域，但不占据空间）

12 盒子模型

每一个元素就是一个盒子

12.1 内容content

min-width 最小宽度，确保内容能正常显示（尽管出现滚动条）

12.2 内边距padding

内边距会撑开盒子

12.3 外边距margin

margin上下传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

<div class="box1"></div>
<div class="box">
  <div class="inner"></div>
</div>

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.inner {
  height: 100px;
  width: 100px;
  background-color: purple;
  margin-top: 20px;
}

防止margin上下出现传递

• 给父元素设置padding-top/padding-bottom
• 给父元素设置border
• 触发BFC（最有效）

BFC：block format context，类似于结界

如何触发BFC？

• float
• 设置一个元素overflow为非visible

建议

• margin一般用来设置兄弟元素间
• padding一般用来设置父子元素间

margin上下折叠

垂直方向上相邻的2个margin有可能会合并为1个margin，这种现象叫collapse

防止margin上下折叠

• 只设置其中一个元素的margin

段落之间设置margin折叠有妙用

12.4 边框border

边框主要有三种属性：

• 宽度width
• 样式style
• 颜色color

当边框远大于内容大小时，会出现一些有趣的形状

圆角border-radius

值为50%（这里的**%是当前元素的（padding+border+width））时，就是圆**

12.5 盒子相关属性

box-shadow

盒子阴影

shadow= inset?&&<length>{2,4}&&<color>?

• <>:表示要具体的值
• {2,4}:2到4位
• &&:且，对顺序没要求
• ？:有或没有

第一个length：水平方向

第二个length：垂直方向

第三个length：模糊半径

第四个length：延伸距离

阴影练习

text-shadow

文字阴影

类似盒子阴影

box-sizing

盒子尺寸

• content-box内容盒子（设置宽高时只是指定内容的宽高）
• border-box（设置宽高时是内容+内边距+边框的高度）

13 背景

13.1 background-image

设置元素背景图片

会盖在（不是覆盖）background-color上面

可以设置多张，默认显示前面一张（其它图片按顺序层叠在下面）

img和background-image都可满足需求，开发如何选择？

网页重要组成部分用img

13.2 background-repeat

平铺

• repeat-x

• repeat-y

• no-repeat

• repeat

13.3 background-size

背景图片大小

• cover 覆盖整个盒子（拉伸图片），不保持宽高比
• contain 拉伸到较短一边为止，保持图片宽高比
• 值 1个%只是水平方向，2个%才有垂直

13.4 background-position

• 第1个值是水平方向
• 第2个值是垂直方向
• 如果只有1个值，另一个默认center

css-sprite精灵图（雪碧图）

是一种css图像合成技术，将各种小图片合并到一张图片上，然后利用css的背景图定位来显示对应图片部分

好处

• 减少向服务器请求的数量，加快网页的响应速度，并减少服务器压力
• 减少图片总大小

雪碧图制作：

• ps
• www.toptal.com/developers/…

练习：

京东案例-多快好省

背景居中（无论屏幕大小多少，都能看到中间的主要内容，并且居中显示）

13.5 background-attachment

• local 背景会随着box内容滚动而滚动
• scroll 滚动浏览器时全部内容会随着浏览器滚动
• fixed 背景是固定的，不会随着box内容滚动而滚动

13.6 background简写

image position/size repeat attachment color

14 定位

14.1 标准流normal-flow

在标准流中，可以使用margin、padding对元素定位

缺点：

• 设置一个元素的margin或者padding，通常会影响标准中其他元素的定位效果
• 不便于实现元素的层叠效果

可以使用定位实现元素间层叠

14.2 position

static

标准流（设置4方位的值没意义 ）

relative

相对（相对原来的位置，也就是标准流时的定位）

absolute

绝对

原理

检查最近父元素的是不是非position: static，如果是，那就相对于该父元素定位；

如果该父元素并没设置position（也就是static），那就继续往上检查；

如果一直没找到，那就相对于浏览器视口定位

子绝父相

希望子元素（absolute）相对于父元素进行定位，又不希望父元素脱标（relative）

绝对定位技巧

绝对定位元素

position值为absolute或fixed的元素

对于绝对定位元素来说：

水平方向:

垂直方向：

应用

1.完全占据父元素

out {
    position: relative;
    width: 600px;
    height: 600px;
}
inner {
    position: absolute;
    left: 0;
    right: 0;
}

2.让内容水平居中

out {
    position: relative;
    width: 600px;
    height: 600px;
}
inner {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

3.内容垂直居中

out {
    position: relative;
    width: 600px;
    height: 600px;
}
inner {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
}

绝对定位练习

考拉练习

fixed

固定（相对浏览器视口，当画布滚动时，固定不动）

固定定位练习

考拉侧栏

14.3 元素之间的层叠关系

• 父子关系
• 定位元素在非定位元素上
• 都是定位元素时，后面的元素会盖上前面的元素

都是定位元素的情况下，要是希望前面的元素盖上后面的怎么做？

z-index

只对定位元素有效

15 浮动

• 浮动也会让元素脱标
• 浮动元素与行内级元素重叠，行内级元素会被浮动元素推出、处于块级的内容也会被浮动元素推出（图文环绕）
• 行内级元素、inline-block元素浮动后，其顶部将所在行顶部对齐

层叠关系：

标准流元素<浮动元素<定位元素

inline-block水平布局的缺陷

• 垂直有些属性会影响水平布局

• 父元素空格产生空隙（空隙大小由父元素字体大小决定）

浮动可以解决这个问题

15.1 高度坍塌

真实开发父元素高度是不确定的（auto），但是浮动会使子元素脱标，不再向父元素汇报高度，这时父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌问题

解决父元素高度坍塌问题的过程，叫清除浮动

伪元素

.clear-fix::after {
    content: "";
    clear: both;
    display: block;
}

给需要的元素加上clear-fix类即可

浮动布局练习

京东案例

16 脱标后元素的特点

• 可以设置宽高
• 宽高默认由内容决定
• 不在受标准流束缚
• 不再给父元素汇报宽高数据

脱标后的元素和inline-block有什么区别？

脱标后的元素不是inline-block，而是block，虽然脱标后有时和块级元素在一行，但这是因为脱标后，很难知道父元素是谁（没有父元素了），宽高都是auto，这时的现象是包裹内容（宽高由内容决定）

17 形变

17.1 transform

• 旋转rotate(deg)
• 倾斜skew(deg,deg)
• 平移tanslate(x,y)
• 缩放scale(x,y)

17.2 形变原点

transform-origin

17.3 过渡动画

transition

给形变加上首帧和尾帧

• property指定过渡属性（有transform、width、height、all）
• duration指定过渡时间
• timing-function指定动画的变化曲线
• delay 延迟动画时间

17.4 关键帧动画

transition可以进行过渡动画，但是过渡动画只能控制首尾两个值：第一帧和最后一帧

要是希望有更多状态（帧）可以使用关键帧动画

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

.box {
  height: 150px;
  width: 150px;
  background-color: red;
}
.box:hover {
  animation: zsf 2s linear;
}
@keyframes zsf {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200px, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  75% {
    transform: translate(0, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

• @keyframes创建规则

• 百分比设置各阶段动画（形变）from相当于0%，to相当于100%

• 通过animation将动画添加到属性上一般只用三个值（值1，值2，值3）：

  值1：动画名字（@keyframes创建的规则）

  值2：执行时间

  值3：动画速率

17.5 3D动画

css实现3D有两个属性：

• transform-style: perserve-3d
• perspective

但是css实现3d有很多兼容性问题

推荐一个js实现3d的库

three.js

稳定兼容

18 flex布局

除了图文环绕，flex完全可以替代float

18.1 两个重要的概念

• 开启了flex布局的元素叫 flex container
• flex container里面的直接子元素叫flex items

开启

• flex 块级
• inline-flex 行内级

outer {
    display: flex;
    display: inline-flex;
}

18.2 布局模型

18.3 flex container上的css属性

应用在flex container上的css属性

• flex-flow
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

flex-direction

默认flex items是沿着main axis（主轴）从main start->main end方向排布的

决定主轴方向

有4个值：

• row 默认
• row-reverse
• column
• column-reverse

justify-content

决定了flex items在main axis上的对齐方式

flex-start	默认，与main start对齐
flex-end
center	居中对齐
space-between	flex items间距离相等，与main start和main end两端对齐
space-evenly	flex items间距离相等，且该距离等于flex items到两端距离
space-around	flex items间距离相等，且该距离等于flex items到两端距离2倍

align-content

决定了多行flex items 在cross axis上的对齐方式，用法与justify-content类似

stretch	与align-items的stretch类似
flex-start	与cross start对齐
flex-end
center	居中
space-between	flex items间距离相等，与cross start和cross end两端对齐
space-evenly	flex items间距离相等，且该距离等于flex items到两端距离
space-around	flex items间距离相等，且该距离等于flex items到两端距离2倍

align-items

决定了flex items在cross axis上的对齐方式

normal	默认，效果和stretch一样
stretch	当flex items在cross axis方向的size 为auto时，会自动拉伸至填充flex contain
flex-start	与cross start对齐
flex-end	与cross end对齐
center	居中
baseline	基线对齐（第一行作为基线）

flex-wrap

默认情况，所有flex items都会放在一行显示

no-wrap	默认
wrap	换行
wrap-reverse	在交叉轴反转

flex-flow

是flex-direction || flex-wrap的简写

顺序任意

18.4 flex items上的css属性

• flex
• flex-grow
• flex-basis
• flex-shrink
• order
• align

order

决定flex items的排布顺序，值越小，排越前

• 默认是0

align-self

通过align-self覆盖flex container设置的align-items

• auto 默认，遵从flex container的align-items
• stretch、flex-start、flex-end、center、baseline效果跟align-items一样

flex-grow

决定了flex items如何拓展

• 默认值 0
• 当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
• flex-grow总和大于等于1时，等比拓展（加上乘以size的值，用完剩余size）；小于1时，各自乘以小数（有剩余size）

flex-shrink

决定了flex items如何收缩

• 默认 1
• 当flex items在main axis方向上超过了flex container的size时（oversize），flex-grow属性才会有效
• 当flex items 的**flex-shrink总和大于1时，**等比收缩（减去乘以oversize的值）；小于1时就用得少，因为还是溢出

flex-basis

决定flex items在main axis主轴上的base size

• auto 自身宽/高
• 具体值

决定flex items在main axis主轴上的base size的优先级

• max-size...
• flex-base
• size
• 内容本身的size

flex

是flex-grow || flex-shrink || flex-basis的简写

19 移动端适配

19.1 视口

meta

• name
• content

<meta name="viewport" content="width=device-width, initial-scale=1.0">

19.2 rem适配

root em，rem总是相对于html的font-size

原理

如何做移动端适配的？

1. 根据不同手机屏幕，设置不同html的font-size大小
2. 将所有需要适配的图片、元素、字体大小的单位，统一用rem

如何根据不同手机屏幕，设置不同html的font-size大小？

2种做法：

• 媒体查询
• js动态计算（用的最多）

动态计算rem值

如何直接根据html的font-size大小动态的计算出对应的rem值？

• vscode插件px to rem（快捷键Alt+Z）（不推荐）
• postcss-pxtorem插件
• 利用less的计算能力（可以定义变量和计算）

less需要转化成css才能生效，而转化成less有2种方案：

• easy less插件（写完保存）
• node安装（npm）

媒体查询

/* ipone5 320px*/
@media screen and (min-width: 320px) {
  html {
    font-size: 9px;
  }
}
/* ipone6 375px*/
@media screen and (min-width: 375px) {
  html {
    font-size: 10px;
  }
}
/* ipone6 plus 414px */
@media screen and (min-width: 414px) {
  html {
    font-size: 11px;
  }
}

js动态计算

学会引入即可

文字大小单位

px	像素
em	相对于父元素字体的大小，2em就是2倍父元素字体大小
%	相对于父元素的字体

宽度

px	像素
em	自己有设置font-size，那就相对于自己的font-size；没有则相对父元素的font-size
%	父元素宽度

20 常见技巧

20.1 水平居中

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

普通文本、行内级元素

.box {
    text-align: "center";
}

行内块级元素

.box {
    text-align: "center";
}
选择器 {
    display: inline-block;
}

块级元素没有宽高时

他占据了父元素整个宽

.box {
    text-align: "center";
}
选择器 {
    没有宽高
}

与父元素一样宽高的元素，给他父元素设置 text-align: "center";没有意义，但是由于继承了父元素属性，也可以使其内容居中

块级元素即使有宽高

也占据了父元素整个宽（独占一行）

.box {
    text-align: "center";
}
该盒子选择器 {
    宽高
}

与父元素一样宽高的元素，给他父元素设置 text-align: "center";没有意义，但是由于继承了父元素属性，也可以使其内容居中，但该盒子不会相对父元素居中，只是该盒子的内容在该盒子里居中

怎么让该盒子在父盒子里水平居中呢？

该盒子选择器 {
    margin: 0 auto;
}

原理

那垂直方向可以用auto居中吗？

不可以，垂直意味着父元素高度是auto，而父元素高度auto的话，那父元素高度是内容撑起来的，也就没有垂直居中之说；

为什么水平方向可以呢？

因为不给父元素设置宽度，它的值是auto，这样子元素的margin左右设置auto就可以等分

注意：margin-top的**%参照的是宽度而不是高度**

20.2 margin负值

进行布局时，同一行多个元素摆放后，设置margin-right让他们之间产生间距，那么最后一个元素设置的margin-right总是多余的

解决方法

• 每一行的最后一个元素，总是加一个class，去除margin-right
• 伪类选择器（会有兼容性问题）
• .outer固定宽度=.inner+负margin(最优)

21 补充

20.1 浏览器的私有前缀

为什么要加浏览器前缀？

为了兼容。。。

如何加上浏览器前缀？

打包工具会帮我们添加上去，无需手动

22 css属性使用经验

设置的css属性不生效

• 选择器优先级低
• 选择器没选中
• 使用形式不对
• 浏览器不支持该属性

多使用开发者工具调试

好看的颜色网站：

flatuicolors.com/

23 爬取数据技巧

斗鱼 f12 切换成移动到 刷新 network

fetch/xhr 复制链接地址在别的窗口打开，会有json格式的数据