[toc]
CSS入门
在MDN上每个属性都有单独的页面，不论你是忘记了某个属性，还是想要知道一个属性还能接受什么其它的值，这些页面都可以帮助你。
注意：在MDN上的 CSS reference 页面列举了所有的 CSS属性页面（同时也包括其它的CSS特性）。 另外，当你想要寻找一个CSS特性的更多内容时，多使用你的搜索引擎来搜索 “mdn css-feature-name“ 。例如，搜索 “mdn color” 和 “mdn font-size”！
查看特性的实现状态(implementation status)是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态，你可以通过这种方法来查看你是否可以去使用它。
重要事项：如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。
重要：在CSS(和其他网络标准)中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。
虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。一个例子是calc()函数。这个函数允许您在CSS中进行简单的计算，例如：
width: calc(90% - 30px);transform: rotate(0.8turn);一个函数由函数名和一些括号组成，其中放置了该函数的允许值。在上面的calc()示例中，我要求此框的宽度为包含块宽度的90%，减去30像素。这不是我可以提前计算的东西，只是在CSS中输入值，因为我不知道90%会是什么。与所有值一样，MDN上的相关页面将有使用示例，这样您就可以看到函数是如何工作的。
构建CSS
@规则
到目前为止，我们还没有遇到 @rules (pronounced “at-rules”). 这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。 有些@rules 规则很简单，有规则名和值。例如，要将额外的样式表导入主CSS样式表，可以使用@import:
@import 'styles2.css';您将遇到的最常见的 @rules 之一是@media，它允许您使用 媒体查询 来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
在下面的 CSS中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用@media创建样式表的一个部分，该部分仅适用于视口大于30em的浏览器。如果浏览器的宽度大于30em，则背景色将为蓝色。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}速记属性
一些属性，如 font, background, padding, border, and margin 等属性称为速记属性–这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁。
Warning: One less obvious aspect of using CSS shorthand is how omitted values reset. A value not specified in CSS shorthand reverts to its initial value. This means an omission in CSS shorthand can override previously set values.
tips
您选择的代码布局通常是个人偏好，尽管当您开始在团队中工作时，您可能会发现现有团队有自己的样式指南，指定要遵循的约定。
如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。
相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。
这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。
这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。
CSS构建
开始进入真正学习
层叠和继承
同级后者优先
控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。
-
设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”.
-
设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为
inherit。 -
将属性重置为自然值，也就是如果属性是自然继承那么就是
inherit，否则和initial一样
注: 还有一个新的属性, revert (en-US)， 只有很少的浏览器支持。
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
现在，我们将要了解层叠如何定义在不止一个元素的时候怎么应用css规则。
有三个因素需要考虑，根据重要性排序如下，前面的更重要：
- 重要程度
- 优先级
- 资源顺序
我们已经看到了顺序对于层叠的重要性。如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式
优先级
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
- 千位： 如果声明在
style的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。 - 百位： 选择器中包含ID选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
注: 通用选择器 (*)，组合符 (+, >, ~, ‘ ‘)，和否定伪类 (:not) 不会影响优先级。
警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。
这是个属性值！！用于修改特定属性的值， 能够覆盖普通规则的层叠。
注： 覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后，或者更高优先级。
了解 !important 是为了在阅读别人代码的时候知道有什么作用。 但是，强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。
相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：
- 用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。
- 用户样式表中的常规声明(由用户设置的自定义样式)。
- 作者样式表中的常规声明(这些是我们web开发人员设置的样式)。
- 作者样式表中的
!important声明 - 用户样式表中的
!important声明
对于web开发人员的样式表来说，覆盖用户样式表是有意义的，因此设计可以按预期进行，但是有时用户充足的理由覆盖web开发人员样式，正如上面提到的—这可以通过在他们的规则中使用!important来实现。
选择器
当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
但是在被组合起来以后，整个规则都会失效，无论是h1还是这个class都不会被样式化。
h1, ..special {这组选择器包含了伪类，用来样式化一个元素的特定状态。
它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。
| 选择器 | 示例 | 学习CSS的教程 |
|---|---|---|
| 类型选择器 | h1 { } |
类型选择器 |
| 通配选择器 | * { } |
通配选择器 |
| 类选择器 | .box { } |
类选择器 |
| ID选择器 | #unique { } |
ID选择器 |
| 标签属性选择器 | a[title] { } |
标签属性选择器 |
| 伪类选择器 | p:first-child { } |
伪类 |
| 伪元素选择器 | p::first-line { } |
伪元素 |
| 后代选择器 | article p |
后代运算符 |
| 子代选择器 | article > p |
子代选择器 |
| 相邻兄弟选择器 | h1 + p |
相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p |
通用兄弟 |
将所有类连成一串代表匹配包含所有这些类的元素
.a.b.c{}匹配同时含有a,b,c类的标签
<li class ='a b'>此处li拥有a和b类</li>属性
| 选择器 | 示例 | 描述 |
|---|---|---|
[*attr*] |
a[title] |
匹配带有一个名为attr的属性的元素——方括号里的值。 |
[*attr*=*value*] |
a[href="https://example.com"] |
匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 |
[*attr*~=*value*] |
p[class~="special"] |
匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。 |
| `[attr | =value]` | `div[lang |
子字符串匹配选择器
| 选择器 | 示例 | 描述 |
|---|---|---|
[*attr*^=*value*] |
li[class^="box-"] |
匹配带有一个名为attr的属性的元素，其值开头为value子字符串。 |
[*attr*$=*value*] |
li[class$="-box"] |
匹配带有一个名为attr的属性的元素，其值结尾为value子字符串 |
[*attr**=*value*] |
li[class*="box"] |
匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。 |
普通伪类如：first-child invaild使用 :
用户行为伪类，有时叫做动态伪类
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
::pseudo-element-name备注：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。
li[class^="a" i] {
color: red;
}“伪“
:first-child 表示选择的对象是其父元素的首个子元素，而不是选择它的首个子元素,伪类表状态！！！
：：before和：：after可以使用content属性插入字符串，而无法被阅读器识别，一般插入符号
也可以将该伪元素设置为block，然后对其进行css修饰
在CSS中被叫做“生成内容”
这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
关系选择
空格-所有后代
‘>’ - 直系儿子
a+b - b必须紧跟a后且同级，插入br都不行
a ~b - 选择！后面的！所有兄弟
盒模型
在 CSS 中我们广泛地使用两种“盒子” —— 块级****盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为:
一个被定义成块级的（block）盒子会表现出以下行为:
盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题(
<h1>等)和段落(<p>)默认情况下都是块级的盒子。
如果一个盒子对外显示为 inline，那么他的行为如下:
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
inline-block：
- 盒子不会换行
- width和height起作用
- 垂直起作用，会推开
- 水平起作用，会推开
用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的 外部 显示类型
同样盒模型还有 内部 显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样(如上所述).
但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。
你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
这种模型设定了总大小后，增加边距会压缩内容，换算时注意*2的关系
如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 the CSS Tricks article on box-sizing。
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}外边距折叠
理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
边框
是在边距和填充框之间绘制的。如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果您使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。
分别设置每边的宽度、颜色和样式，可以使用：
设置所有边的颜色、样式或宽度，请使用以下属性：
设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：
-
…………………….
当您想要通过添加内边距使链接具有更大的命中区域时，这是很有用的。<a>是像<span>一样的内联元素；你可以使用display: inline-block来设置内边距，让用户更容易点击链接。
一般直接一个border：就好啦
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius: a b 是指定a:左上+右下 b剩下俩,4个值是顺时针指定
然而 a/b 是分别指定椭圆的长轴和短轴
背景
屏幕阅读者不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是HTML页面的一部分，而不是包含在背景中。！！！！！
backgroung-color
background-image: 小图平铺循环 大图不会缩小（。。）
图像会覆盖在颜色顶部
控制背景平铺
background-repeat属性用于控制图像的平铺行为。可用的值是:
no-repeat— 不重复。repeat-x—水平重复。repeat-y—垂直重复。repeat— 在两个方向重复。
调整背景图像的大小
在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
你也可以使用关键字:
cover—浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外contain— 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
background-position:
注意：background-position是background-position-x和background-position-y的简写，它们允许您分别设置不同的坐标轴的值。
参数都在这：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
有关键字：长度值.百分比，可混用
最后，您还可以使用4-value语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的CSS中，我们将背景从顶部调整20px，从右侧调整10px:
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px right 10px;
} background-image可用于渐变背景
也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值。
当你这样做时，你可能会以背景图像互相重叠而告终。背景将与最后列出的背景图像层在堆栈的底部，背景图像在代码列表中最先出现的在顶端。
background-attachment
background-attachment: scroll使元素的背景固定在页面上，以便在滚动页面时滚动。如果滚动元素内容，则背景不会移动。
background-attachment: fixed导致将元素的背景固定到视口（你看到的？），以便在滚动页面或元素内容时不会滚动。它将始终保持在屏幕上的相同位置。
background-attachment: local，是CSS3的新增功能，可将元素的背景固定为实际的元素本身。因此，当滚动页面时，仅当元素这样做时，元素的背景才会随之移动（对于带有position: fixed。的元素则不会）。滚动元素的内容时，背景将与其一起滚动。
看这个很清晰。。个屁啊视口是啥
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下
border-box,padding-box,content-box,text
background-origin
border-box背景图片的摆放以border区域为参考
padding-box背景图片的摆放以padding区域为参考
content-box背景图片的摆放以content区域为参考
background简写
如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。
对于所有简写属性，任何没有被指定的值都会被设定为它们的 初始值
<bg-size>只能紧接着<position>出现，以”/“分割，如： “center/80%“.<box>可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定background-origin和background-clip。如果出现 2 次，第一次的出现设置background-origin，第二次的出现设置background-clip。<background-color>只能被包含在最后一层！！。
注意: background-color 只能在background的最后一个属性上定义，因为整个元素只有一种背景颜色。
其他顺序随意
处理文本
writing-mode
a-b：a可取horizontal 和vertical 代表文本方向（内联布局）
horizontal有tb和bt vertical有rl和lr代表块流向（块布局）
我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。
为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。
横向书写模式下，映射到width的属性被称作内联尺寸（inline-size）——内联维度的尺寸。而映射height的属性被称为块级尺寸（block-size），这是块级维度的尺寸。牛啊！
margin-top属性的映射是margin-block-start——总是指向块级维度开始处的边距。
padding-left属性映射到 padding-inline-start，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。border-bottom属性映射到的是border-block-end，也就是块级维度结尾处的边框。
挺好理解的，不需要死记
但此时你的物理属性仍然适用
CSS溢出
溢出是在盒子无法容纳下太多的内容的时候发生的。在这篇教程里面，你将会学习到什么是溢出，以及如何控制它。CSS中万物皆盒，因此我们可以通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着，CSS给了你好几种工具来控制溢出
CSS的默认原则是“尽力减少数据损失”，所以你溢出就是溢出了。不然很难debug是吧
由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。
overflow属性
默认visible 可以hidden scroll（滚动条）
scroll会加x和y，只要一边可以用overflow-y : scroll
你可以用overflow属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对overflow-x生效而第二个对overflow-y生效
overflow-wrap：
是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
normal 行只能在正常的单词断点处中断。（例如两个单词之间的空格）break-word 表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。现代网页布局的方式（正如CSS layout模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。
在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的CSS可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。
CSS值
在CSS规范和MDN的属性页上，您将能够发现值的存在，因为它们将被尖括号包围
Note: You’ll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term value refers to any particular expression supported by a value type that you choose to use.
注意：您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。
CSS中的值是一种定义允许子值集合的方法。这意味着如果您看到<color>是有效的，那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、rgb()函数等等。
您可能会发现自己在CSS中使用了各种数值数据类型。 以下全部归类为数值：
| 数值类型 | 描述 |
|---|---|
<integer> |
<integer>是一个整数，比如1024或-55。 |
<number> |
<number>表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2。 |
<dimension> |
<dimension>是一个<number>，它有一个附加的单位，例如45deg、5s或10px。<dimension>是一个伞形类别，包括<length>、<angle>、<time>和<resolution>类型。 |
<percentage> |
<percentage>表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。 |
长度length
以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。
| 单位 | 名称 | 等价换算 |
|---|---|---|
cm |
厘米 | 1cm = 96px/2.54 |
mm |
毫米 | 1mm = 1/10th of 1cm |
Q |
四分之一毫米 | 1Q = 1/40th of 1cm |
in |
英寸 | 1in = 2.54cm = 96px |
pc |
十二点活字 | 1pc = 1/16th of 1in |
pt |
点 | 1pt = 1/72th of 1in |
px |
像素 | 1px = 1/96th of 1in |
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)
相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。
| 单位 | 相对于 |
|---|---|
em |
在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width |
ex |
字符“x”的高度 |
ch |
数字“0”的宽度 |
rem |
根元素的字体大小 |
lh |
元素的line-height |
vw |
视窗宽度的1% |
vh |
视窗高度的1% |
vmin |
视窗较小尺寸的1% |
vmax |
视图大尺寸的1% |
ems and rems
em和rem是您在从框到文本调整大小时最常遇到的两个相对长度。
概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。
概括地说，rem单位的意思是“根元素的字体大小”。
百分比
百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在MDN属性引用页面上看到它能接受哪些值。如果允许的值包括<length-percent>，则可以使用长度或百分比。如果允许的值只包含
颜色color
在CSS中指定颜色的方法有很多，其中一些是最近才实现的。在CSS中，相同的颜色值可以在任何地方使用，无论您指定的是文本颜色、背景颜色还是其他颜色。
颜色关键词
是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！您可以在这里看到 <color>值的完整列表。
十六进制RGB值
每两个值表示一个通道（channels）—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。#128a7d;
RGB和RGBA值
RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似
您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明（默认0），而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。
注意: 在颜色上设置alpha通道与使用我们前面看到的opacity属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用RGBA颜色只让你指定的颜色不透明。
HSL和HSLA值
与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：
- 色调： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。
- 饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
- 亮度：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)
HSLA类似RGBA
其他value
<image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。https://cssgradient.io/
<position> 数据类型表示一组2D坐标，用于定位一个元素，如背景图像(通过 background-position)。它可以使用关键字(如 top, left, bottom, right, 以及center )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。
一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。
字符串vs标识符
我们看到关键字被用作值的地方(例如<color>关键字，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
在某些地方可以使用CSS中的字符串，例如 在指定生成的内容时。content比如
函数
我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与JavaScript、Python或c++等语言相关联，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。
行为更类似于传统编程语言的值是calc()函数。这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。直接把参数表达式按照正常表达式输入就好了
你可以看看所有不同类型的 CSS的值和单位 参考页面
调整大小
在受CSS设置影响之前，HTML元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。
一个空的``是没有尺寸的。如果你在你的HTML文件中添加一个空<div>并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为0，因为内部没有内容。
再强调一次，这就是元素的固有尺寸 — 由其所包含的内容决定。
我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸
百分数
当使用百分数时，你需要清楚，它是什么东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。
这是因为百分数是以包含盒子的块为根据解析的。如果我们的<div>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。
例如，你也许会希望上下的外边距是元素高的一个百分数，左右外边距是元素宽的百分数。但是，情况不是这样的！
当你用百分数设定内外边距的时候，值是以内联尺寸进行计算的，也即对于左右书写的语言来说的宽度。在我们的例子里面，所有的内外边距是这一宽度的10%，也就是说，你可以让盒子周围的内外边距大小相同。在你以这种方式使用百分数的时候，这是一个需要记住的事实。
min-和max-
除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个min-height属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。
max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.
max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width
如果你使用了max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%。
如果你设定一个图像的属性为width: 100%，而且它的原始宽度小于容器，图像会被强制拉伸以变大
这个技术是用来让图片可响应的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。下载过大的图像会造成你的网站变慢，如果用户使用按量收费的网络连接，会让用户花更多钱。
视口
视口，即你在浏览器中看到的部分页面，也是有尺寸的。在CSS中，我们有与视口尺寸相关的度量单位，即意为视口宽度的vw单位，以及意为视口高度的 vh单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。1vh等于视口高度的1%，1vw则为视口宽度的1%.
图像、媒体和表单元素
图像和视频被描述为**替换元素**。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是，正如我们将看到的，CSS可以对图像执行多种操作。
某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。
object-fit 你可以使用关键字:
cover—浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外contain— 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。fill–调整比例以适应盒子
如果你是按顺序读这些课，那么你可能还没有看到布局的部分，只要记住替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为，这很必要，避免了他们被布局奇怪地拉伸。
width: 100%;
height: 100%;//要拉伸的话正如在本教程的HTML部分的form styling课里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同，并在许多浏览器上测试复杂的表单。
文本输入元素
允许文本输入的元素，例如<input type="text">，特定的类型例如<input type="email">以及<textarea>元素，是相当容易样式化的，它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变，取决于你的用户访问站点时所使用的操作系统和浏览器。
在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。
button,
input,
select,
textarea {
font-family : inherit;
font-size : 100%;
} 样式化表格
通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 table-layout: fixed，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier在Fixed Table Layouts中更详细地讨论了这一技术。
- 一个
border-collapse属性的collapse值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当您在表元素上设置边框时，它们之间将会有间隔，如下图所示：
这看起来不太好(虽然可能是你想要的样子，谁知道呢?)。使用 border-collapse: collapse;，让边框合为一条，现在看起来好多了：
collapese是共享边框，separate是传统模式，各自拥有边框，边框间的距离通过CSS属性 border-spacing 来确定的
- 我们在整个表设置了一个
border，这是必要的，因为我们将在表页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。 - 我们在《th》和《td》元素上设置了一些
padding——这些元素使数据项有了一些空间，使表看起来更加清晰。 - 用letter-spaceing属性设置字体间距
caption-side: bottom;调试CSS
善用web开发者工具，审查元素并修改值，选择满意的代码copy掉，查看同时应用的选择器并比较优先级，可以先放到检测网站检验，浏览器的支持性，
如果上述步骤未能解决问题，则您需要做更多调查。 此时最好的做法是创建一个称为简化测试用例的东西。
创建一个简化测试用例:
- 如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。 诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。 您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。 之后，您可以检查问题是否仍然明显。
- 如果删除 JavaScript 不能解决问题，请不要包含 JavaScript。 如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。
- 删除所有不会导致此问题的 HTML。 删除布局中的组件甚至主要元素。 在保留问题可重现的情况下把代码量尽量减少。
- 删除掉任何不影响问题的 CSS。
在执行此操作的过程中，您可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。 当发现一些东西时，应该在代码中添加一些注释。 如果您需要帮助，这些注释将向帮助您的人显示您已经做了哪些尝试。 这很可能会为您提供足够的信息，以便能够搜索可能存在的问题和解决方法。
组织CSS
代码规范
如果你在和一个小组共同协作完成一个已有的项目，需要检查的第一件事是这一项目是否已经有了CSS的代码风格规范。小组的代码风格规范应当总是优先于的个人喜好。做事情很多时候没有对错之分，但是统一是很重要的。
例如你可以看下MDN的CSS代码规范的示例。 (en-US).（偏教学）
注释
在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段CSS的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是||。
你不必在你的CSS中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。
逻辑段落
根据你html的布局逻辑用注释分块，在相应的块中添加CSS元素！
避免太特定的选择器
这样会导致在需要复用时复制粘贴，造成代码冗长
分成几个小样式表
尤其在你对站点的不同部分设置了很不同的样式的时候，你会想要有个包含了所有普适规则的样式表，还有包含了某些段落所需要的特定规则的更小的样式表。你可以将一个页面连接到多个样式表，层叠的一般规则会在这里生效，即连接的靠前的样式表里面的规则会比后面的有更高优先级。
例如我们会将我们站点的一部分作为一个在线商店，许多CSS只会用于样式化商店需要的产品列表和表单。将这些东西放在另外一张样式表里面，只在商店页面进行连接，这会是合理的做法。
这可以让你更容易保持CSS的组织性，也意味着如果有多人在写CSS，你会更少遇到有两个人需要同时编写相同的样式表的情况，防止在源代码的控制上产生冲突。
*OOCSS
你会遇到的大多数方式都有一部分归功于面向对象的CSS（OOCSS）的概念，这是一种因Nicole Sullivan的努力而流行的方式。OOCSS的基本理念是将你的CSS分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS的标准示例是在The Media Object中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。
Nicole Sullivan在描述这种方式和推广上所做的工作导致，即使是那些不严格遵守OOCSS方式的人，今天也可以大致以这种方式复用CSS，它已经普遍地进入到我们的理解当中，成为了与事物交互的好办法。
BEM
BEM即为块级元素修饰字符（Block Element Modifier）。在BEM中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用BEM的代码，因为代码中在CSS的类里使用了多余的一个下划线和连字符
增加的类和应用到OOCSS例子里面的相似，但是它们遵守了BEM严格的命名常规。
BEM在大些的Web项目中被广泛使用，许多人用这种方式写他们的CSS。你可能会在没有提及为何CSS如此布局的时候，遇到BEM语法的例子，甚至是在教程中
CSS构建体系
另一种组织CSS的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写CSS。有很多工具，我们将它们分成预处理工具和后处理工具。预处理工具以你的原文件为基础运行，将它们转化为样式表；后处理工具使用你已完成的样式表，然后对它做点手脚——也许是优化它以使它加载得更快。
使用这些工具的任何一部分都需要你的开发环境能运行进行处理工作的脚本。许多代码编辑器能为你做这项工作，或者你也可以安装一个命令行工具来辅助工作。
最为流行的预处理工具是Sass，这里不是Sass的教程，所以我只会简要地解释一些Sass能做的事情，在组织的时候真的会帮到你，即使你没有用到Sass的任何其他的独特功能。
CSS自定义属性！
通过在 :root 伪类上设置自定义属性，然后在整个文档需要的地方使用
:root {
--main-bg-color: brown;
}在属性里用var（–xxx）使用，如：
background-color: var(--main-bg-color);注意，这些是自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时候才会计算，而并不会按其他规则进行保存。比如，你不能为元素设置一个属性，然后让它从兄弟或旁支子孙规则上获取值。属性仅用于匹配当前选择器及其子孙，这和通常的CSS是一样的。
可以指定备用值
background-color: var(--my-var, var(--my-background, pink，blue));本例展示了如何处理一个以上的 fallback。该技术可能会导致性能问题，它花了更多的时间在处理这些变量上。
像自定义属性这些 fallback 语法允许使用逗号。比如 var(--foo, red, blue) 定义了一个 red, blue 的备用值——从第一个逗号到最后的全部内容，都会被作为备用值的一部分。
当浏览器遇到无效的 var() 时，会使用继承值或初始值代替。
在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
