1.层叠

css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则

2.CSS 为控制继承提供了四个特殊的通用属性值

每个css属性都接收这些值
（1）inherit：使子元素属性和父元素相同，"开启继承"
（2）initial：设置属性值和浏览器默认样式相同
如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit
（3）unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
（4）revert：一个新的属性，只有很少的浏览器支持
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性
它的值可以是其中任意一个(inherit, initial, unset, or revert)
这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点

3.层叠三个因素

重要性排序如下，前面的更重要：
1)重要程度
2)优先级
3)资源顺序：如果有超过一条规则，而且都是相同的权重，那么最后面的规则会应用
可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式
优先级：更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式（垂直叠加优先级，水平的通过顺序的覆盖后再进行有限级比较）
一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

• 1 千位： 如果声明在style的属性（内联样式）则该位得一分
  这样的声明没有选择器，所以它得分总是1000
• 2 百位： 选择器中包含ID选择器则该位得一分
• 3 十位： 选择器中包含类选择器(class)、属性选择器(img[src])或者伪类(::)则该位得一分
  4 个位：选择器中包含元素(标签)、伪元素(:)选择器则该位得一分
  注: 通用选择器 ()，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级
• 警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器**
  有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important
  用于修改特定属性的值， 能够覆盖普通规则的层叠
  覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后，或者更高优先级
  不得不使用它：不能编辑核心的CSS模块，不能用任何其他方式覆盖，又真的想要覆盖一个样式时

相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：
用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)
用户样式表中的常规声明(由用户设置的自定义样式)
作者样式表中的常规声明(这些是我们web开发人员设置的样式)
作者样式表中的!important声明
用户样式表中的!important 声明

4.选择器

多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”
使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略
类别：类型/标签、类、ID、标签属性、伪类、伪元素、运算符（通配符，后代选择器，子代选择器，相邻兄弟选择器，通配兄弟选择器）

5.盒模型

（1）块级盒子

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width和 height属性可以发挥作用
• 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
  eg：标题(<h1>等)和段落(<p>)

（2）内联盒子

• 盒子不会产生换行
• width和 height属性将不起作用
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开
  eg：<a> 元素、 <span>、 <em> 以及 <strong>

CSS中组成一个块级盒子需要:

• Content box: 这个区域是用来显示内容，大小可以通过设置 width和 height
• Padding box: 包围在内容区域外部的空白区域； 大小通过 padding相关属性设置
• Border box: 边框盒包裹内容和内边距
  大小通过 border 相关属性设置
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域
  大小通过 margin 相关属性设置

（1）标准盒模型

在标准模型中，如果给盒设置 width 和 height，实际设置的是 content box
padding 和 border 再加上设置的宽高一起决定整个盒子的大小
注意： margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间
盒子的范围到边框为止 —— 不会延伸到margin

（2）替代（IE）盒模型

盒子的大小还要加上边框和内边距

默认浏览器会使用标准模型
如果需要使用替代模型，可通过为其设置 box-sizing:border-box 来实现
一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换
（译者注：IE8+ 支持使用box-sizing 进行切换 ）

1）margin外边距
外边距是盒子周围一圈看不到的空间
它会把其他元素从盒子旁边推开
外边距属性值可以为正也可以为负
设置负值会导致和其他内容重叠
无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加
外边距折叠：有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小

2）border 边框
标准的盒模型，边框的大小将添加到框的宽度和高度
替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度

3）padding 内边距
内边距位于边框和内容区域之间
与外边距不同，不能有负数量的内边距，所以值必须是0或正的值
应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框
使用<span>，并对其应用了宽度、高度、边距、边框和内边距
宽度和高度被忽略了
外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠
一个元素使用 display: inline-block，实现我们需要的块级的部分效果：
设置width 和height 属性会生效
padding, margin, 以及border 会推开其他元素
但是，它不会跳转到新行，如果显式添加width 和height 属性，它只会变得比其内容更大

6.背景和边框

（1）背景

背景图片应该只是纯粹的装饰；任何重要的内容都应该是HTML页面的一部分，而不是包含在背景中
background-color
background-image
no-repeat — 不重复
repeat-x —水平重复
repeat-y —垂直重复
repeat — 在两个方向重复

当渐变用于背景时，也可以使用像图像一样的 background-image 属性设置
background-size

auto —图片显示本身大小，与盒子大小无关
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比
在这种情况下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内
在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙

background-position
默认的背景位置值是(0,0)
background-position是background-position-x和background-position-y的简写，它们允许分别设置不同的坐标轴的值
也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

