CSS
- Cascading Style Sheets
- 用来定义页面元素的样式
在页面中使用CSS
1.外链
<link rel="stylesheet" href="/assets/style.css">
2.嵌入
<style>
li{ margin: 0; list-style: none; }
p{ margin: lem 0; }
</style>
3.内联
<p style="margin:lem 0">Example Content</p>
CSS工作过程
选择器Selector
1.按照标签名、类名（.class）或id（#id）
2.按照属性（eg.input[type="password"];a[href^="#"]）
3.按照DOM树中的位置
4.通配选择器（*）
5.伪类选择器（eg.a:link;a:visited;li:first-child）
6.组合选择器
7.选择器组（eg. body,h1,h2{};）
颜色
1.RGB（eg.rgba(255,0,0)） R-red G-green B-blue
2.HSL（eg.hsla(0,100%,50%))
H-Hue（色相）：色彩基本属性，如黄色、红色等；取值范围0-360
S-Saturation（饱和度）：色彩鲜艳程度，越高越鲜艳；取值范围0-100%
L-Lightness（亮度）：颜色明亮程度，越高颜色越亮；取值范围0-100%
3.alpha透明度
1为完全不透明 0为完全透明
eg.#ff0000bg;rgba(255,0,0,0.5);hsla(0,100%,50%，0.5）
字体font-family
字体列表最后写上通用字体族
英文字体放在中文字体前面
使用Web Fonts
<style>
@font-face{
font-family: "Megrim";
src:url()format('woff2');
}
font-size
关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体大小
font-style
正常：normal
斜体：italic
font-weight
字体粗细
100-900
normal：400
bold：700
line-height
行间距
1.具体px
2.无单位数字 eg.line-height:1.6 意思是font-size的1.6倍
font
font:style weight size/height family
斜体 粗细 大小/行高 字体族
eg.font:bold 14px/1.7 Helvetica, sans-serif;
text-align
left center right justify（两端对齐）
spacing
letter-spacing：字母间距
word-spacing：单词间距
text-indent
文字缩进
text-decoration
文字修饰
none：无任何修饰
underline：下划线
line-through：删除线
overline：上划线
white-space
normal：html空白符多个变一个
nowrap：永远不换行
pre：保留所有空格
pre-wrap：一行显示的下则不换行；一行显示不下则换行
pre-line：合并空格，保留换行
选择器的特异度（Specificity）
id:100
(伪)类：10
E标签：1
选择器特异度相加，显示高特异度的选择器
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
显示继承：不可继承变成可继承属性
*{
box-sizing: inherit;
}
恢复初始值： eg.background-color: initial
CSS求值过程
布局
常规流（文档流）：行级、块级、表格布局、FlexBox、Grid布局
盒模型
padding：10px （四个方向都是10px）
padding：10px 20px（上下10px 左右20px）
padding：10px 20px 10px 20px（上右下左）
百分数相对于容器的宽度
margin：auto水平居中
margin collapse 边距取最大（垂直方向）
overflow：
visible：全显示
hidden：隐藏
scroll：滚动
块级盒子：不和其他盒子并列摆放；适用所有的盒模型属性
eg.body、article、div、main、section、h1-6、p、ul、li
行级盒子：和其他行级盒子一起放在一行或拆开成多行；width、height不适用
eg.span、em、strong、cite、code
display
block:块级盒子
inline：行级盒子
inline：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none：排版时完全被忽略
常规流Normal Flow
根元素、浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
Inline Formatting Context（IFC）
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则：
1.盒子在一行内水平摆放
2.一行放不下时，换行显示
3.text-align决定一行内盒子的水平对齐
4.vertical-align决定一个盒子在行内的垂直对齐
5.避开浮动（float）元素
块级排版上下文
Block Formatting Context（BFC）
某些容器会创建一个BFC
1.根元素
2.浮动、绝对定位、inline-block
3.Flex子项和Grid子项
4.overflow值不是visible的块盒
5.display:flow-root;
BFC内的排版规则：
1.盒子从上到下摆放
2.垂直margin合并
3.BFC内盒子的margin不会与外面的合并
4.BFC不会和浮动元素重叠
Flex Box
一种新的排版上下文
它可以控制子级盒子的摆放的流向（向右、向左、向上、向下）、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行
flex-direction（主轴方向）
justify-content（水平对齐）
align-items（垂直对齐）
order（从小到大顺序排放）
Flexibility
可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
flex-grow：有剩余空间时的伸展能力
flex-shrink：容器空间不足时收缩的能力；默认为1；0时不能压缩
flex-basis：没有伸展或收缩时的基础长度
Grid布局（二维布局）
display：grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列
grid-template-columns（列）
grid-template-rows（行）
1fr（1份）
grid line网格线
grid-row-start：1
grid-column-start：1
grid-row-end：2
grid-column-end：2
grid-area：1/1/2/2
浮动
图文环绕
position属性
static：默认值，非定位元素
relative：相对自身原来位置偏移，不脱离文档流；流内其他元素当它没有偏移一样布局
absolute：相对定位，相对于最近的非static祖先元素定位；不对流内元素布局造成影响
fixed：相对于视口绝对定位
