重读MDN查漏补缺～～

另：文中的「TODO」字样，意在提醒我自己这里还有知识点，以后可以用作写博客的主题（或者续写、扩展）

什么是CSS

我们总是说，HTML负责文档的结构，CSS负责文档的样式，JS负责文档的一些行为。

具体下来就是CSS可以控制文档中一些部分的颜色、背景、边框、长宽等等。
我认为他对文档的结构也有一种再创作的作用，这种再创作应该叫做 “布局” ，比如说把一些地方进行浮动、进行定位……就可以控制它这个“块儿”可以摆放在哪些地方。

中文名

层叠样式表

语法

下面这段代码代表了一个规则，一个 CSS 样式表可以包含很多个规则。

选择器 {
    属性(property): 值(value);
}

我们无须记住所有的CSS样式，只需要在需要的时候，知道怎么去搜索就好。
但是现实意义上来说，我们也应当记住常用的一些CSS样式以及他的值。

怎么添加CSS/CSS构建方式

从前我们说有三种方式，现在我们说有四种方式：

内联样式（不推荐这么写，很难维护代码）

<div style="background: red"></div>

内部样式

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="CSS文件的地址">
</head>

import 导入样式导入方式指的是使用 CSS 规则引入外部 CSS 文件。

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

最后这个就是新增的第四个了。

我们可以看到，link和import都是从外部引入一个样式到本文件，那这两个有什么区别呢？

`<link>`和`@import`的区别

一个是书写的语法不通，具体看上面。
再一个是归属不同，<link>是 HTML 标签，除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS ，定义 rel 连接属性等。但是@import是CSS语法，只能加载CSS，
<link>异步，不阻塞页面加载，@import同步，页面加载完才会加载。
还有一个兼容性问题，@import低版本不兼容。

也算是个老生常谈的问题了，但是私以为，关于同步异步还需要再验证，因为我在网上看见了一些说法，说是两个都会阻塞页面加载，也是是不一样的声音吧。但是我自己还没有验证过。TODO

选择器

实话实讲，我用的最多的就是元素选择器、类选择器、id选择器、父子选择器。
但是肯定不能只知道这么多，那更多的选择器我们放在本文后面讲吧～

CSS内容

我们上面说到，一个 CSS 样式表可以包含很多个属性和值。\

属性和值

就像这样：

选择器 {
    属性(property): 值(value);
    属性1(property): 值1(value);
    ...
}

速记属性

简单来说就是可以用一个属性代替多个属性的属性。
比较常见的就是: font, background, padding, border, and margin 等属性

@规则

除了属性和值，我们也可以在CSS里面写@规则（@rules）.
上面提到的@import就是一种规则。

另一个常见的@rules就是媒体查询 @media
比如说：如果浏览器的宽度大于30em，则背景色将为蓝色。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

CSS怎么工作的（如何加载渲染）

MDN给出了这样一张图，

有条件的可以结合李兵老师解释【从输入URL到页面展示，这中间发生了什么？】的这张图看，看不懂跳过也没关系。

浏览器加载网页的简化版本

首先是获取HTML文件，一般是建立连接发起请求，从服务器拿到这个文档。
然后解析这个HTML文档，把里面的内容解析成一个个的DOM节点。（PS：DOM-文档对象模型，一个个的标签就是一个个的DOM，后面再说。
解析文档的时候，发现一些CSS资源也会去请求（除了CSS资源还有一些图片、视频、JS等，这里先说CSS
拿到CSS之后就会解析CSS文件，给每个选择器找到他所选择的节点，把样式整合，也可以说这就是构建渲染树。
规则整合之后，这些规则作用在渲染树上，渲染树根据这些规则进行布局。
最后就是网页展示在页面（这一步称之为着色

什么是DOM

上面我们提到，会把HTML解析成一个个的DOM节点，那什么是DOM呢

打开控制台，输入document，这个就是文档的根节点，最外层的DOM元素。

每个元素都是一个DOM节点

（以上都是个人理解，各位多去百度多去Google，加油

CSS遇到不认识的属性怎么办

直接跳过。

这也是新样式作用在老浏览器上不报错的原因。

我不认识你我就不管你，不解析。

CSS中的一些概念

层叠

CSS：层叠样式表（Cascading Style Sheets）

怎么理解这个「层叠」呢？

简单说：同一个级别下，后面的样式会覆盖前面的样式。
下面这个例子，蓝色就会覆盖红色，最后表现出来的就是蓝色。

h1 { 
    color: red; 
    color: blue; 
}

优先级

我们上面说到，同级别下面会发生层叠，怎么判断这个级别呢？
简单说：他优先级高，那么他的级别就高

当选择器指向的元素更具体，那么他的优先级越高。
比如说，一般情况下，元素选择器优先级大于id选择器。TODO

千位：内联样式
百位：ID选择器
十位：类选择器、属性选择器、伪类
个位：元素选择器、伪元素选择器

继承

有些属性是可以继承的，有些是不能继承的。