background-attachment
scroll: 使元素的背景在页面滚动时滚动
如果滚动了元素内容，则背景不会移动
实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动
fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动
它将始终保持在屏幕上相同的位置
local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现想要的功能
局部值将背景固定在设置的元素上，因此当滚动元素时，背景也随之滚动

（2）边框

border(border-top/right/bottom/left-width/style/color)
border-radius圆角(border-top-right-radius)

7.书写模式

writing-mode的三个值分别是：

• horizontal-tb: 块流向从上至下
  对应的文本方向是横向的
• vertical-rl: 块流向从右向左
  对应的文本方向是纵向的
• vertical-lr: 块流向从左向右
  对应的文本方向是纵向的
  横向书写模式下，映射到 width 的属性被称作内联尺寸inline-size——内联维度的尺寸
  而映射height的属性被称为块级尺寸 block-size，这是块级维度的尺寸
  margin-top 属性的映射是 margin-block-start——总是指向块级维度开始处的边距
  padding-left 属性映射到 padding-inline-start，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距
  border-bottom 属性映射到的是 border-block-end，也就是块级维度结尾处的边框

一些属性的取值是一些物理值（如top、right、bottom和left）
这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）
float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效

8.溢出的内容

CSS会尽力不让溢出的内容不可见，因为这会造成数据损失

（1）overflow

默认值：visible，内容溢出的时候，可以看到它们
hidden隐藏掉溢出
scroll浏览器总会显示滚动条，即使没有足够多引起溢出的内容，避免滚动条在内容变化的时候出现和消失
auto滚动条在有比盒子所能装下更多的内容的时候才显示

！！！（2）块级排版上下文（Block Formatting Context，BFC）

诸如scroll或者auto的时候，就建立了一个块级排版上下文

9.css的值与单位

绝对长度单位：cm，mm，Q（四分之一毫米），in，pc，pt，px，大多数在用于打印时比用于屏幕输出时更有用
相对长度单位：em，ex（字符x的高度），ch，rem，lh，vw，vh，vmin，vmax

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”
带有ems类的<ul>内的<li>元素从它们的父元素中获取大小因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍
概括地说，rem单位的意思是“根元素的字体大小”
“根em”的rem标准
<ul>内的<li>元素和一个rems类从根元素(<html>)中获取它们的大小
这意味着每一个连续的嵌套层都不会不断变大
将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比
如果使用百分比作为宽度值，那么它将是父值宽度的百分比
HSL

色调： 颜色的底色
这个值在0和360之间，表示色轮周围的角度
饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
亮度：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)

函数：rgb()、hsl()、url()、calc()

10.调整大小

就是元素的固有尺寸 — 由其所包含的内容决定
给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸
一个空的<div>是没有尺寸的，没有高度，或者说高度为0，因为内部没有内容
对于一个处于另外一个容器当中的盒子，如果给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数
如果我们的<div>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素
给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数
max-width的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大
图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%

11.图像、媒体、表单元素

图像和视频被描述为替换元素，意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置
用object-fit时，替换元素可以以多种方式被调整到合乎盒子的大小
object-fit取值：

• contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比
  整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”
• cover被替换的内容在保持其宽高比的同时填充元素的整个内容框
  如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框
• fill被替换的内容正好填充元素的内容框
  整个对象将完全填充此框
  如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
• none被替换的内容将保持其原有的尺寸
• scale-down内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些
  布局中的替换元素：为了强制图像拉伸，以充满其所在的网格单元，必须仿照下面做点事情：

img {
  width: 100%;
  height: 100%;
}

在一些浏览器中，表单元素默认不会继承字体样式，因此如果想要确保表单填入区域使用body中或者一个父元素中定义的字体，需要向CSS中加入这条规则
为了保证统一，将所有元素的内外边距均设为0是个好主意，然后在单独进行样式化控制的时候将这些加回来

button,
input,
select,
textarea {
box-sizing: border-box;//内外边距均设为0
  font-family : inherit;
  font-size : 100%;
} 

除了上面提到的规则以外，也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条

textarea {
  overflow: auto;
}

统一的重置：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
textarea {
  overflow: auto;
} 

12.表格

• 表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性
• 使用table-layout:fixed 创建更可控的表布局，可以通过在标题width中设置width来轻松设置列的宽度
• 使用border-collapse:collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观
• 使用thead, tbody和tfoot将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起
• 使用斑马线来让其他行更容易阅读
• 使用text-align直线对齐<th>和td>文本，使内容更整洁、更易于跟随