1 回顾
1.1 盒子模型
1. 盒子的显示模式
2. 盒子的组成
3. 内容
4. 内边距 padding
5. 内边框 border
6. 外边距 margin
设置外边距 margin/margin-left/margin-right/marign-top/margin-bottom
外边距的值：长度，可以是负值，可以是 auto
块级元素和行内块元素都可以完美地设置外边距，行内元素可以完美设置左右外边距，上下外边距无法设置。
margin 塌陷； 第一个子元素的上外边距和最后一个子元素的下外边距会塌陷给父元素； 解决：父元素设置不为0的边框或者内边距；或者父元素设置 overflow 不为 visible
margin 合并：上一个兄弟下外边距和下一个兄弟的山外边距会合并，取较大的值。
7. 内容溢出
overflow: visible / hidden / scroll / auto
8. 元素隐藏
display: none;
visibility: hidden;
1.2 样式继承和默认样式
样式继承：
字体属性、文本属性（除了vertical-align）、文字颜色、鼠标样式可以继承
默认样式：
有些元素具有默认的样式，
默认样式优先级大于继承的样式
1.3 行内或行内块块元素文本特性
行内元素或行内块元素会被它的父元素当做文本处理，给父元素设置文本属性，能够影响行内块或行内元素
让行内块元素或行内元素在父元素中水平居中和垂直居中
行内块或行内元素之间的空白：
因为写代码的换行
解决：不写换行 或者 设置父元素font-size:0
行内块或行内元素底部的空白（幽灵空白）：
原因： 行内块或行内元素与文字基线对齐，空白是基线与底线的距离。
解决： 方案一： 给行内或行内块设置 vertical-align 不为 baseline
方案二： 给父元素设置字体大小为 0.
方案三： 针对于图片，设置为块。
1.4 浮动
① 浮动元素的特点
1. 脱离文档流
2. 不会独占一行，可以与其他浮动的元素共用一行。
3. 默认宽高被内容撑开，可以设置宽高。
4. 完美设置内外边距，
5. 不会被当做文本处理。
② 浮动元素的影响和解决
影响：
1. 后面的兄弟元素
2. 影响父元素，父元素的高度塌陷
解决：（对父元素的影响）
方案一： 父元素指定高度
方案二： 父元素也浮动
方案三： 父元素设置 overflow 不为 visiible
方案四： 在父元素最后面添加一个块级子元素，设置 clear:both
方案五： 利用伪元素选择器，动态给父元素添加最后一个子元素，设置 clear:both
.parent::after {
content:"";
display: block;
clear:both;
}
2 定位
2.1 相对定位
① 如何设置相对定位
给元素设置 CSS 属性 position:relative ，该元素就成为相对定位的元素了。
相对定位的元素，可以使用 left、right、top、bottom 四个 css 属性进行位置调整。
② 相对定位元素定位的参考点
相对定位的元素参照自己原来的位置进行定位
③ 相对定位元素的特点
- 不会脱离文档流，不会对其他元素产生任何影响。
- 相对定位元素效果上位置调整，但是文档流中任然保留原来的位置，其他元素会按照它原来的位置在文档流中排列。
- 相对定位的元素可以设置为浮动。
注意：
一般，相对定位会用于与绝对定位配合！
2.2 绝对定位
① 如何设置绝对定位
给元素设置 CSS 属性 position: absolute，该元素就成为绝对定位的元素了。
绝对定位的元素，可以使用 left、right、top、bottom 四个 css 属性进行位置调整。
② 绝对定位元素定位的参考点
绝对定位的参数参照它的包含块进行定位。（绝对定位元素参照第一个定位的祖先元素进行定位）。
普通元素（没有脱离文档流的元素）的包含块是父元素；绝对定位元素的包含块是第一个定位的祖先元素（从父元素开始往上），如果祖先元素都没有定位，包含块就是根元素（整个页面）。
③ 绝对定位元素的特点：
- 脱离文档流，会对其他元素产生影响。
- 绝对定位与浮动不能同时设置，如果同时设置，会变为定位元素。
- 任何显示模式的元素（行内、行内块、块级）设置为绝对定位之后，就变为绝对定位元素，与原来的显示模式无关。
- 默认宽高都是被内容撑开。
2.3 固定定位
① 如何设置为固定定位
给元素设置 CSS 属性 position: fixed，该元素就成为固定定位的元素了。
固定定位的元素，可以使用 left、right、top、bottom 四个 css 属性进行位置调整。
② 固定定位的元素定位参考点
固定定位的元素参照视口进行定位。固定定位元素的包含块就是视口。
③ 固定定位元素的特点
- 脱离文档流会，对其他元素产生影响。
- 固定定位与浮动不能同时设置，如果同时设置，会变为定位元素。
- 任何显示模式的元素（行内、行内块、块级）设置为固定定位之后，就变为固定定位元素，与原来的显示模式无关。
- 默认宽高都是被内容撑开
2.4 定位层级 z-index
定位的元素显示层级比普通元素高，不论什么定位，显示层级是一样的；如果位置发生重叠，默认，后面的元素显示在前面元素上面。
可以通过 css 属性 z-index 调整元素的显示层级，z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
2.5 定位相关 CSS 属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| position | 设置元素的定位方式 | static：不定位，默认值 relative：相对定位 absolute：绝对定位 fixed：固定定位 |
| left | 左边与参照点的距离 | 长度 |
| right | 右边与参照点的距离 | 长度 |
| top | 上边与参照点的距离 | 长度 |
| bottom | 下边与参照点的距离 | 长度 |
| z-index | 设置显示层级 | 数字（没有单位），默认值 auto |
注意：
一般，left 不与 right 同时设置，top 不与 bottom 同时设置； 如果同时设置，只有 left 和 top 会生效。
如果定位的元素没有设置宽度，left 和 right可以同时设置并生效；如果定位的元素没有设置高度，top和bottom可以同时设置并生效。
2.6 定位的特殊应用
注意： 这里只针对绝对定位和固定定位的元素，不包括相对定位的元素。
① 定位元素的默认宽度
固定定位和绝对定位的元素默认宽高都是被内容撑开；相对定位看元素本来是哪一种显示模式。
如果想设置定位元素宽度与包含块宽度一致，可以给定位元素同时设置 left 和 right 为 0；高度想与包含块一致，top 和 bottom 设置为 0。
② 定位元素在包含块中水平垂直都居中
方案一：
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
方案二：
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
**注意：**该定位的元素必须设置宽高！！！
3 布局
3.1 页面组成
页头 header page-header
导航 nav navigator navbar
搜索框 search / search-box
banner 横幅广告
主要内容 content main
侧边栏 aside sidebar
页脚 footer page-footer
3.2 样式重置
reset.css
把元素的默认样式都重置，内外边距会重置为0
统一默认样式在浏览器上的表现
normalizie.css
重新设置了元素的默认样式，主要是内外边距
统一默认样式在浏览器上的表现
3.3 页面版心
PC 页面一般都有一个宽度固定且居中的版心。
版心的类名通常会取名 container
