一、盒子模型
1、盒子模型概念：用来“放”网页中的各种元素；网页设计中内容，如：文字、图片等元素，都可是盒子（DIV嵌套）
2、宽度属性：max-width/min-width/width：长度值 | 百分比 | auto
高度属性：max-height/min-height/height：长度值 | 百分比 | auto（设置块级元素和替换元素的内容高度）
3、可设置高和宽的元素：块级元素，如：<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dt> <dd>等
替换元素，浏览器根据其标签的元素与属性来判断显示的具体内容，如：<img> <input> <textarea>等
4、边框属性(边框的四个方向样式一样)：a、边框宽度(border-width：thin | medium | thick | 长度值)：设置元素边框宽度
b、边框颜色(border-color)
c、边框样式(border-style)
边框缩写：border(+top / left / right / bottom)：[宽度] | [样式] | [颜色]
5、内边距缩写：padding：值1 // 4个方向都为值1
padding：值1 值2 // 上下为值1，左右为值2
padding：值1 值2 值3 // 上为值1，左右为值2，下为值3
padding：值1 值2 值3 值4 // 上为值1，右为值2，下为值3，左为值4
6、外边距属性：margin(+top / right / bottom / left)：长度值 | 百分比 | auto（值可为负值，当margin值为auto时，实现水平方向居中显示效果，由浏览器计算外边距）
说明：垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后外边距高度=两个发生合并外边距的高度中最大值
盒子模型计算：宽度：左边距+左边框+左填充+内容高度+右填充+右边框+右边距
高度：上边距+上边框+上填充+内容高度+下填充+下边框+下边距
说明：如果没有Doctype文档类型声明，各浏览器按照自己的方式解析，如果有，按照标准盒子模型来解析
7、样式继承关系：
| 样式属性 | 继承 | 说明 |
| width height | 不继承，块级元素、替换元素 | 对于样式属性，通过设置值为inherit，指定从父元素继承相对属性值 |
| padding | 不继承 | |
| margin | 不继承 | |
| border | 不继承 |
display属性：a、inline：元素将显示为内联元素，元素前后没有换行符
b、block：元素将显示块级元素，元素前后会有带换行符
c、inline-block：行内块元素，元素呈现为inline，具有block相应特性
d、none：此元素不会被显示
二、背景样式
background-color：设置元素的背景颜色
background-image：把图像设置为背景
background-position：设置背景图像的起始位置
background-attachment：背景图像是否固定或者随着页面的其余部分滚动
background-repeat：设置背景图像是否重复及如何重复
background：简写属性，作用是将背景属性设置在一个声明中
三、列表样式
list-style-type：设置列表项标志的类型
list-style-image：将图像设置为列表项标志
list-style-position：设置列表中列表项标志的位置（inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐 | outside：默认值，放置在标记以外，且环绕文本不根据标记对齐）
list-style（包括以上三种）：简写属性，用于把所有列表的属性设置于一个声明中（说明：值之间用空格分隔，顺序不固定，image类会覆盖type的设置）
1、无序列表：
| 值 | 说明 |
| none | 无标记 |
| disc | 实心的圆心 |
| circle | 空心的圆心 |
| square | 实心的方块 |
2、有序列表：
| 值 | 说明 |
| none | 无标记 |
| decimal | 从1开始的整数 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
3、Float课程总结：会使元素左右移动，浮动元素会脱离普通流，元素浮动后具备inline-block(行内块元素)属性
4、清除浮动方法：1、使用CSS3：:after伪元素清除浮动；2、使用overflow:hidden 清除浮动
5、CSS定位机制：a、普通流(标准流)；b、浮动；c、绝对定位
6、清除浮动：clear:none | left | right | both (clear只会影响自身，不会对其他相邻元素造成影响)
常用方法：方法1：在浮动元素后使用一个空元素；方法2：给浮动元素的容器添加overflow:hidden；方法3：使用CSS3的:after伪元素
清除浮动其他方法：1、父级元素定义height，只适合高度固定的布局
2、父级元素也一起浮动，不推荐，会产生新的浮动问题
7、Positioned Layout Module：提供与元素定位和层叠相关功能，它是核心模块（1、盒子模型的类型和尺寸；2、布局模型；3、元素之间的关系；4、视口大小、图像等其他相关方面）
8、static：自然模型 relative：相对定位模型 absolute：绝对定位模型 fixed：固定定位模型 sticky：磁贴定位模型