一、浮动
1、通过浮动可以使一个元素向其父元素的左侧或右侧移动
2、float属性实现浮动
3、浮动特点
- 完全脱离文档流，不会占据文档流中的位置
- 元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左向右移动时，不会超过它前边其他浮动元素
- 若浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素无法超过上边的浮动的兄弟元素，最多和它一样高
4、浮动主要作用----让页面的元素可以水平排列
5、脱离文档流的特点
- 块元素（1）不在独占页面一行（2）脱离文档流以后，块元素的宽度和高度默认都被内容撑开
- 行内元素（1）脱离文档流之后会变成块元素，特点与块元素一样
- 脱离文档流之后不再区分行内和块元素了
6、高度塌陷问题
6.1、处理的方法
（1）BFC(Block Formatting Context)块级格式化环境
可通过以下方式开启BFC
（2）使用clear属性
二、定位
- 定位使一个更高级的布局手段
- 通过定位可以将元素摆放到任意位置
- 使用position属性来设置定位
1、相对定位
- 当元素position设置为relative时，则开启了相对定位
- 特点如下：（1）若不设置偏移量，元素不会发生任何变化
（2）相对定位是参照于元素在文档流中的位置进行定位的
（3）相对地位会提升元素的层级
（4）相对定位不会使元素脱离文档流
（5）相对定位不会改变元素的性质，块还是块，行内还是行内
2、绝对定位
- 当元素position设置为absolute时，则开启了绝对定位
- 特点如下：（1）若不设置偏移量，元素不会发生任何变化
（2）开启绝对定位后，元素会从文档流中脱离
（3）绝对定位会改变元素的性质，行内变成块，块的宽高度会被内容撑开
（4）绝对定位会使元素提升一个层级
（5）绝对定位元素时相对于其包含块进行定位的
！！！绝对定位元素的布局
- 水平布局满足：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=包含块的内容区的宽度
- 垂直布局满足：top+margin-top/bottom+padding-top/bottom+border-top/bottom+height=包含块的高度
3、固定定位
- 将元素的position属性设置成fixed时开启了元素固定定位
- 固定定位也是一种绝对定位，所以固定定位大部分特点都与绝对定位一样
- 唯一不同点：固定定位永远参照于浏览器的视口（可视窗口）进行定位
- 固定定位的元素不会随网页的滚动条滚动而滚动
4、粘滞定位
- 将元素的position属性设置成sticky时开启了元素固定定位
- 粘滞定位和相对定位特点基本一致
- 不同：粘滞定位可以在元素达到某一个位置时将其固定
！！！开启了元素定位，可以通过z-index属性来指定元素的层级
- z-index需要一个整数作为参数，值越大的元素层级越高，层级越高越优先显示
- 若层级一样，则优先显示靠下的元素
- 祖先的元素层级再高也不会盖住后代元素
三、字体
1、字体相关样式
- color–设置字体颜色
- font-size–设置字体大小
- font-family–设置字体的格式
- font-weight–设置字体的加粗
- font-style–设置字体风格
2、图标字体
（1）使用图标文字
- 直接通过类名来使用图标文字
- 通过伪元素来设置图标字体
- 通过实体来使用图标字体
3、行高
- 行高指的是文字占有的实际高度
- 可以通过line-height来设置行高
- 行高还可以用来设置文字的行间距
3.1、字体框
- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
4、字体简写属性
- font可以设置字体相关的所有属性
四、文本
1、文本的样式
- text-align–文本的水平对齐
- vertical-align–设置元素的垂直对齐方式
- text-decoration–设置文本修饰
- white-space–设置网页如何处理空白
五、背景
1、背景样式
- background-color–设置背景颜色
- background-image–设置背景图片
- background-repeat–设置背景的重复方式
- background-position–设置背景图片的位置
- background-size–设置背景图片大小
- background-origin–背景图片的偏移量计算的原点
- background-clip–设置背景的范围
- background-attachment–背景图片是否跟随元素移动
- background的简写属性
六、渐变
1、线性渐变：颜色沿着一条直线发生变化
- 属性：linear-gradient（）
- 属性括号里的开头可以指定一个渐变的方向
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
- repeating-linear-gradient（）可以用来平铺线性渐变
2、径向渐变（放射性的效果）
- 属性：radial-gradient（）
- 默认情况下径向渐变的形状根据元素的形来计算的
- 我们可以指定径向渐变的大小，位置