能不能继承一般都挺符合人的第一直觉的。
所以我感觉也不用特意去记。
比如说可以继承的：color、font-family
不能继承的：width、height、border、margin、padding

如果borders可以被继承，每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果!

控制继承

CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。

四个属性值：inherit（开启继承）、initial（从浏览器样式表拿取样式，可以理解为继承浏览器样式）、unset（如果是继承那就继承，如果是从浏览器继承那就是从浏览器继承）、revert (en-US)（没什么浏览器支持这个属性）

关于这四个属性值，可以看我这篇文章：CSS关键字：initial、inherit、unset、revert。

重设所有属性值

有一个属性all，可以把上面那四个关于继承的属性值应用于几乎所有属性。这个的应用在这篇文章里也有写到：CSS关键字：initial、inherit、unset、revert。

选择器

MDN：选择器参考表

伪类、伪元素

伪类应该是，我不用在文档中创建一个class类名，就可以选中元素的东西，可以用具体的class类名替换伪类
伪元素是，比如说文本中第一行，相当于我把第一行提取出来变成一个新的元素（或者用一个新的元素包裹着第一行，那么选中文本第一行就是伪元素）

伪类一个冒号
伪元素两个冒号
（巧记小妙招：类，是一个字；元素，是两个字）

伪类参考表
 伪元素参考表

我自己分不清的一些选择器们

后代选择器：祖宗 > 儿子孙子们
子元素选择器：父亲 > 儿子们
相邻兄弟选择器：哥哥 + 挨着他的一个弟弟
通用兄弟选择器：一男的～他后面的弟弟们（p ～ span：选中p后面所有的span）

选择器参考表

属性选择器-「存在和值选择器」

Presence and value selectors

看见个有意思的东西啊，这个东西有道翻译为「存在和价值选择器」，MDN中文翻译为「存否和值选择器」，谷歌翻译「存在和值选择器」

归根到底就是匹配一个元素是否有某个属性，甚至能指定这个属性应该是什么值、或者包含什么值

现在看看吧～

a[title]：匹配所有带有title属性的 <a> 标签
a[class="class111"]：匹配所有class值为class111的 <a> 标签，并且只能有一个class是class111
a[class~="class111"]：匹配所有class值为class111的 <a> 标签。它可以有其他class值
a[class|="zh"]：第一个class，这个class值可以是zh或者以zh开头的后面紧跟着一个连字符-，比如zh-ang。
```
  class="c a-" （x）
  class="a- c" （y）
```

属性选择器-「子字符串匹配选择器」

Substring matching selectors

li[class$="a"]匹配任何以a结尾的class值
[class*="a"]匹配任何含有a的class值

li[class^="a"]匹配任何以a开头的class（这个真的很鸡肋啊，很无语，看下面：

    class="a" (y)
    class="abc" (y)
    class="bc a" (x)
    class="bc" class="a" ==> class="bc a" (x)
    class="a"  class="bc" ==>  class="a bc" (y)
    
    总结一下就是，只能出现在class的第一个值，第一个字符串。
    个人感觉有一定局限性。不利于扩展维护。

属性选择器-大小写敏感

不希望大小写敏感，那就在后面写一个i

li[class^="a" i] 可以匹配a开头，也可以匹配A开头
li[class^="a"] 只可以匹配a开头

盒模型

块级盒子 (block box) 和 内联盒子 (inline box)

块级盒子和内联盒子，我不想说很多。很复杂啊，不仅仅是display:block、display:inline的辨别，还有display:table等等。TODO

简单说一下吧，块级盒子对应块级元素：单独占据一行，可以有宽度高度，默认和父级盒子一样宽，内边距、外边距、边框会占据位置，把其他元素推开。

内联盒子对应内联元素，不会换行，每有宽度高度，纯纯被里面内容撑开的。

垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

标准盒模型

IE盒模型（怪异盒模型）

宽度 = content + padding + border

（图示逐渐敷衍...

背景和边框

文本的方向

我也不多说了，用到什么直接MDN就OK

从溢出到BFC

主要就是 overflow 这个属性，默认是visible。

overflow:auto、scroll的区别

overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条仍然可见，但被禁用。

overflow: auto 非常相似，但滚动条仅在内容溢出时出现。

补充：有看到有人说啊，auto和scroll还有一个区别是关于滚动条组件是算在宽度内还是宽度外，指路这里：overflow之scroll 和 auto。
但是不管是滚动条是否出现还是组件宽度是否在内容宽度内，我都没有验证成功。可能是每个网站都会有一定的初始样式来统一网站的整体风格，也可能是现在浏览器统一了样式显示啊。TODO

BFC 块格式化上下文

Block Formatting Context

很喜欢这个解释啊：利于布局，说实话他这个描述有点类似块级元素，我觉得比较明显的一个区别就是，BFC 「容器里面的不会影响外面的，反之亦然」

现在你不用太过在意，但是你应该知道，在你使用诸如scroll或者auto的时候，你就建立了一个块级排版上下文。

