三種嵌套格式： 1、行內樣式 行內樣式：
- 在標簽內部通過style屬性來設定元素的樣式
- 問題：
使用行內樣式，樣式只能對一個標簽生效，
如果希望影響到多個元素必須在每一個元素中都復制一遍
并且當樣式發生變化時，我們必須要一個一個的修改，非常的不方便
<p style="color:red; font-size: 60px;">鄉音無改鬢毛衰</p> <p style="color: red; font-size: 60px;">今天天氣真不錯！</p>
2、內部樣式表：
- 將樣式撰寫到 head 中的 style 標簽里
然后通過 CSS 的選擇器來選中元素并為其設定各種樣式
可以同時為多個標簽設定樣式，并且修改時只需要修改一處即可全部應用
- 內部樣式表更加方便對樣式進行復用
- 問題：
我們的內部樣式表只能對一個網頁起作用，
它里邊的樣式不能跨頁面進行復用
<style>
p{
color: green;
font-size: 50px;
}
</style>
3、外部樣式表：最佳實踐
- 可以將 CSS 樣式撰寫到一個外部的 CSS 檔案中,
然后通過 link 標簽來引入外部的 CSS 檔案
- 外部樣式表需要通過 link 標簽進行引入，
意味著只要想使用這些樣式的網頁都可以對其進行參考
使樣式可以在不同頁面之間進行復用
- 將樣式撰寫到外部的 CSS 檔案中，可以使用到瀏覽器的快取機制，
從而加快網頁的加載速度，提高用戶的體驗，
<link rel="stylesheet" href="https://www.cnblogs.com/moguxican/p/style.css">
網頁分成三個部分：
結構(HTML)
表現(CSS)
行為(JavaScript)
CSS
- 層疊樣式表
- 網頁實際上是一個多層的結構，通過CSS可以分別為網頁的每一個層來設定樣式
而最終我們能看到只是網頁的最上邊一層
- 總之一句話，CSS用來設定網頁中元素的樣式
CSS的基本語法:
選擇器 宣告塊
選擇器: 通過選擇器可以選中頁面中的指定元素
比如 p 的作用就是選中頁面中所有的p元素
宣告塊: 通過宣告塊來指定要為元素設定的樣式
宣告塊由一個一個的宣告組成
宣告是一個名值對結構
一個樣式名對應一個樣式值，名和值之間以:連接，以;結尾
★★選擇器★★
元素選擇器：
作用：根據標簽名來選中指定的元素
語法：標簽名{}
例子：p{} h1{} div{}
p{
color: red;
}
h1{
color: green;
}
id選擇器：
作用：根據元素的id屬性值選中一個元素
語法：#id屬性值{}
例子：#box{} #red{}
#red{
color: red;
}
類選擇器：
作用：根據元素的class屬性值選中一組元素
語法：.class屬性值
.blue{
color: blue;
}
.abc{
font-size: 20px;
}
通配選擇器：
作用：選中頁面中的所有元素
語法: *
*{
color: red;
}
復合選擇器： 交集選擇器
作用：選中同時復合多個條件的元素
語法：選擇器1 選擇器2 選擇器3 選擇器n{}
注意點：2
交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
/* 將class為red的元素設定為紅色（字體） */
.red{
color: red;
}
/* 將class為red的div字體大小設定為30px */ div.red{ font-size: 30px; } .a.b.c{ color: blue }
并集選擇器
作用：同時選擇多個選擇器對應的元素
語法：選擇器1,選擇器2,選擇器3,選擇器n{}
#b1,.p1,h1,span,div.red{}
h1, span{
color: green
}
關系選擇器
父元素
- 直接包含子元素的元素叫做父元素
子元素
- 直接被父元素包含的元素是子元素
祖先元素
- 直接或間接包含后代元素的元素叫做祖先元素
- 一個元素的父元素也是它的祖先元素
后代元素
- 直接或間接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素
- 擁有相同父元素的元素是兄弟元素
子元素選擇器
作用：選中指定父元素的指定子元素
語法：父元素 > 子元素
div.box > span{
color: orange;
}
后代元素選擇器
作用：選中指定元素內的指定后代元素
語法：祖先 后代
div span{
color: skyblue
}
或
div > p > span{
color: red;
}
兄弟選擇器
選擇下一個兄弟
語法：前一個 + 下一個
選擇下邊所有的兄弟
語法：兄 ~ 弟
p + span{
color: red;
}
p ~ span{
color: red;
}
屬性選擇器
[屬性名] 選擇含有指定屬性的元素
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
[屬性名$=屬性值] 選擇屬性值以指定值結尾的元素
[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素
p[title]{ */
p[title=abc]{ */
p[title^=abc]{ */
p[title$=abc]{ */
p[title* = e]{
color: orange;
}
★★偽類選擇器★★
偽類（不存在的類，特殊的類）
- 偽類用來描述一個元素的特殊狀態
比如：第一個子元素、被點擊的元素、滑鼠移入的元素...
- 偽類一般情況下都是使用:開頭
:first-child 第一個子元素
:last-child 最后一個子元素
:nth-child() 選中第n個子元素
特殊值：
n 第n個 n的范圍0到正無窮
2n 或 even 表示選中偶數位的元素
2n+1 或 odd 表示選中奇數位的元素
- 以上這些偽類都是根據所有的子元素進行排序
難點：:first-of-type
:last-of-type
:nth-of-type()
- 這幾個偽類的功能和上述的類似，不通點是他們是在同型別元素中進行排序
每種型別第一次出現的型別
- :not() 否定偽類
- 將符合條件的元素從選擇器中去除
a元素的偽類:link 用來表示沒訪問過的鏈接（正常的鏈接）
:visited 用來表示訪問過的鏈接
由于隱私的原因，所以visited這個偽類只能修改鏈接的顏色
:hover 用來表示滑鼠移入的狀態
:active 用來表示滑鼠點擊
a:link{
color: red;
}
a:visited{
color: orange;
}
a:hover{
color: aqua;
}
a:active{
color: yellowgreen;
}
偽元素選擇器
偽元素，表示頁面中一些特殊的并不真實的存在的元素（特殊的位置）
偽元素使用 :: 開頭
::first-letter 表示第一個字母
::first-line 表示第一行
::selection 表示選中的內容
::before 元素的開始
::after 元素的最后
- before 和 after 必須結合content屬性來使用
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: '『';
}
div::after{
content: '』';
}
繼承
樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的后代元素上
繼承是發生在祖先后后代之間的
繼承的設計是為了方便我們的開發，
利用繼承我們可以將一些通用的樣式統一設定到共同的祖先元素上，
這樣只需設定一次即可讓所有的元素都具有該樣式
注意：并不是所有的樣式都會被繼承：（能不能繼承查手冊）
比如 背景相關的，布局相關等的這些樣式都不會被繼承，
選擇器的權重
樣式的沖突
- 當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設定不同的值時， 此時就發生了樣式的沖突，
發生樣式沖突時，應用哪個樣式由選擇器的權重（優先級）決定
選擇器的權重
行內樣式 1,0,0,0
id選擇器 0,1,0,0
類和偽類選擇器 0,0,1,0
元素選擇器 0,0,0,1
通配選擇器 0,0,0,0
繼承的樣式 沒有優先級
比較優先級時：需要將所有的選擇器的優先級進行相加計算，最后優先級越高，則越優先顯示（分組選擇器是單獨計算的）累加不跨位
選擇器的累加不會超過其最大的數量級，類選擇器在高也不會超過id選擇器
如果優先級計算后相同，此時則優先使用靠下的樣式
可以在某一個樣式的后邊添加 !important ，則此時該樣式會獲取到最高的優先級，甚至超過行內樣式，
注意：在開發中這個玩意一定要慎用！
a標簽的選擇器順序涉及到的a標簽偽類常用的有四個：
:link
:visited
:hover
:active
這四個選擇器的優先級是一樣的，
a:link {color: #FF0000;} 鏈接被訪問之前選中
a:visited {color: #000000;} 鏈接被訪問之后選中
a:hover {color: #008000;} 滑鼠懸停被選中
a:active {color: #FFFF00;} 鏈接被按下之后
注意
由于樣式的疊加特性和用戶的操作順序影響，以上四個偽類選擇器在書寫時盡量按照link vistied hover active的順序來書寫，
長度單位
像素
- 螢屏（顯示幕）實際上是由一個一個的小點點構成的
- 不同螢屏的像素大小是不同的，像素越小的螢屏顯示的效果越清晰
- 所以同樣的200px在不同的設備下顯示效果不一樣
百分比
- 也可以將屬性值設定為相對于其父元素屬性的百分比
- 設定百分比可以使子元素跟隨父元素的改變而改變
em
- em是相對于元素的字體大小來計算的
- 1em = 1font-size
- em會根據字體大小的改變而改變
rem
- rem是相對于根元素的字體大小來計算
顏色單位
RGB值：
- RGB通過三種顏色的不同濃度來調配出不同的顏色
- R red，G green ，B blue
- 每一種顏色的范圍在 0 - 255 (0% - 100%) 之間
- 語法：RGB(紅色,綠色,藍色)
background-color: rgb(255,255,255); 代表白色 background-color: rgb(0,0,0); 代表黑色
RGBA:
- 就是在rgb的基礎上增加了一個a表示不透明度
- 需要四個值，前三個和rgb一樣，第四個表示不透明度
1表示完全不透明 0表示完全透明 .5半透明
十六進制的RGB值：
- 語法：#紅色綠色藍色
- 顏色濃度通過 00-ff
- 如果顏色兩位兩位重復可以進行簡寫
#aabbcc --> #abc
background-color: #0000; 代表黑色 background-color: #bbffaa; 護眼色
HSL值 HSLA值
H 色相(0 - 360)
S 飽和度，顏色的濃度 0% - 100%
L 亮度，顏色的亮度 0% - 100%
檔案流
- 網頁是一個多層的結構，一層摞著一層
- 通過CSS可以分別為每一層來設定樣式
- 作為用戶來講只能看到最頂上一層
- 這些層中，最底下的一層稱為檔案流，檔案流是網頁的基礎
我們所創建的元素默認都是在檔案流中進行排列
- 對于我們來元素主要有兩個狀態
在檔案流中
不在檔案流中（脫離檔案流）
- 元素在檔案流中有什么特點：
塊元素- 塊元素會在頁面中獨占一行(自上向下垂直排列)
- 默認寬度是父元素的全部（會把父元素撐滿）
- 默認高度是被內容撐開（子元素）
行內元素
- 行內元素不會獨占頁面的一行，只占自身的大小
- 行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素
則元素會換到第二行繼續自左向右排列（書寫習慣一致）
- 行內元素的默認寬度和高度都是被內容撐開
盒子模型
盒模型、盒子模型、框模型（box model）
- CSS將頁面中的所有元素都設定為了一個矩形的盒子
- 將元素設定為矩形的盒子后，對頁面的布局就變成將不同的盒子擺放到不同的位置
- 每一個盒子都由一下幾個部分組成：
內容區（content）
內邊距（padding）
邊框（border）
外邊距（margin）
內容區（content）
- 元素中的所有的子元素和文本內容都在內容區中排列
- 內容區的大小由width 和 height兩個屬性來設定
- idth 設定內容區的寬度
- height 設定內容區的高度
邊框（border）
邊框屬于盒子邊緣，邊框里邊屬于盒子內部，出了邊框都是盒子的外部
1、邊框的大小會影響到整個盒子的大小
2、要設定邊框，需要至少設定三個樣式：
3、邊框的寬度 border-width
4、邊框的顏色 border-color
5、邊框的樣式 border-style
沒有次序要求！！！
/* border-width: 10px;
border-color: red;
border-style: solid; */
等同于
border:10px solid red ;
border-width
border-width: 10px;
默認值，一般都是 3個像素
border-width可以用來指定四個方向的邊框的寬度
值的情況
四個值：上 右 下 左(順時針)
三個值：上 左右 下
兩個值：上下 左右
一個值：上下左右
除了border-width還有一組 border-xxx-width
xxx可以是 top right bottom left
用來單獨指定某一個邊的寬度
border-color
用來指定邊框的顏色，同樣可以分別指定四個邊的邊框
規則和border-width一樣
border-color也可以省略不寫，如果省略了則自動使用color的顏色值
border-style指定邊框的樣式
solid 表示實線
dotted 點狀虛線
dashed 虛線
double 雙線
border-style的默認值是none 表示沒有邊框
border
簡寫屬性，通過該屬性可以同時設定邊框所有的相關樣式，并且沒有順序要求
除了border以外還有四個 border-xxx
border-top
border-right
border-bottom
border-left
設定border一條邊的樣式
對比 outline內邊距
內邊距（padding）
- 內容區和邊框之間的距離是內邊距
- 一共有四個方向的內邊距：
padding-top
padding-right
padding-bottom
padding-left
- 內邊距的設定會影響到盒子的大小（內邊距變化，盒子大小會變化）
- 背景顏色會延伸到內邊距上
盒子的可見框的大小，由內容區+內邊距+邊框共同決定，
所以在計算盒子大小時，需要將這三個區域加到一起計算
外邊距
- 外邊距不會影響盒子可見框的大小
- 但是外邊距會影響盒子的位置
- 一共有四個方向的外邊距：
margin-top
- 上外邊距，設定一個正值，元素會向下移動
margin-right
- 默認情況下設定margin-right不會產生任何效果
margin-bottom
- 下外邊距，設定一個正值，其下邊的元素會向下移動
margin-left
- 左外邊距，設定一個正值，元素會向右移動
- margin也可以設定負值，如果是負值則元素會向相反的方向移動
- 元素在頁面中是按照自左向右的順序排列的，
所以默認情況下如果我們設定的左和上外邊距則會移動元素自身
而設定下和右外邊距會移動其他元素
- margin的簡寫屬性
margin 可以同時設定四個方向的外邊距 ，用法和padding一樣
- margin會影響到盒子實際占用空間
★★盒子水平布局★★
元素在其父元素中水平方向的位置由以下幾個屬性共同決定“
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一個元素在其父元素中，水平布局必須要滿足以下的等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內容區的寬度 （必須滿足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
- 以上等式必須滿足，如果相加結果使等式不成立，則稱為過度約束，則等式會自動調整
- 調整的情況：
- 如果這七個值中沒有為 auto 的情況，則瀏覽器會自動調整margin-right值以使等式滿足
- 這七個值中有三個值和設定為auto
width
margin-left
maring-right
- 如果某個值為auto，則會自動調整為auto的那個值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
- 如果將一個寬度和一個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動為0
- 如果將三個值都設定為auto，則外邊距都是0，寬度最大
- 如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值
所以我們經常利用這個特點來使一個元素在其父元素中水平居中
示例：
width:xxxpx;
margin:0 auto;
居中操作：
margin-right: auto;
margin-left: auto;
垂直方向布局
子元素是在父元素的內容區中排列的，
如果子元素的大小超過了父元素，則子元素會從父元素中溢位
使用 overflow 屬性來設定父元素如何處理溢位的子元素
可選值：
visible，默認值 子元素會從父元素中溢位，在父元素外部的位置顯示
hidden 溢位內容將會被裁剪不會顯示
scroll 生成兩個滾動條，通過滾動條來查看完整的內容
auto 根據需要生成滾動條
overflow-x:
overflow-y:
外邊距的折疊垂直外邊距的重疊（折疊）
- 相鄰的垂直方向外邊距會發生重疊現象
- 兄弟元素
- 兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
- 特殊情況：
如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
- 兄弟元素之間的外邊距的重疊，對于開發是有利的，所以我們不需要進行處理
- 父子元素
- 父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）
- 父子外邊距的折疊會影響到頁面的布局，必須要進行處理
行內盒模型
行內元素的盒模型
- 行內元素不支持設定寬度和高度
- 行內元素可以設定padding，但是垂直方向padding不會影響頁面的布局
- 行內元素可以設定border，垂直方向的border不會影響頁面的布局
- 行內元素可以設定margin，垂直方向的margin不會影響布局
行內元素的盒模型
- 行內元素不支持設定寬度和高度
- 行內元素可以設定padding，但是垂直方向padding不會影響頁面的布局
- 行內元素可以設定border，垂直方向的border不會影響頁面的布局
- 行內元素可以設定margin，垂直方向的margin不會影響布局
樣式表 重置樣式表專門用來對瀏覽器的樣式進行重置的
reset.css 直接去除了瀏覽器的默認樣式
normalize.css 對默認樣式進行了統一
默認樣式- 通常情況，瀏覽器都會為元素設定一些默認樣式
- 默認樣式的存在會影響到頁面的布局，
通常情況下撰寫網頁時必須要去除瀏覽器的默認樣式（PC端的頁面）
盒子的尺寸
默認情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定
box-sizing 用來設定盒子尺寸的計算方式（設定width和height的作用）
可選值：
content-box 默認值，寬度和高度用來設定內容區的大小
border-box 寬度和高度用來設定整個盒子可見框的大小
width 和 height 指的是內容區 和 內邊距 和 邊框的總大小
盒子的輪廓圓角
box-shadow 用來設定元素的陰影效果，陰影不會影響頁面布局
第一個值 水平偏移量 設定陰影的水平位置 正值向右移動 負值向左移動
第二個值 垂直偏移量 設定陰影的水平位置 正值向下移動 負值向上移動
第三個值 陰影的模糊半徑
第四個值 陰影的顏色
outline 用來設定元素的輪廓線，用法和border一模一樣
輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小
border-radius: 用來設定圓角 圓角設定的圓的半徑大小
border-radius 可以分別指定四個角的圓角
四個值 左上 右上 右下 左下
三個值 左上 右上/左下 右下
兩個個值 左上/右下 右上/左下
/* 要讓一個文字在父元素中垂直居中，只需將父元素的line-height設定為一個和父元素height一樣的值 */
line-height: 25px; 文字垂直居中
浮動
通過浮動可以使一個元素向其父元素的左側或右側移動
使用 float 屬性來設定于元素的浮動
可選值：
none 默認值 ，元素不浮動
left 元素向左浮動
right 元素向右浮動
注意，元素設定浮動以后，水平布局的等式便不需要強制成立
元素設定浮動以后，會完全從檔案流中脫離，不再占用檔案流的位置，
所以元素下邊的還在檔案流中的元素會自動向上移動
浮動的特點1、浮動元素會完全脫離檔案流，不再占據檔案流中的位置
2、設定浮動以后元素會向父元素的左側或右側移動，
3、浮動元素默認不會從父元素中移出
4、浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素
5、如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移
6、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
<!-- 若是有display：inline-block(行內元素)則浮動的b會占據a的位置
若沒有有display(塊元素)則浮動的b不會占據a的位置 */-->
<style> .a{ width:100px; height:100px; background-color:red; <!-- 若是有display：inline-block(行內元素)則浮動的b會占據a的位置 若沒有有display(塊元素)則浮動的b不會占據a的位置 --> display:inline-block; } .b{ width:100px; height:100px; background-color:yellow; float:left; } </style> </head> <body> <div class = "a"></div> <div class = "b">bbb</div> </body>
總結：
浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，
通過浮動可以制作一些水平方向的布局
浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以利用浮動來設定文字環繞圖片的效果
元素設定浮動以后，將會從檔案流中脫離，從檔案流中脫離后，元素的一些特點也會發生變化
脫離檔案流的特點：
塊元素：
1、塊元素不在獨占頁面的一行
2、脫離檔案流以后，塊元素的寬度和高度默認都被內容撐開
行內元素：
行內元素脫離檔案流以后會變成塊元素，特點和塊元素一樣
脫離檔案流以后，不需要再區分塊和行內了
★★高度塌陷★★
高度塌陷的問題：
在浮動布局中，父元素的高度默認是被子元素撐開的，
當子元素浮動后，其會完全脫離檔案流，子元素從檔案流中脫離
將會無法撐起父元素的高度，導致父元素的高度丟失
父元素高度丟失以后，其下的元素會自動上移，導致頁面的布局混亂
所以高度塌陷是浮動布局中比較常見的一個問題，這個問題我們必須要進行處理！
解決方案：BFC塊級格式化環境
(Block Formatting Context)
BFC是一個CSS中的一個隱含的屬性，可以為一個元素開啟BFC
開啟BFC該元素會變成一個獨立的布局區域
元素開啟BFC后的特點：
1.開啟BFC的元素不會被浮動元素所覆寫
2.開啟BFC的元素子元素和父元素外邊距不會重疊
3.開啟BFC的元素可以包含浮動的子元素
措施：可以通過一些特殊方式來開啟元素的BFC：
1、設定元素的浮動（不推薦）
2、將元素設定為行內塊元素（不推薦）
3、將元素的overflow設定為一個非visible的值
常用的方式 為元素設定 overflow:hidden 開啟其BFC 以使其可以包含浮動元素
clear由于box1的浮動，導致box3位置上移
也就是box3收到了box1浮動的影響，位置發生了改變
如果我們不希望某個元素因為其他元素浮動的影響而改變位置，
可以通過clear屬性來清除浮動元素對當前元素所產生的影響
作用：清除浮動元素對當前元素所產生的影響
- 可選值：
left 清除左側浮動元素對當前元素的影響
right 清除右側浮動元素對當前元素的影響
both 清除兩側中最大影響的那側
原理：
設定清除浮動以后，瀏覽器會自動為元素添加一個上外邊距，
以使其位置不受其他元素的影響
.box1::after .box1::after{
content: '';
display: block;
clear: both;
}
clearfix
這個樣式可以同時解決高度塌陷和外邊距重疊的問題，當你在遇到這些問題時，直接使用clearfix這個類即可
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
定位 定位（position）
- 定位是一種更加高級的布局手段
- 通過定位可以將元素擺放到頁面的任意位置
- 使用position屬性來設定定位
可選值：
static 默認值，元素是靜止的沒有開啟定位
relative 開啟元素的相對定位
absolute 開啟元素的絕對定位
fixed 開啟元素的固定定位
sticky 開啟元素的粘滯定位
相對定位：
當元素的position屬性值設定為relative時則開啟了元素的相對定位
相對定位的特點：
1.元素開啟相對定位以后，如果不設定偏移量元素不會發生任何的變化
2.相對定位是參照于元素在檔案流中的位置進行定位的
3.相對定位會提升元素的層級
4.相對定位不會使元素脫離檔案流
5.相對定位不會改變元素的性質塊還是塊，行內還是行內
偏移量（offset）
當元素開啟了定位以后，可以通過偏移量來設定元素的位置
top
定位元素和定位位置上邊的距離
bottom
定位元素和定位位置下邊的距離
定位元素垂直方向的位置由top和bottom兩個屬性來控制
通常情況下我們只會使用其中一
top值越大，定位元素越向下移動
bottom值越大，定位元素越向上移動
left
定位元素和定位位置的左側距離
right
定位元素和定位位置的右側距離
定位元素水平方向的位置由left和right兩個屬性控制
通常情況下只會使用一個
left越大元素越靠右
right越大元素越靠左
★絕對定位
當元素的position屬性值設定為absolute時，則開啟了元素的絕對定位
絕對定位的特點：
1.開啟絕對定位后，如果不設定偏移量元素的位置不會發生變化
2.開啟絕對定位后，元素會從檔案流中脫離
3.絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
4.絕對定位會使元素提升一個層級
5.絕對定位元素是相對于其包含塊進行定位的
包含塊( containing block )
正常情況下：
包含塊就是離當前元素最近的祖先塊元素
<div> <div></div> </div>
<div><span><em>hello</em></span></div>
絕對定位的包含塊:
包含塊就是離它最近的開啟了定位的祖先元素，
如果所有的祖先元素都沒有開啟定位則根元素就是它的包含塊
html（根元素、初始包含塊）
固定定位
固定定位：
將元素的position屬性設定為fixed則開啟了元素的固定定位
固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣
唯一不同的是：
固定定位永遠參照于瀏覽器的視口進行定位
固定定位的元素不會隨網頁的滾動條滾動
粘滯定位
當元素的position屬性設定為sticky時則開啟了元素的粘滯定位
粘滯定位和相對定位的特點基本一致，
不同的是粘滯定位可以在元素到達某個位置時將其固定
水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含塊的內容區的寬度
當我們開啟了絕對定位后:
水平方向的布局等式就需要添加left 和 right 兩個值
此時規則和之前一樣只是多添加了兩個值：
當發生過度約束：
如果9個值中沒有 auto 則自動調整right值以使等式滿足
如果有auto，則自動調整auto的值以使等式滿足
可設定auto的值
margin width left right
因為left 和 right的值默認是auto，所以如果不指定left和right
則等式不滿足時，會自動調整這兩個值
垂直方向布局的等式的也必須要滿足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height
= 包含塊的高度
元素的層級
對于開啟了定位元素，可以通過z-index屬性來指定元素的層級
z-index需要一個整數作為引數，值越大元素的層級越高
元素的層級越高越優先顯示
如果元素的層級一樣，則優先顯示靠下的元素
祖先的元素的層級再高也不會蓋住后代元素
z-index: 1;
字體 字體相關的樣式
color 用來設定字體顏色
font-size 字體的大小
和font-size相關的單位
em 相當于當前元素的一個font-size
rem 相對于根元素的一個font-size
font-family 字體族（字體的格式）
可選值：
serif 襯線字體
sans-serif 非襯線字體
monospace 等寬字體
- 指定字體的類別，瀏覽器會自動使用該類別下的字體
font-family 可以同時指定多個字體，多個字體間使用,隔開
字體生效時優先使用第一個，第一個無法使用則使用第二個 以此類推
Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino
Sans GB, "\5B8B\4F53", sans-serif
font-face可以將服務器中的字體直接提供給用戶去使用
問題：
1.加載速度
2.著作權
3.字體格式
@font-face {
/* 指定字體的名字 */
font-family:'myfont' ;
/* 服務器中字體的路徑 */
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
圖示字體（iconfont）
- 在網頁中經常需要使用一些圖示，可以通過圖片來引入圖示
但是圖片大小本身比較大，并且非常的不靈活
- 所以在使用圖示時，我們還可以將圖示直接設定為字體，
然后通過font-face的形式來對字體進行引入
- 這樣我們就可以通過使用字體的形式來使用圖示
fontawesome 使用步驟
1.下載 https://fontawesome.com/
2.解壓
3.將css和webfonts移動到專案中
4.將all.css引入到網頁中
5.使用圖示字體
- 直接通過類名來使用圖示字體
<i style="font-size:80px; color:red;"></i>
<i ></i>
<i ></i>
<i style="font-size: 160px; color:green;"></i>
偽元素設定圖示字體
1.找到要設定圖示的元素通過before或after選中
2.在content中設定字體的編碼
3.設定字體的樣式
第一種方式:
fab
font-family: 'Font Awesome 5 Brands';
第二種方式:
fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
iconfont使用步驟
....
行高（line height）
- 行高指的是文字占有的實際高度
- 可以通過line-height來設定行高
行高可以直接指定一個大小（px em）
也可以直接為行高設定一個整數
如果是一個整數的話，行高將會是字體的指定的倍數
- 行高經常還用來設定文字的行間距
行間距 = 行高 - 字體大小
字體框字體框就是字體存在的格子，設定font-size實際上就是在設定字體框的高度
行高會在字體框的上下平均分配
/* 可以將行高設定為和高度一樣的值，使單行文字在一個元素中垂直居中 */
line-height: 200px;水平對齊
text-align 文本的水平對齊
可選值：
left 左側對齊
right 右對齊
center 居中對齊
justify 兩端對齊
/* text-align: justify; */垂直對齊
vertical-align 設定元素垂直對齊的方式
可選值：
baseline 默認值 基線對齊
top 頂部對齊
bottom 底部對齊
middle 居中對齊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246474.html
標籤：Html/Css
上一篇：z-index的特點