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”

方法一：

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

方法二：

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)

總結