CSS3系列文章目录三--浮动，定位，字体，文本和背景

CSS3系列文章目录三

---

一、Clearfix的样式运用

/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 */
        .clearfix::before,
        .clearfix::after{
     
            content: '';
            display: table;
            clear: both;
        }

二、浮动运用

1.浮动运用场景

通过浮动可以使一个元素向其父元素的左侧或右侧移动
可选值：
none 默认值 ，元素不浮动
left 元素向左浮动
right 元素向右浮动

注意，元素设置浮动以后，水平布局的等式便不需要强制成立，元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

2. 脱离文档流的特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流以后，不需要再区分块和行内，按块元素特点

---

三、字体

font-face

font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权
3.字体格式

iconfont

图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标

fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”

方法一：

"stylesheet" href="./fa/css/all.css">
"fas fa-bell" style="font-size:80px; color:red;">
"fas fa-bell-slash">
"fab fa-accessible-icon">
"fas fa-otter" style="font-size: 160px; color:green;">

方法二：

li::before{
     
            /* 
                通过伪元素来设置图标字体
                    1.找到要设置图标的元素通过before或after选中
                    2.在content中设置字体的编码
                    3.设置字体的样式
                        fab
                        font-family: 'Font Awesome 5 Brands';

                        fas
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900; 

            */
            content: '\f1b0';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }

字体简写

font 可以设置字体相关的所有属性
语法：
font: 字体大小/行高 字体族（行高 可以省略不写 如果不写使用默认值）

四、文本

text-align 文本的水平对齐
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐

vertical-align 设置元素垂直对齐的方式
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

text-decoration 设置文本修饰
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线

white-space 设置网页如何处理空白
normal 正常
nowrap 不换行
pre 保留空白

五、背景

background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment

backgound 背景相关的简写属性

线性渐变，颜色沿着一条直线发生变化
linear-gradient()
radial-gradient() 径向渐变(放射性的效果)

background-image: linear-gradient(red,yellow,#bfa,orange);
background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); 
background-image: repeating-linear-gradient(to right ,red, yellow 50px);

background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

总结