2
CSS 是一门描述性语言，它规定了HTML文档该如何显示。
CSS 是一门描述性语言，它规定了HTML文档该如何显示。
CSS由一条条的规则组成。以下是一条规则：
body { line-height: 1.8em; } /* CSS3：从 1 开始数， 即1代表第一个元素 */ p:nth-child(2n+0){ background-color: #a6e1ec; }
选择器 { 属性: 值; }
其中： 规则 = 选择器 + 声明块。(rule = selctor + declaration block) 声明块 = 花括号 + 框住的内容(也就是声明，declaration) 声明 = 属性: 值; (property: value;)
The ::first-letter pseudo-element
Similarly, ::first-line can be used to affect the first line of text in an element.
For example, you could make the first line of each paragraph in a document large and purple
除了以选择器开头的CSS规则外，还有以@开头的规则。以下是@规则的几种示例： @import "./theme.css"; @import "./static/theme.css" (max-width:640px); @media print { body {color: black;} } @media (max-width:640px) and (min-width:320px){ body {color: blue;} } 注：max-width:640px 当显示宽度 不小于 640px时，就采用这个规则集 @supports (color:black) {} 注：如果支持颜色为黑色，那么{}内的规则生效
层叠样式表(CSS)，顾名思义，样式可以通过一层一层地叠加，如同化妆、穿衣服一样。 穿衣服是讲究顺序的，要先穿内衣做穿外衣；这个讲究的顺序，就是层叠。
1 根据样式文件的来源，从里到外的顺序是： 浏览器默认样式 > 外部加载的样式 > HTML文档内部的样式标签 > HTML标签内的内联样式。
2 根据规则的先后顺序，先声明的在里，后声明的在外。
3 根据选择器的优先级，级别低的在里，级别高的在外。
显然，在外的样式会遮住里面的样式。
在源文档中的每个元素和每个字符串，被转化成一系列的盒子(a set of boxes)。 盒子的尺寸、位置、在画布上的堆叠次序(stacking level)，取决于它们的css属性。 比如像 margin、padding 属性，这些属性在盒子的里面和周围开创空间。
盒模型中的所有属性都适用于 ::first-line 和 ::first-letter 伪元素(pseudo-elements)。
每个盒子都有一片内容区(content area)，以容纳文本、图像、子盒子等等内容； 还有围绕它周边的、可选的 padding, border, and margin areas; 其中margin的取值还可以为负数。
代码示范：margin的声明
body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */ }
盒装模型布局: display + position + float
设置容器的display: grid 或 inline-grid，那么就对容器内的子元素(以下称之为项目 grid item)进行了grid布局。
容器子元素(又称之为项目)的float、vertical-align和column-*、 display: inline-block、display: table-cell等设置都将失效。
grid容器的专有属性 划分列 grid-template-columns: 100px 100px 100px; 可写为 repeat(3,100px); 划分行 grid-template-rows: 10% 15% 25% 10% 15% 25%; 可简写为 repeat(2,10% 15% 25%) 特殊值 grid-template-columns: 100px 1fr 2fr minmax(100px, 1fr); fr是fraction的简写 minmax在(min,max)之间 特殊值 repeat(auto-fill, 100px); repeat(auto-fit, 100px); fill与fit的区别 在单元格宽度不固定的时候，auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。 区块名 grid-template-areas: 'a b c' 'd e f' 'g h i'; 未指定的 grid-auto-rows: 50px; 未指定的 grid-auto-columns: 50px; 项目序 grid-auto-flow: [row] column; grid-template := grid-template-rows / grid-template-columns grid-template-areas grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit; grid := grid-template grid-auto-rows、grid-auto-columns、grid-auto-flow。 grid: 160px / auto auto auto; 三列网格布局，并设置第一行高度为 160 像素
项目的位置指定：定位在哪根网格线。 grid-column-start: 2; 左边框是第二根垂直网格线 grid-column-end: 4; 右边框是第四根垂直网格线。 grid-column-start: span 2; 左边框距离右边框跨越2个网格 grid-row-start 和grid-row-end 与之相仿。 grid-column := grid-column-start / grid-column-end grid-row := grid-row-start / grid-row-end grid-area属性指定项目放在哪一个区域。 grid-area: e; 可以给定名称 grid-area: row-start / column-start / row-end / column-end; 也可以指定网格线 项目的对齐 place-items:= align-items justify-items; 左右位置 justify-items: start | end | center | stretch; 上下位置 align-items: start | end | center | stretch; 覆盖容器 justify-self: start | end | center | stretch; 覆盖容器 align-self: start | end | center | stretch; place-self: align-self 和 justify-self 的合写 start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）
1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
1
2
3
4
1
2
3
4
1
2
3
4
1
2
设置元素的样式 display: flex; 或 display:inline-flex; 那么元素就设成了flex容器(flex-container)，其子元素成为了项目(flex item)， flex容器和项目构成了一个flex布局。
flex-container有两条轴和两把尺子. 称之为main-axis, main-size; cross-axis, cross-size.
对于容器内的子元素来说, 其对应的"float, clear, vertical-align" 属性失效。