结果就是，你改变了overflow的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。

激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。

关于BFC比较详细的一篇文章在这里： css 块级格式化上下文（BFC）

还有这个（我真的很喜欢）：BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析

MDN教程在这里：块格式化上下文

手敲一下我自己想记住的知识点：

如何形成BFC

根元素（自成一个BFC
float不为none（有浮动
overflow不为visible（不是默认值，可以是：hidden、scroll、auto
display不为none（弹性布局网格布局什么的也是会形成BFC的
绝对定位元素（position：绝对定位 absolute、固定定位 fixed

BFC的布局规则

内部的盒子会垂直方向一个个放置
垂直方向的距离由「margin」决定，但是垂直方向会发生margin重叠
每个元素左边缘（margin-left）会和所在BFC的左边缘相重叠
BFC不会和浮动的盒子（块儿）相重合
BFC计算高度的时候，会把浮动元素的高度也算进去
容器里面的不会影响外面的，反之亦然

其实不要看这个「哇好多条规则啊」，就心里打鼓（👖👖 😭 ，是以前的我了..）。
其实只要想想，根元素也是一个BFC吧，我们平常块元素自己占据一行吧，这么一看是不是就是「内部盒子垂直一个个放置」了
margin塌陷是会遇到的问题吧，怎么解决？把两个margin对应的元素各自放到一个BFC就可以了。
简单吧
每个内联元素是不是都是从左到右方向一个个排的？块元素宽度占不满整个浏览器宽度，他也是紧挨着屏幕左边儿放置的对吧？这不就是「元素左边缘和BFC左边缘相重叠」了。
为什么BFC不会和浮动相重合？浮动也会引起BFC啊！！两个BFC是不能在一起的！！（误

BFC用途

有什么用呢？

防止margin发生重叠
防止发生因浮动导致的高度塌陷
自适应布局等

CSS值与单位

什么是值？

div{
  color: red;
  font-size: 16px;
}

这一段：color是属性，red就是它的值。

单位呢?16px里面的px就是它的单位。

OK，知道了什么是值，什么是单位，下面详细的我们一个一个说：

有哪些值呢？

数值长度百分比

整数、小数、百分数、以及带单位数

数字

纯数值，比如说透明度：

.box {
  opacity: 0.6;
}

注意: 当您在CSS中使用数字作为值时，它不应该用引号括起来。

长度

绝对长度：比如px
相对长度：比如vh、vw、em、rem

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”
概括地说，rem单位的意思是“根元素的字体大小”

百分比

百分比都是基于什么TODO

颜色

十六进制RGB值

 background-color: #02798b;

RGB

 background-color: rgb(197, 93, 161)

RGBA

后面的小数控制透明度，0是完全透明，1是完全不透明

  background-color: rgba(2, 121, 139, .3);

HLS

色调、饱和度、亮度

  background-color: hsl(174, 77%, 31%);

HLSA

色调、饱和度、亮度、透明度

  background-color: hsla(174, 77%, 31%, .9);

图片

通过 url()控制图片地址

  background-image: url(star.png);

还有位置、字符串和标志符、函数等等

MDN链接在这里，自行取用。TODO

CSS调整大小

我看了一下，说的主要是通过设置width、height..通过那些百分比%、vh等等，控制大小。

还有max-、min-那些属性，会用就行。

熟能生巧。也不是特别有意思的内容。

图像、媒体和表单元素

首先了解一个概念：替换元素，意思是\ CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。

图像和视频就被称为替换元素。

某些替换元素（例如图像和视频）也被描述为具有宽高比。这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。

我们可以对图像宽高设置具体的值来控制它的大小啊。
但同时还有一个属性是我们需要注意的：

object-fit

这个属性可以去拉抻图片，让图片在某个区间内，进行一定的展示。

比如一个图像，原本这样子（默认object-fit: fill;）：

如果希望设置裁剪掉一部分，充满整个区域，就用：object-fit: cover;

如果想要保持图片比例，就用object-fit: contain;

布局中的替换元素

现在遇到的主要指图像这些。

在一些弹性布局、网格布局里面，替换元素有他们自己默认行为，可以理解成默认样式，到时候记得调试就行。

表单

表单一般不会继承字体样式，所以我们用的时候，应该像这样对表单字体做一个重置

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}

然后建议下面这样，防止滚动条在不该出现的时候出现。

textarea {
  overflow: auto;
}

其他的也是熟能生巧吧，加油！

字体布局之类的

捡几个我记不太住的复习复习：

text-align

控制文本如何和它所在的内容盒子对齐。

左对齐left、右对齐right、居中center、两边对齐justify

text-align：center可以设置文字水平居中

line-height

行高 = 盒子高度，可以设置文字垂直居中

其他一些值得看一下的属性

CSS布局

新开一个来写布局吧～～～
回头把链接放过来再。

来了来了～～！！在这里：
前端那么多布局一点点搞吧

CSS回顾复习之旅review、review