CSS笔记3（浮动，定位，字体，文本，背景，渐变）

一、浮动

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-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–设置背景图片的位置

方式一：通过top left bottom right center 几个表示方位的词来设置背景图片，必须指定两个值。
例如：top center
方式二：例如：

• background-size–设置背景图片大小

方式一：方式二：

• background-origin–背景图片的偏移量计算的原点

• background-clip–设置背景的范围

• background-attachment–背景图片是否跟随元素移动

• background的简写属性

举例：background：url(地址) red center center/contain border-box content-box no-repeat;

六、渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色到另一个颜色过渡的效果，渐变是图片，需要用background-image来设置

1、线性渐变：颜色沿着一条直线发生变化

• 属性：linear-gradient（）

举例：

• 属性括号里的开头可以指定一个渐变的方向

to left表示渐变从右到左
to right表示渐变从左到右
以此类推

• 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

如：

• repeating-linear-gradient（）可以用来平铺线性渐变

2、径向渐变（放射性的效果）

• 属性：radial-gradient（）
• 默认情况下径向渐变的形状根据元素的形来计算的

• 我们可以指定径向渐变的大小，位置

！！位置也可以用px来充当

举例：