css权威指南第四版中英文在线： http://gdut_yy.gitee.io/doc-csstdg4/#%E5%89%8D%E8%A8%80
很赞的css网站： https://css-tricks.com/
权威教程： https://developer.mozilla.org/zh-CN/docs/Learn/CSS
一，CSS初步
1. 浏览器有时候也被称为 user agent，大致可以当这个程序是一个存在于计算机系统中的人。 当我们讨论CSS时，浏览器是 User agent 的主要形式， 然而它并不是唯一的一个。还有其他可用的user agents — 像是那些可以把HTML和CSS文档转换为可以打印的PDF文档的软件。
2. 在MDN上的 CSS reference 页面列举了所有的 CSS属性页面（同时也包括其它的CSS特性）。 另外，当你想要寻找一个CSS特性的更多内容时，多使用你的搜索引擎来搜索 "mdn css-feature-name" 。例如，搜索 "mdn color" 和 "mdn font-size"！
3. CSS 由许多模块(modules) 构成。MDN上每个css属性页面都列出了其所在的模块。
4. <link rel="stylesheet" href="styles.css">
5. 注: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。
你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。
一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。
6. 选择器
- body h1 + p .special 表示：在<body>之内，紧接在<h1>后面的<p>元素(p和h1是兄弟)的内部，类名为special。
7. 专一性（Specificity）：CSS语言有规则来控制在发生碰撞时哪条规则将获胜--这些规则称为级联规则(cascade)和专用规则(specificity)。如何计算专用性：
- 代码位置靠后的样式将覆盖靠前的样式。这就是起作用的级联。
- 类选择器和元素选择器的早期块中，类将获胜。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。
8. 在css中，属性和值都是区分大小写的。每对中的属性和值由冒号(：)分隔。如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。在CSS(和其他网络标准)中，当语言表达存在不确定性（比如一个单词有两种拼写方式）时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。
9. @规则: 这是css中的一些特殊规则 @rules (pronounced "at-rules").
- @import 'style2.css'; //要将额外的样式表导入主CSS样式表.
- 最常见的
@rules之一是@media，它允许您使用 媒体查询 来应用CSS。@media (min-width: 30em) { body { background-color: blue; } }
10. 浏览器处理 CSS的标准流程：当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
- 浏览器载入HTML文件（比如从网络上获取）。
- 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
- 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
- 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
- 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
- 网页展示在屏幕上（这一步被称为着色）。
11. 关于DOM：
一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。
对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。
12. 当浏览器遇到无法解析的CSS代码时，浏览器什么也不会做，继续解析下一个CSS样式！当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染，也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。
.box {
width: 500px;
width: calc(100% - 50px);
}二，CSS 构建块 （CSS Building Blocks）
这个模块着眼于级联和继承( cascade and inheritance)，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。
1）层叠与继承 : 本节目标是帮你建立对——层叠、优先级和继承(the cascade, specificity, and inheritance)——这三个最基本的CSS概念的理解。这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。
1. cascade, 和它密切相关的概念是 specificity，决定在发生冲突的时候应该使用哪条规则。
3. cascade：简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
4. specificity： 优先级。浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：
- 一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。
- 一个类选择器稍微具体点 — 它会选择该页面中有特定
class属性值的元素 — 所以它的优先级就要高一点。
5. 继承： 在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。
6. 这三个概念协同工作一起来控制css规则应用于哪个元素：
6.1. 继承：CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。
inherit设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".initial设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为inherit。unset将属性重置为自然值，也就是如果属性是自然继承那么就是inherit，否则和initial一样。- 还有一个新的属性,
revert， 只有很少的浏览器支持。
6.1.1. css速记属性 all （其他速记属性如margin,padding,background等等可以同时设置若干属性的css属性）， 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。如 #id {all : unset};//将#id 中设置的所有属性重置为自然直。
6.2. 理解层叠(cascading) ，当一个元素有几个可用的css样式时，具体计算不同 css 选择器的权重方法，下面比上面更重要：
- 代码顺序，优先级相同时后面的代码覆盖前面代码。
- 优先级。比如类选择器优先级大于元素选择器，本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是 个十百千 — 四位数的四个位数：：
- 千位： 如果声明在
style的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。 - 百位： 选择器中包含ID选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
- 注: 通用选择器 (
*)，组合符 (+,>,~, ' ')，和否定伪类 (:not) 不会影响优先级。 - 警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
- 千位： 如果声明在
- !important 优先级最高。覆盖
!important唯一的办法就是另一个!important具有 相同优先级 而且顺序靠后，或者更高优先级。了解!important是为了在阅读别人代码的时候知道有什么作用。 但是，强烈建议除了非常情况不要使用它。!important改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。
7.
2）CSS选择器
- 类型、类以及ID选择器
- 属性选择器
- 伪类与伪元素
·[selectorA]:nth-child(an+b)·这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。即：先找到 selectorA的所有兄弟元素，然后从1开始排序。当序号an+b所指向的元素和 selectorA匹配时，则选中此元素，否则不匹配此元素。- ·[selectorA]:nth-of-type(an+b)· 先找到 selectorA 的所有同类型的兄弟元素，然后从1 开始排序。选中那些序号为an+b的元素。
[selectorA]:nth-last-child(an+b)这个伪类和:nth-child基本一致, 但它是从结尾计数, 而不是从开始计数.- [selectorA]:last-child 这个伪类等于 nth-last-child(1)
- a:active---鼠标在a元素上按下还未松开时触发；a:focus---鼠标在a元素上按下松开时触发。但是当两者同时用时，最终效果只有a:focus有效果。
- 关系选择器
3）盒模型 ： 所有CSS都是包在盒子里的，那么理解这些盒子就是让我们能够创建CSS布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务，本节我们会认真看看CSS盒模型，了解其原理及相关术语。在 CSS 中我们广泛地使用两种“盒子”：块级盒子（Block box） 和 内联盒子（Inline box）
1. 块级盒子：
-
一个块级元素会新开始一行；
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽， 即尽可能撑满父容器；
width和height属性可以发挥作用- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
2. 内联盒子：
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是 不会 把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用而且 会 把其他处于
inline状态的盒子推开。
3. 我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式，同时display的某些值如flex还影响盒子内部的布局方式。
4. 内部和外部显示类型：
如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样。我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为flex元素，会根据 弹性盒子（Flexbox ）规则进行布局。
5. box-sizing: border-box; 设置所有元素都使用 border-box 方法：设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}4）背景与边框
1. background-color: rgb(1,1,1)
2. background-image: url('http...')
2.1. background-image的值还可以使用渐变函数而不是图像url
.a { background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); } .b { background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-size: 100px 50px; } <div class="wrapper"> <div class="box a"></div> <div class="box b"></div> </div>
2.2. 还可以设置多个图像：background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
cover—浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外contain— 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
5. background-position, 注意：background-position是background-position-x和background-position-y的简写，它们允许您分别设置不同的坐标轴的值。
1. 书写模式：CSS中的书写模式是指文本的排列方向是横向还是纵向的。writing-mode 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。
2. writing-mode的三个值分别是：
horizontal-tb: 块流向从上至下。对应的文本方向是横向的。vertical-rl: 块流向从右向左。对应的文本方向是纵向的。vertical-lr: 块流向从左向右。对应的文本方向是纵向的。
因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。
3. 当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。
4. 
5. 
6.逻辑属性和逻辑值：CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。
横向书写模式下，映射到width的属性被称作内联尺寸（inline-size）——内联维度的尺寸。而映射height的属性被称为块级尺寸（block-size），这是块级维度的尺寸，纵向书写模式则相反。
7. 逻辑外边距、边框和内边距属性
8.
6). 溢出： CSS中万物皆盒，因此我们可以通过给width和height（或者 inline-size 和 block-size）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，
1. CSS尽力减少“数据损失”，只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。
2. overflow：visible(默认) | auto | hidden | scroll ; 这是个速写(shorthand)属性, 传一个值则代表x,y相同，传两个值第一个代表x，第二个代表y。
- 如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用
overflow: auto。此时由浏览器决定是否显示滚动条。 - CSS中有所谓块级排版上下文（Block Formatting Context，BFC）的概念。现在你不用太过在意，但是你应该知道，在你使用诸如
scroll或者auto的时候，你就建立了一个块级排版上下文。结果就是，你改变了overflow的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。
7). CSS的值与单位
1. 相对长度单位 em 和 rem(root em)
- em: 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
- rem: 相对于根元素的字体大小
2. 百分比
百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
3. 颜色
- 颜色关键词，如red
- 十六进制RGB值，每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每对值表示一个通道—红色、绿色和蓝色。
- RGB 和 RGBA的值: RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于0到255之间的十进制数字表示的。还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。
- HSL 和 HSLA 的值。
hsl()函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：- 色调： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。
- 饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
- 亮度：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)
4， 图片： <image> 数据类型（css中的数据类型用尖括号包起来表示）用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。
5， 字符串和标识符
.box::after { content: "This is a string. I know because it is quoted in the CSS." } <div class="box"></div>
6.
8) .在CSS中调整条目大小
1. 原始尺寸（固有尺寸）：在受CSS设置影响之前，HTML元素有其原始的尺寸。
- 一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。
- 一个空的
<div>是没有尺寸的。它没有高度，或者说高度为0，因为内部没有内容。其高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸 — 由其所包含的内容决定。
2. 外部尺寸：当给元素指定尺寸时，我们将其称为外部尺寸。
3. 把百分数作为内外边距：当你用百分数设定内外边距(包括上下左右内外边距)的时候，值是以内联尺寸进行计算的，也即对于左右书写的语言来说的宽度。
4. min- 和 max- 尺寸：
5. viewport: vh/vw
9) 图像、媒体和表单元素： 在这节课里，我们来看一下，在CSS中，某些特殊元素是怎样处理的。图像、其他媒体和表格元素的表现和普通的盒子有些不同，这取决于你使用CSS格式化它们的能力。理解什么可能做到，什么不可能做到能够省些力气
1. 替换元素：图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。<iframe>也是替换元素。
2. 调整图像大小常用技巧：
- img {max-100%}
object-fit:指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。- 值
cover，缩小了图像，维持了图像的比例。图像的一部分将会被盒子裁切掉。 contain值，图像将会缩放到足以放到盒子里面的大小,可能会产生空隙。fill值，它可以让图像充满盒子，但是不会维持比例。-
// 图片保持宽高比全屏铺满父容器（图片有部分被裁剪掉） img { 100%; height: 100%; object-fit: cover; } <div class="box"> <img src="balloons.jpg" alt="balloons"> </div>
- 值
3. 布局中的替换元素：在css布局中，替换元素 和 其他元素有不同的默认行为，例如，在一个flex或者grid布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。这很必要，避免了他们被布局奇怪地拉伸。
4. form元素
10). 样式化表格
11).调试 CSS
- 任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为您通常无法获得错误消息用于网络搜索来帮助您找到解决方案。 如果您感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。 有时，当您停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。
12). 组织CSS
- 在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式.
- 避免太特定的选择器.
- 将大样式表分成几个小的样式表.你可以将一个页面连接到多个样式表，连接的靠前的样式表里面的规则会比后面的有更高优先级。
1）基本文本和字体样式：元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 <br> 元素。
1. 用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。
- 字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
- 文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
2. font-size : 元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——<html>开始，浏览器的 font-size 标准设置的值为 16px。当调整你的文本大小时，将文档(document)的基础 font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。
html { font-size: 10px; } h1 { font-size: 2.6rem; } p { font-size: 1.4rem; color: red; font-family: Helvetica, Arial, sans-serif; }
3. 字体样式、字体粗细、文本转换、文本装饰
CSS 提供了 4 种常用的属性来改变文本的样子：
font-style: 用来打开和关闭文本 italic (斜体)。 可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)：normal: 将文本设置为普通字体 (将存在的斜体关闭)italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
font-weight: 设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到normal和bold以外的值：normal,bold: 普通或者加粗的字体粗细lighter,bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
text-transform: 允许你设置要转换的字体。值包括：none: 防止任何转型。uppercase: 将所有文本转为大写。lowercase: 将所有文本转为小写。capitalize: 转换所有单词让其首字母大写。full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。
text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为：none: 取消已经存在的任何文本装饰。underline: 文本下划线.overline: 文本上划线line-through: 穿过文本的线strikethrough over the text.
text-decoration可以一次接受多个值，如果你想要同时添加多个装饰值， 比如text-decoration: underline overline.。同时注意text-decoration是一个缩写形式，它由text-decoration-line,text-decoration-style和text-decoration-color构成。你可以使用这些属性值的组合来创建有趣的效果，比如text-decoration: underline overline line-through red wavy.
4. 文字阴影：使用 text-shadow 属性。这最多需要 4 个值，如： text-shadow: 4px 4px 5px red;四 个属性如下:
- 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
- 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
- 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
- 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为
black.
- 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如
-1px -1px. - 您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，如：
text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), 0px 0px 7px rgba(0,0,0,0.4);
5. 文本布局
5.1. 文本对齐： text-align 属性用来控制文本如何和它所在的内容盒子对齐。
left: 左对齐文本。right: 右对齐文本。center: 居中文字justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如hyphens，打破一些更长的词语。
5.2. 行高： line-height 属性设置文本每行之间的高。可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。
5.2.1. 使用无单位的数值则每个line box的行高是此line box中的元素自身的字体大小乘以此无单位数值。 而em则是每个line box的行高都是以设置line-height的元素的字体大小为基础的。
5.2.2, 关于行内盒模型一篇好的博客 、 关于line box(line boxes)
5.2.3. 【自己理解】三个概念：inline box, line box, line boxes. 每个内联元素都有（或者说都是）一个inline box，文字属于匿名inline box。包裹着若干inline box的一行（一个矩形区域） 即称为line box。多行即称为line boxes。每个line box由inline box的盒子模型加上两个半行间距组成，如下图所示：
对于块级元素，设置line-height，即设置块级元素中每一行的line box的高度，如果没有指定块级元素的高度，那么块级元素的高度会随着line-height变化。对于内联元素，设置line-height，也是设置此inline box所在的line box的高度，line-height变化，此内联元素所在的line box的行高也会变化，但是此内联元素的盒子模型（即inline box）不会有变化，变化的是行间距！
5.3. 字母和单词间距: letter-spacing 和 word-spacing
6. 其他一些值得看一下的属性:
Font 样式:
font-variant: 在小型大写字母和普通文本选项之间切换。font-kerning: 开启或关闭字体间距选项。font-feature-settings: 开启或关闭不同的 OpenType 字体特性。font-variant-alternates: 控制给定的自定义字体的替代字形的使用。font-variant-caps: 控制大写字母替代字形的使用。font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。font-variant-ligatures: 控制文本中使用的连写和上下文形式。font-variant-numeric: 控制数字，分式和序标的替代字形的使用。font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。font-stretch: 在给定字体的可选拉伸版本中切换。text-underline-position: 指定下划线的排版位置，通过使用text-decoration-line属性的underline值。text-rendering: 尝试执行一些文本渲染优化。
文本布局样式：
text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。white-space: 定义如何处理元素内部的空白和换行。word-break: 指定是否能在单词内部换行。direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)hyphens: 为支持的语言开启或关闭连字符。line-break: 对东亚语言采用更强或更弱的换行规则。text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。text-orientation: 定义行内文本的方向。word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。
6.
2）list列表样式 ：List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践
1.
3）链接样式： 当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。
1. 链接状态： 第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:
- Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用
:link伪类来应用样式。 - Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用
:visited伪类来应用样式。 - Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用
:hover伪类来应用样式。 - Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接
HTMLElement.focus()) 它可以使用:focus伪类来应用样式。 - Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用
:active伪类来应用样式。
2.
4）web 字体 ： Web字体是一种CSS特性，允许您 指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。
1. 使用web字体的css语法：
-
// 首先，在CSS的开始处有一个@font-face块（注意放在css最开头，因为字体下载了才能用），它指定要下载的字体文件： @font-face { font-family: "myFont"; src: url("myFont.ttf"); } // 然后你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说： html { font-family: "myFont", "Bitstream Vera Serif", serif; }
2 . 查找字体： 字体是由字体铸造厂创建的，并且存储在不同的文件格式中。通常有三种类型的网站可以获得字体：
- 免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)。比如： Font Squirre，dafont 和 Everything Fonts。
- 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com。您也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype 或 Exljbris。
- 在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见Using an online font service。
3. 使用在线字体服务
在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。
大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。
- 前往 Google Fonts.
- 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
- 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
- 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
- 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的
<link>元素之上，使得字体是导入的，然后在你的CSS中使用它。 - 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
四：CSS布局
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：
- 正常布局流
display属性- 弹性盒子
- 网格
- 浮动
- 定位
- CSS 表格布局
- 多列布局
每种技术都有它们的用途，各有优缺点，相互辅助。
1. 正常布局流(Normal Flow) ： 正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。正常布局流的工作方式如下：
首先，取得元素的内容来放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距 --- 就是我们之前看到的盒子模型。
默认的，一个块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致。行内元素的height width与内容一致。你无法设置行内元素的height width。 如果你想控制行内元素的尺寸，你需要为元素设置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)
这样解释了单个元素的布局，但是元素之间又是如何相互影响的呢？ 正常布局流（在布局介绍里提到过）是一套在浏览器视口内放置、组织元素的系统。默认的，块级元素按照基于其父元素的书写顺序(默认值: horizontal-tb)的块流动方向(block flow direction)放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。
行内元素的表现有所不同 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他行内元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。
1.1 . 块元素内容的布局方向被描述为块方向。块方向在英语等具有水平书写模式(writing mode)的语言中垂直运行，在垂直书写模式的语言中水平运行。对应的内联方向是内联内容（如句子）的运行方向。
1.2. CSS中可以改变布局方式的方法有如下：
-
display属性。 display的标准值如block，inline, inline-block 会改变元素在正常布局流中的行为，如可以把块级元素设置为inline。 另外display还有一些值表示全新的布局方式，如CSS Grid 和 Flexbox. - 浮动——应用
float值，诸如left能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。 position属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为static，使用其它值会引起元素不同的布局方式。- 表格布局— 表格的布局方式可以用在非表格内容上，可以使用
display: table和相关属性在非表元素上使用。 - 多列布局— 这个 Multi-column layout 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。
3. 弹性盒子(Flexbox ) ：弹性布局模块详情点此 弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间
3.1. 要使用flexbox，你只需要在想要进行flex布局的父元素(称为flex容器）上应用·display: flex`,所有直接子元素(flex容器的子元素称为flex项)都将会按照flex进行布局。假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex 。
3.2. `flex-direction `属性，它可以指定主轴的方向，默认为row。
3.3. `flex-wrap` 换行
3.4. flex-direction 和 flex-wrap — 的缩写`flex-flow`。比如，你可以将 flex-direction: row; flex-wrap: wrap; 替换为：flex-flow: row wrap;
3.5. flex项的动态尺寸 ·flex ·（子元素上的属性）flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。
flex-grow: 指定flex项伸长规则，默认为0,表示不伸展，负值无效。flex-grow设置了一个flex项主尺寸的flex增长系数（主尺寸是项的宽度或高度，这取决于flex-direction值）。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小（还要减去margin和padding大小）。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。-
flex-shrink:
flex-basis指定了 flex 元素在主轴方向上的初始大小。如果不使用box-sizing改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。当一个元素同时被设置了flex-basis(除值为auto外) 和width(或者在flex-direction: column情况下设置了height) ,flex-basis具有更高的优先级,- 默认值auto，表示使用width的值或内容本身的宽度作为flex-basis的值。
- 如果设置为0，则需要带上单位，以免被视作伸缩性。
- 长度，如200px;也可以是一个相对于其父弹性盒容器主轴尺寸的
百分数。负值是不被允许的。 - ·flex-basis: content·基于 flex 的元素的内容自动调整大小。
-
flex 简写属性可以指定1个，2个或3个值。
单值语法: 值必须为以下其中之一:
- 一个无单位数(
<number>): 它会被当作<flex-grow>的值。 - 一个有效的宽度(
width)值: 它会被当作<flex-basis>的值。 - 关键字
none,auto或initial
- initial：这个值也是flex项不设置flex值时的默认值，元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"
flex: 0 1 auto"。 - auto: 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "
flex: 1 1 auto". - none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"
flex: 0 0 auto"。
- initial：这个值也是flex项不设置flex值时的默认值，元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"
双值语法: 第一个值必须为一个无单位数，并且它会被当作
<flex-grow>的值。第二个值必须为以下之一：- 一个无单位数：它会被当作
<flex-shrink>的值。 - 一个有效的宽度值: 它会被当作
<flex-basis>的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作
<flex-grow>的值。 - 第二个值必须为一个无单位数，并且它会被当作
<flex-shrink>的值。 - 第三个值必须为一个有效的宽度值， 并且它会被当作
<flex-basis>的值。
- 一个无单位数(
3.5.1. 这里有一篇介绍flex计算原理的文章，英文很简单 总结此篇文章如下
- 设置父容器为flex布局而没有做其他任何设置时（不做任何设置的效果亦是flex:initial的效果），flex项水平堆叠，如果空间不够flex项会收缩，而如果空间多余，flex项不会伸长而是保持其原有的初始宽度(初始宽度为内容宽度或设置的width或设置的flex-basis,优先级越来越高)。
- 父容器的宽度减去所有flex项的宽度得到剩余的宽度。将剩余的宽度按比例分配给设置了flex值的flex项（flex值为 none 或 initial 的flex项不参与分配这些剩余宽度），最终flex项的宽度为初始宽度加上按比例分配的宽度，所以比例大的flex项的最终宽度不一定比比例小的flex项宽，甚至有可能比其小。
3.6. 水平和垂直对齐（CSS里总算是有了一种简单的垂直居中布局的方法了！）:
`align-items`（应用在父元素上） 控制 flex 项在交叉轴上的位置。
- 默认的值是
stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。 - 在上面规则中我们使用的
center值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。 - 你也可以设置诸如
flex-start或flex-end这样使 flex 项在交叉轴的开始或结束处对齐所有的值。查看align-items了解更多。 - 你可以用
align-self属性（此属性应用于flex项上）覆盖align-items的行为。
justify-content （应用在父元素上）控制 flex 项 在主轴上的位置。
- 默认值是
flex-start，这会使所有 flex 项都位于主轴的开始处。 - 你也可以用
flex-end来让 flex 项到结尾处。 center在justify-content里也是可用的，可以让 flex 项在主轴居中。- 而我们上面用到的值
space-around是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。 - 还有一个值是
space-between，它和space-around非常相似，只是它不会在两端留下任何空间。
3.7. flex项的排序：弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。给flex项设置order可以指定其排列顺序。
- 所有 flex 项默认的
order值是 0。 - order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
- 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
- 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
- 也可以给 order 设置负值使它们比值为 0 的元素排得更前面。
4. Grid布局: 详细信息参见 Grid Layout ： Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。
4.1. 在css不支持Grid布局之前，经常使用使用float来模拟实现网格布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple grid</title> <style> :root { --col-gutter:2.08333333%; --col- 6.25%; } * { box-sizing: border-box; /* border: 1px solid red; */ } body { margin: auto auto; 90%; max- 980px; /* border:2px solid black; */ } .row { clear: both; } .wrapper { padding-right: var(col-gutter); } .col.offset-by-one { margin-left: calc(var(--col-width) + var(--col-gutter) * 2); } /* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2 { calc(2 * var(--col-width) + var(--col-gutter) * 1); } /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3 { calc(3 * var(--col-width) + var(--col-gutter) * 2); } /* And so on... */ .col.span4 { calc(4 * var(--col-width) + var(--col-gutter) * 3); } .col.span5 { calc(5 * var(--col-width) + var(--col-gutter) * 4); } .col.span6 { calc(6 * var(--col-width) + var(--col-gutter) * 5); } .col.span7 { calc(7 * var(--col-width) + var(--col-gutter) * 6); } .col.span8 { calc(8 * var(--col-width) + var(--col-gutter) * 7); } .col.span9 { calc(9 * var(--col-width) + var(--col-gutter) * 8); } .col.span10 { calc(10 * var(--col-width) + var(--col-gutter) * 9); } .col.span11 { calc(11 * var(--col-width) + var(--col-gutter) * 10); } .col.span12 { calc(12 * var(--col-width) + var(--col-gutter) * 11); } .col { float: left; var(--col-width); margin-left: var(--col-gutter); background-color: rgb(67, 231, 116); text-overflow: ellipsis; overflow: hidden; } </style> </head> <body> <div class="wrapper"> <div class="row"> <span class="col">11111111111111111111111111111111111111111111111111111111111111111111111111111111111</span> <span class="col">2</span> <span class="col">3</span> <span class="col">4</span> <span class="col">5</span> <span class="col">6</span> <span class="col">7</span> <span class="col">8</span> <span class="col">9</span> <span class="col">10</span> <span class="col">11</span> <span class="col">12</span> </div> <div class="row"> <div class="col span1">1333333333333333333333333333333333333333333333333333333333333333333333333333333333</div> <div class="col span5 offset-by-one">14</div> <div class="col span3">15</div> <div class="col span2">16</div> </div> </div> </body> </html>
4.2.
以下介绍的其他的布局方式，它们与你的页面的主要布局结构关系不大，但是却能够帮助你实现特殊的操作。同时，只要你理解了每一个布局任务的初衷，你就能够马上意识到哪一种布局更适合你的组件。
5. 浮动(float）：
- 把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动(
float)的元素周围环绕。 - 浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。
- 浮动元素脱离正常布局流，周围的元素的盒子模型当做其不存在，但是周围元素中的内容会看到浮动元素，且会看到浮动元素设置的margin。
5.1. float 属性有四个可能的值：
left— 将元素浮动到左侧。right— 将元素浮动到右侧。none— 默认值, 不浮动。inherit— 继承父元素的浮动属性。
5.2. 设置float:left 时，浮动元素 (这个例子中的<img> 元素)会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的<body>元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右侧的文字紧贴着图片。
- 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
- 浮动元素脱离了正常文档流，浮动元素周围元素的盒子模型会无视这个浮动元素，但是浮动不是真正意义上的脱离文档流，因为周围元素的文字可以看到浮动元素，而且浮动元素也会相互看到。
- 当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
5.2. 浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪：
- 首先，他们在父元素中所占的面积的有效高度为0（因为：浮动元素脱离正常布局流，周围的元素的盒子模型当做其不存在）。在父容器的底部放置一个元素然后设置清除浮动可以让父容器的高度恢复正常。
- 其次，非浮动元素的外边距不能用于在它们和浮动元素之间创建空间，即非浮动元素设置的外边距无法将自己和浮动元素弹开。解决方法是在浮动元素和需要弹开的元素之间放置一个专门用来清除浮动的空元素，通常给此空元素添加一个名叫‘clearfix’ 的类，又叫clearfix块。
5.3. 清除浮动： 当给一个元素设置 clear 属性时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另一个元素。
5.4.
6. 定位：定位(positioning)并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。
6.1. 文档流：定位的预备知识
- 首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 盒模型 ，默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高（另外关于高度设置一个百分比有时候不生效的原因：设置百分比是相对于父容器的高度的百分比，如果父元素没有显式的高度，那么子元素设置的百分比高度是无效的！最父级的元素是<html>，通常要将其设置为height:100%，其子元素设置百分比高度才能生效, html元素宽度默认是浏览器视口宽度，所以不显式设置也是有宽度值的）。内联元素高宽与他们的内容高宽一样，不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。
- 上面解释了单个元素，但是元素之间是如何交互的呢？正常的布局流是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠。
6.2. 介绍定位：定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。有五种主要的定位类型需要我们了解：
- 静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
- 相对定位(Relative positioning)允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
- 相对定位与静态定位非常相似，占据在正常的文档流中,区别是可以使用top,left,bottom,right控制相对定位元素的位置。其他元素的位置不受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
- 相对定位的元素不脱离正常文档流，使用top right bottom left可以使其偏离正常位置。周围的元素仍然认为此元素位于正常的位置，即其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
- 绝对定位(Absolute positioning)将元素完全从页面的正常布局流(normal layout flow)中移出（脱离正常文档流，如果一个元素脱离文档流，那么它不再占据文档流的空间，后面的元素会填补此空间），类似将它单独放在一个图层中，其他元素当做其不存在。我们可以将元素相对于页面的
<html>元素边缘固定，或者相对于该元素的最近被定位祖先元素(nearest positioned ancestor element，即postion属性不为static的最近的祖先元素，此祖先元素也被称为绝对定位的上下文)。top,left,bottom,right属性指定元素应距离最近被定位的祖先元素的边的距离。- 使用border画出三角形 这篇文章里关于绝对定位的例子说明了：
- 1. 绝对定位的区域是基于绝对定位父元素的
padding区域。 - 2. 元素设置了position:absolute之后，此元素如果没有显式设置宽高，则此元素宽高会收缩到元素内容的尺寸。设置了浮动的元素也是如此。
- 1. 绝对定位的区域是基于绝对定位父元素的
- 如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。此时绝对定位元素相对于页面的html元素定位。注意这种情况和固定定位不同，此种情况会随滚动条滚动，固定定位不会滚动。
- 一个冷门知识点：如果一个元素有 transform,prospective,filter属性，且值不为none，那么这个元素也可以成为absolute和fixed定位的包含块(Containing Block)，即相对于这个元素定位。
- 使用border画出三角形 这篇文章里关于绝对定位的例子说明了：
- 固定定位(Fixed positioning)与绝对定位工作方式完全相同（脱离正常文档流），区别是固定定位将一个元素相对浏览器视口固定，而不是相对另外一个元素。 这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
- 粘性定位(Sticky positioning)是一种新的定位方式，它会让元素先保持和
position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位。
6.3. z-index：定位的元素(relative, absolute, fixed,sticky)在z轴上的顺序如下：
- 定位的元素胜过未定位的元素，即定位元素在上，未定位的元素在下。
- 按代码顺序，后定位的胜过先定位的元素。
- z-index的默认值为auto，实际就是0. z-index值大的胜过值小的。
6.4.
7. 多列布局
7.1.
8. 响应式设计 (响应式设计的来龙去脉讲的很清晰)
8.1.
9. 媒体查询入门指南
9.1
@media media-type and (media-feature-rule) { /* CSS rules go here */ }
10.
------------------------MDN教程结束------------------
随记：
1. var() 使用CSS 自定义属性（变量）。
2. text-overflow: ellipsis。 注意这个属性要将overflow 设置为hidden才能生效。
3.
关于CSS布局的一篇教程： 来源：http://zh.learnlayout.com/index.html
1.display属性： 一个块级元素会新开始一行并且尽可能撑满父容器。
2.max-width很有用
3. box-sizing: conent-box / border-box.
5 clearfix hack：两种方式解决float元素溢出父元素：①clearfix hack,即在父元素最底部一个空的带有clear：both属性的div。, ②父元素上创建一个BFC，比如设置overflow属性，除visible之外的值(包括auto)可以创建一个Block Formatting Context。
6. 百分比布局： 又叫流式（fluid） 布局。和响应式布局并不是一回事。响应式布局是一系列技术的应用综合。
7.inline-block布局：
- vertical-align 会影响到inline-block元素。（vertical-align属性只能用于inline，inline-block，table-cell 元素，不用用于块级元素的垂直对齐。）
- 你需要设置每一列的宽度。
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。
8. 常见的CSS框架：
CSS布局10问：https://css-tricks.com/how-well-do-you-know-css-layout/
问题4. 关于边距折叠margin collapse(详情点此链接！)：有两种形式的margin collapse (第三种空元素没啥实用价值)。注意只有上下margin才会发生折叠，左右margin不会。另外，floating and absolutely positioned elements never collapse。还有 ，外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间（例如：flex布局中的flex项会创建一个BFC，所以flex项之间不会发生margin折叠），所以可以通过创建一个新的BFC消除边距折叠的问题。
- 1. Adjacent Siblings Collapsing Margins: 此种情况注意关键词【相邻兄弟】，相邻兄弟是DOM结构意义上的相邻，而不是视觉上的相邻！
- 2，Parent and First/Last Child Collapsing Margins：If there is no border, padding, inline part, block formatting context created, or clearance to separate the
margin-topof a block from themargin-topof one or more of its descendant blocks; or no border, padding, inline content,height,min-height, ormax-heightto separate themargin-bottomof a block from themargin-bottomof one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent。效果是第一个孩子的margin-top会“贡献”给父元素。通过给父元素设置大于0的padding或border或内联元素(包括文字)可以阻止第一个孩子的margin-top折叠到父元素上。或者通过在父元素上创建一个BFC来阻止margin折叠。
问题5：百分比单位 和 包含块(Containing Block）：
- 某元素的某些css属性(
height,top,bottom,)设置为百分比时，是相对于此元素的包含块的百分比。通常情况下，某元素的包含块是此元素最近的块级祖先元素的content area。但是也有例外，包含块的具体确定方法如下：width,left,right,padding,margin,offset相关属性 - 包含块的确定 取决于 此元素的position属性：
- 当position值为static、relative、sticky时，containing block 是最近的 块级 或 建立了BFC(如：table container, flex container, grid container，overflow: auto等等) 的祖先元素的 content box 。
- 当position值为absolute时，containing block 是最近的非static定位的祖先元素的padding box。
- 当position值为fixed时，the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).
- 另外，当position值为absolute和fixed时，containing block亦可以是最近的有以下css属性的祖先元素的padding box。
- 值不为none的
transformperspective、filter属性 - 值为
transformperspective、filter的 will-change属性 - 值为paint的contain属性，即 contain: paint
- 值不为none的
- 一个元素的transform属性本身用到百分比时(不属于上面的某些css属性)，此百分比是相对于此元素本身的宽高计算的，如 transform：translateX(50%), 这里的50%是相对于此元素自己的尺寸而不是相对于其最近的祖先元素。
问题6：答案是第一个。绝对定位时，给绝对定位的元素同时设置 left:0;right:0;可以使其content box的宽度自动适配border和padding之外的剩余宽度。
问题7：答案是第二个。一个 absolute或 fixed定位的元素需要上下左右都居中时，使用了top:50%,left:50%后，还需要计算消除此元素本身的宽高的影响，方法有两个：一是使用负的margin值，二是使用transform:translate(-50%,-50%)。
问题8：答案是第一个。正常布局流中的水平垂直居中方法，使用flex布局非常简单。至少有两种方法：
-
.parent { display: flex; } .child { margin: auto; }// 注意flex布局中 margin的用处很大，很多妙用
-
.parent { display: flex; align-items: center; //flex项 设置align-self属性可以覆盖父容器的设置 justify-content:center;// flex项 设置justify-self 无效！ justify-self 属性在flex布局中会被忽略。同样justify-items在flex布局中也会被忽略。 }
额外的例子： calc()函数 和 负的margin值 的妙用！
1. 块格式化上下文（Block Formatting Context）：
- 整个页面布局是一个大的BFC，若在正常布局流中的一个元素创建了一个BFC，则注意此BFC元素和其周围的元素处于同一个整个页面布局的BFC中，但是此BFC中的元素和外面的元素不是出于同一个BFC中，注意理解这段话的意思。
- BFC 是一个mini布局，它会包含它内部的一切。这一规则可以解决 float元素溢出 以及父元素和首个/末尾 子元素的margin折叠问题。
- BFC 区域不会 包裹 float 元素。所以传统CSS可以用float完成多列布局。
- 使用display:flow-root 创建一个BFC，不会引起其他副作用，flow-root意思是 创建一个类似于文档根元素(浏览器中的<html>元素)的东西，在里面创建一个上下文进行类似于 正常流 布局的 流布局(flow layout)。
- 总之，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也不会影响到里面的元素。上面几条都可以用此条规则解释：因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
-
下列方式会创建块格式化上下文：
- 根元素（
<html>） - 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值）// 每个表格都创建了一个BFC - 表格标题（元素的
display为table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或inline-table） overflow值不为visible的块元素display值为flow-root的元素contain值为layout、content或 paint 的元素- 弹性元素（
display为flex或inline-flex元素的直接子元素）// 弹性布局中的 BFC 叫做 FFC(Flex Formatting Context) - 网格元素（
display为grid或inline-grid元素的直接子元素）// 网格布局中的BFC 叫做GFC(Grid Formatting Context) - 多列容器（元素的
column-count或column-width不为auto，包括column-count为1） column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
- 根元素（
2. IFC（Inline Formatting Contenx):