这是我参与「第四届青训营 」笔记创作活动的第1天
关于字体
字体 font-family (重要)
比如在style中，定义如下内容：
h1 { front-family: Optima, Georgia, serif; }
用逗号分隔开多个字体族，指定多个字体从前到后供用户选择用户设备上的已安装字体。
通用字体族：
- serif-衬线体
- Sans-Serif-无衬线体
- Cursive-手写体
- Fantasy-较夸张的字体
- Monospace-等宽字体
当网页中英文混排的时候，英文字体无法显示中文字体，但中文字体可以显示英文字体，所以英文字体需要写在中文字体前面才较美观（否则会出现英文字体用中文字体显示）
Web Fonts 显示字体
中文和英文都可以使用web fonts，但是中文字体比较大，会造成性能的一些开销，可以通过对需要的字符进行保留，不需要的字符进行裁切的操作来解决这个问题。
font-size 字的大小
- 关键字 small medium large
- 长度 px em
- 百分数 相对于父元素字体大小
字重 font-weight 字体的粗细
line-height 行高
一般来说，用1.6比较合适
text-align 文字对齐
- left 左对齐
- center 居中
- right 右对齐
- justify 自适应
spacing
- letter-spacing 字母间隔
- word-spacing 单词间隔
text-indent
表示一句话开头距离顶格的间隙
white-space 处理换行与空白符
- normal 有多个空格会合并成一个
- nowrap 强制不换行，并且把空格
- pre 保留所有（包括空格和换行）
- pre-wrap 保留空格，一行内显示不下时作换行操作
- pre-line 合并空格但保留换行
调试CSS
当遇见一个比较感兴趣的页面想了解该页面的CSS，可以使用以下方法进行查看：
- 右键点击页面，选择“检查”
- 使用快捷键
- ctrl+shift+I(windows)
- ctrl+Opt+I(MAC)
规则优先级
选择器特异度（spectificity)
计算方法：
图中第一行表示有1个id，2个类，2个标签。 优先级：id>类>标签，根据优先级选择规则。 例子：
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
初始值
- CSS中，每个属性都有初始值
- margin-left 的初始值为0
- 可以使用initial关键字显示重置为初始值
- background-color:initial
布局
- 确定内容的大小和位置的算法、
- 根据元素、容器、兄弟节点个内容等信息进行计算
布局相关技术
- 常规流
- 浮动
- 绝对定位 可以直接覆盖在常规流上面，而不会对常规流有影响。
weight and hight 宽度和高度
padding 内边距
指定四个方向的内边距，百分数相对于容器宽度。
border 边框
指定容器边框样式、粗细和颜色
box-sizing:border-box
表示包括边框在内，占整个页面的100%，比较常用
margin 外边距
指定四个方向的外边距，取值可以时长度、百分数、auto，百分数相对于容器宽度。
overflow
控制box里面的内容若超出该如何处理
- visible 直接显示出来
- hidden 隐藏，只显示部分
- scroll 超出则可以滚动显示
