1.CSS样式
- display
- 用来设置元素的显示类型
- 可选值：
none 元素不会在页面显示，并且不会占据页面的位置
block 元素作为块元素显示
inline 元素作为内联元素显示
inline-block 元素作为行内块元素显示
- visibility
- 用来设置元素的显示状态
- 可选值：
visible 默认值，元素在页面中可见
hidden 元素在页面中隐藏，但是会占据页面的位置
- overflow
- 设置元素如何处理溢出的内容
- 可选值：
visible 默认值，溢出的内容会在父元素以外的位置显示
hidden 溢出的内容会被裁剪不会显示
scroll 会为父元素添加水平和垂直双方向的滚动条以完整的查看内容
auto 会根据需要自动添加滚动条
2.文档流
- 文档流指的是网页中的一个位置，文档流可以说是网页的基础，
我们所创建的元素默认情况下都在文档流中。
- 元素在文档流中的特点：
块元素
1.块元素在文档流中自上向下垂直排列
2.块元素在文档流中默认宽度是父元素的100%，默认高度被内容（子元素）撑开
内联元素
1.内联元素在文档流中自左向右水平排列，
如果一行不足以容纳所有的元素，则另起一行继续自左向右水平排列
2.内联元素在文档流中高度和宽度都被内容撑开
3.浮动
- 使用float来设置元素的浮动
- 可选值：
none 默认值，元素不浮动，在文档流中
left 元素向左浮动
right 元素向右浮动
- 浮动的特点：
1.当元素设置浮动以后，元素会向页面的左上或右上浮动
2.当浮动元素遇到父元素的边框后，会停止移动。
3.当浮动元素遇到其他浮动元素时，也会停止移动。
4.如果浮动元素上是一个没有浮动的块元素，浮动元素不会超过他
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会环绕在浮动元素的周围
7.浮动元素会完全脱离文档流
- 元素脱离文档流以后的特点：
内联元素
- 内联元素脱离文档流以后会变成块元素
块元素
- 脱离文档流以后，块元素就不会独占一行了
- 脱离文档流以后，块元素的宽和高都被内容撑开
- 高度塌陷
- 默认情况下父元素的高度被子元素撑开，
如果这时子元素开启了浮动，则会脱离文档流，导致无法撑起父元素的高度，
造成父元素的高度塌陷，将页面的布局打乱。
- 解决方式：
- 可以通过开启父元素BFC来处理高度塌陷问题。
- BFC
- Block Formatting Context 块级格式化环境
- 默认情况下BFC是关闭的，当开启元素的BFC以后，元素会具有如下的特性：
1.元素不会被浮动元素所覆盖
2.子元素的垂直外边距不会传递给父元素
3.元素可以包含浮动的子元素
- 开启BFC的方式：
1.设置元素的浮动
2.设置元素的display为inline-block
3.设置元素的绝对定位
4.设置元素的overflow为hidden *****
4.定位
- 定位是一种更高级的布局方式，比浮动更加的灵活，通过定位可以将元素摆放到页面中的任意位置
- 定位一共分成三种：相对定位 绝对定位 固定定位
- 通过position属性来设置元素的定位：
可选值：
static 默认值 元素没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
- 相对定位：
- 当元素的position属性设置为relative时，则开启了元素的相对定位
- 相对定位的特点：
1.当给元素开启相对定位而不设置偏移量时，元素的位置不会发生任何变化
2.相对定位的元素是相对于元素自身在文档流中的位置进行定位的
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块还是块 内联还是内联
5.相对定位会提升元素的层级
- 偏移量（offset）
- 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置
top 元素距离定位元素的上边的偏移量
bottom 元素距离定位元素底部的偏移量
left 元素距离定位元素左侧的偏移量
right 元素距离定位元素的右侧的偏移量
- 一般偏移量只需要使用两个，一个水平方向一个垂直方向就可以为一个元素定位
top left
top right
bottom left
bottom right
- 层级（z-index）
- 当元素开启了定位以后，会提升层级，我们也可以通过z-index来为定位元素来设置层级
- z-index需要一个正整数作为参数，值越大层级越高，层级越高越优先显示，层级一样显示靠后的
- 父元素永远都不会盖住子元素