CSS的三種樣式說明
1、外部樣式，通過從html的head中加入link標(biāo)簽外鏈到css文件
格式：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2、內(nèi)部樣式，通過從html的head中加入style標(biāo)簽，寫入css代碼
格式：
<head>
<style type="text/css">
body {
background-color: red
}
</style>
</head>
3、內(nèi)聯(lián)樣式，通過需要修改樣式的html標(biāo)簽中加入style屬性，寫入css代碼
格式：
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
CSS選擇器
1、標(biāo)簽選擇器
格式：
標(biāo)簽名{ display : none; }
注意點(diǎn)：
① 標(biāo)簽選擇器選中當(dāng)前界面所有的該標(biāo)簽
② 標(biāo)簽選擇器無論標(biāo)簽藏多深都能選中
2、id選擇器
格式：
#id名稱{ display : none; }
注意點(diǎn)：
① id選擇器只能選中一個(gè)元素，同一個(gè)界面中id的名稱是不可以重復(fù)的
② id的名稱只能由字母/數(shù)字/下劃線(a-z 0-9 _)且不能以數(shù)字開頭
③ id名稱不能是HTML標(biāo)簽的名稱，不能是a h1 img input ...
3、類選擇器
格式：
.類名稱{ display : none; }
注意點(diǎn)：
① 每個(gè)標(biāo)簽都可以設(shè)置一個(gè)或者多個(gè)類名(使用空格間隔開)，同個(gè)界面下類名可以重復(fù)
② 類的名稱只能由字母/數(shù)字/下劃線(a-z 0-9 _)且不能以數(shù)字開頭
③ 類名稱不能是HTML標(biāo)簽的名稱，不能是a h1 img input ...
4、后代選擇器
格式：
標(biāo)簽名稱1 標(biāo)簽名稱2{ display : none; }
作用：先找到所有名稱叫做"標(biāo)簽名稱1"的標(biāo)簽, 然后再在這個(gè)標(biāo)簽下面去查找所有名稱叫做"標(biāo)簽名稱2"的標(biāo)簽, 然后在設(shè)置屬性
注意點(diǎn)：
① 后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標(biāo)簽中的都是后代
② 后代選擇器不僅僅可以使用標(biāo)簽名稱, 還可以使用其它所有的選擇器
③ 后代選擇器必須用空格隔開且可以通過空格一直延續(xù)下去
5、子元素選擇器
格式：
標(biāo)簽名稱1>標(biāo)簽名稱2{ display : none; }
作用：先找到所有名稱叫做"標(biāo)簽名稱1"的標(biāo)簽, 然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱叫做"標(biāo)簽名稱2"的元素
注意點(diǎn)：
① 子元素選擇器只會(huì)查找兒子, 不會(huì)查找其他被嵌套的標(biāo)簽
② 子選擇器不僅僅可以使用標(biāo)簽名稱, 還可以使用其它所有的選擇器
③ 子元素選擇器之間需要用>符號(hào)連接, 并且不能有空格，可以一直>符號(hào)延續(xù)下去找兒子的兒子
6、交集選擇器
格式：
標(biāo)簽名稱.類名稱{ display : none; }
作用：給所有標(biāo)簽名稱選中的元素中，有對應(yīng)類名稱的那部分標(biāo)簽設(shè)置屬性
注意點(diǎn)：
① 選擇器和選擇器之間沒有任何的連接符號(hào)
② 交集選擇器不僅僅可以使用標(biāo)簽名稱, 還可以使用 標(biāo)簽名稱/id名稱/class名稱
③ 交集選擇器僅僅作為了解, 企業(yè)開發(fā)中用的并不多
7、并集選擇器
格式：
標(biāo)簽名稱1,標(biāo)簽名稱2{ display : none; }
作用：給所有選擇器選中的標(biāo)簽設(shè)置屬性
注意點(diǎn)：
① 并集選擇器必須使用 ，（逗號(hào)）來連接
② 選擇器可以使用標(biāo)簽名稱/id名稱/class名稱
8、相鄰兄弟選擇器（CSS2）
格式：
標(biāo)簽名稱1+標(biāo)簽名稱2{ display : none; }
作用：給指定標(biāo)簽后面緊跟的那個(gè)標(biāo)簽設(shè)置屬性
注意點(diǎn)：
① 相鄰兄弟選擇器必須通過+連接
② 相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽, 不能選中被隔開的標(biāo)簽
9、通用兄弟選擇器（CSS3）
格式：
標(biāo)簽名稱1~標(biāo)簽名稱2{ display : none; }
作用：從標(biāo)簽名稱1后面開始查找（同等級(jí)標(biāo)簽）標(biāo)簽名稱2的標(biāo)簽設(shè)置屬性
注意點(diǎn)：
① 通用兄弟選擇器必須用~連接
② 通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有（同等級(jí)）標(biāo)簽, 無論有沒有被隔開都可以選中
10、序選擇器
選中同級(jí)別中的第n個(gè)標(biāo)簽
格式：
body>:nth-child(n) { display : none; }
作用：給body下面子元素的第n個(gè)元素設(shè)置屬性
選中同級(jí)別中的倒數(shù)第n個(gè)標(biāo)簽
格式：
body>:nth-last-child(n) { display : none; }
作用：給body下面子元素的倒數(shù)第n個(gè)元素設(shè)置屬性
選中同級(jí)別中的唯一的那個(gè)標(biāo)簽
格式：
body>:only-child{ display : none; }
作用：給body下唯一子元素設(shè)置屬性（body子元素的這層只能有一個(gè)元素，否則就選不到）
選中同級(jí)別同類型中的第n個(gè)標(biāo)簽
格式：
body>:nth-of-type(n) { display : none; }
作用：給body下面子元素的第n個(gè)元素設(shè)置屬性
選中同級(jí)別同類型中的倒數(shù)第n個(gè)標(biāo)簽
格式：
body>:nth-last-of-type(n) { display : none; }
作用：給body下面子元素的倒數(shù)第n個(gè)元素設(shè)置屬性
選中同級(jí)別同類型中的唯一的那個(gè)標(biāo)簽
格式：
body>:only-of-type{ display : none; }
作用：給body下唯一子元素設(shè)置屬性（body子元素的這層只能有一個(gè)元素，否則就選不到）
選中同級(jí)別中的所有奇數(shù)
格式：
body>:nth-child(odd)
作用：給body下所有奇數(shù)順序的元素
選中同級(jí)別中的所有偶數(shù)
格式：
body>:nth-child(even)
作用：給body下所有偶數(shù)順序的元素
選中第xn+y個(gè)元素，x=2和y=1是用戶自定義的, 而n是一個(gè)計(jì)數(shù)器, 從0開始遞增
格式：
body>:nth-child(2n+1)
作用：給body下順序?yàn)?n+1（n從0開始遞增）的元素
11、屬性選擇器
格式：
div[class]{ display : none; }
作用：根據(jù)指定的屬性名稱class找到div標(biāo)簽中有該屬性的標(biāo)簽, 然后設(shè)置屬性
格式：
div[class=abc]{ display : none; }
作用：根據(jù)指定的屬性名稱class的值abc找到div標(biāo)簽中有該屬性的標(biāo)簽, 然后設(shè)置屬性
注意點(diǎn)：
① [class^=abc] 可以找到屬性class的值以abc開頭的標(biāo)簽
② [class$=abc] 可以找到屬性class的值以abc結(jié)尾的標(biāo)簽
③ [class*=abc] 可以找到屬性class的值有字符串a(chǎn)bc的標(biāo)簽
12、通配符選擇器
格式：
*{ display : none; }
作用：遍歷當(dāng)前界面上所有的標(biāo)簽并給它們設(shè)置屬性
注意點(diǎn)：
① 在設(shè)置之前會(huì)遍歷所有的標(biāo)簽, 如果標(biāo)簽比較多, 那么性能會(huì)比較差, 所以在企業(yè)開發(fā)中一般不會(huì)使用通配符選擇器
CSS三大特性及顯示模式
CSS三大特性：
1、繼承性，給父元素設(shè)置一些屬性, 子元素也可以使用, 這個(gè)我們就稱之為繼承性
注意點(diǎn)：
① 并不是所有的屬性都可以繼承, 只有以color(字體顏色)/font-(文字屬性)/text-(文本屬性)/line-(行屬性) 開頭的屬性才可以繼承
② 在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
③ a標(biāo)簽的文字顏色和下劃線是不能繼承的
④ h標(biāo)簽的文字大小是不能繼承的
繼承性應(yīng)用場景：
一般用于設(shè)置網(wǎng)頁上的一些共性信息, 例如網(wǎng)頁的文字顏色, 字體,文字大小等內(nèi)容
2、層疊性，層疊性就是CSS處理沖突的一種能力，優(yōu)先級(jí)高的樣式會(huì)覆蓋掉優(yōu)先級(jí)低的樣式，最終只顯示一種樣式
注意點(diǎn)：
① 層疊性只有在多個(gè)選擇器選中"同一個(gè)標(biāo)簽", 然后又設(shè)置了"相同的屬性", 才會(huì)發(fā)生層疊性
3、優(yōu)先級(jí)，當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽, 并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí), 如何層疊就由優(yōu)先級(jí)來確定
注意點(diǎn)：
① 間接選中就是指繼承，如果是間接選中, 那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的
② 相同選擇器(直接選中)，那么就是誰寫在后面就聽誰的
③ 不同選擇器(直接選中)，那么就會(huì)按照選擇器的優(yōu)先級(jí)來層疊：id>類>標(biāo)簽>通配符(通配符也屬于直接選中)>繼承>瀏覽器默認(rèn)
④ 多個(gè)選擇器混合使用(直接選中)，需要通過優(yōu)先級(jí)權(quán)重判斷誰優(yōu)先級(jí)高，權(quán)重一樣則誰寫在后面聽誰的
優(yōu)先級(jí)權(quán)重計(jì)算規(guī)則： 計(jì)算選擇器中有多少個(gè)id，id多的優(yōu)先級(jí)高
計(jì)算選擇器中有多少個(gè)類，類名多的優(yōu)先級(jí)高
計(jì)算選擇器中有多少個(gè)標(biāo)簽名，標(biāo)簽名多的優(yōu)先級(jí)高
如果權(quán)重一樣寫在后面的優(yōu)先
注意：只有選擇器是直接選中標(biāo)簽的才需要計(jì)算權(quán)重, 否則一定會(huì)聽直接選中的選擇器的
⑤ !important，用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級(jí)的, 可以將被指定的屬性的優(yōu)先級(jí)提升
注意：
!important只能用于直接選中, 不能用于間接選中
通配符選擇器選中的標(biāo)簽也是直接選中的
!important只能提升被指定的屬性的優(yōu)先級(jí), 其它的屬性的優(yōu)先級(jí)不會(huì)被提升
!important必須寫在屬性值得分號(hào)前面
!important前面的感嘆號(hào)不能省略
CSS顯示模式：
1、通過display的取值判斷CSS元素的顯示模式
① block 塊級(jí)
特點(diǎn)：1、獨(dú)占一行，可以設(shè)置寬高
2、如果沒有設(shè)置寬度，默認(rèn)和父元素一樣寬
② inline 行內(nèi)
特點(diǎn)：1、不會(huì)獨(dú)占一行，不能設(shè)置寬高
2、行內(nèi)元素的寬高是通過content（內(nèi)容）撐起來的
③ inline-block 行內(nèi)塊級(jí)
特點(diǎn)：1、不會(huì)獨(dú)占一行，可以設(shè)置寬高
④ table 表格
特點(diǎn)：1、不會(huì)獨(dú)占一行，可以設(shè)置寬高
2、會(huì)作為塊級(jí)表格來顯示，可以在表格元素內(nèi)部做table系列的顯示模式，如table-cell
⑤ flex 彈性盒模型
特點(diǎn)：1、 獨(dú)占一行，可以設(shè)置寬高
CSS盒模型
1、盒模型由 margin（外邊距）、border（邊框）、padding（內(nèi)邊距）、content（內(nèi)容）組成，盒模型又分為 標(biāo)準(zhǔn)模型 及 IE模型 兩種表示方法
①、標(biāo)準(zhǔn)模型 寬度和高度 = 盒模型 content（內(nèi)容） 的寬和高
②、IE模型 寬度和高度 = 盒模型 border（邊框） + padding（內(nèi)邊距） + content（內(nèi)容） 的寬和高
設(shè)置標(biāo)準(zhǔn)模型（瀏覽器默認(rèn)）： box-sizing : content-box ，此時(shí)設(shè)置元素的width和height 都是設(shè)置盒模型中的content的寬高
設(shè)置IE模型 ： box-sizing : border-box 則表示使用IE模型，此時(shí)設(shè)置元素的width和height 都是設(shè)置盒模型中content+padding+border 的寬高 （如果已經(jīng)設(shè)置border或者padding的寬高，則剩下的寬高屬于content）
2、margin（外邊距）
作用：標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式1：
單獨(dú)設(shè)置四條邊：margin-top: （上）、margin-right:（右）、margin-bottom:（下）、margin-left:（左），外邊距只能設(shè)置 邊距屬性
.box1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
格式2：
同時(shí)設(shè)置四條邊屬性，對應(yīng)關(guān)系是 margin: 上 右 下 左 ， 同時(shí)設(shè)置四條邊還有省略的寫法 margin ： 上 右左 下 、 margin : 上下 右左 、 margin：上右下左
.box1{
margin:20px 40px 80px 160px; 上 右 下 左
margin:20px 40px 80px; 上 右左 下
margin:20px 40px; 上下 右左
margin:20px; 上右下左
}
注意點(diǎn)：
① 外邊距合并現(xiàn)象，默認(rèn)布局的垂直方向上外邊距是不會(huì)疊加的, 會(huì)出現(xiàn)合并現(xiàn)象, 誰的外邊距比較大就聽誰的，如果想不重疊需要使用bfc
② 如果兩個(gè)盒子是嵌套關(guān)系, 那么設(shè)置了里面一個(gè)盒子頂部的外邊距, 外面一個(gè)盒子（沒設(shè)置頂部外邊距）也會(huì)被頂下來，如果不想外面盒子被頂下來，則需要給外盒子設(shè)置border（邊框）屬性
③ 企業(yè)開發(fā)中，需要控制嵌套盒子間距離，首先考慮使用外盒子的padding（內(nèi)邊距），margin（外邊距）本質(zhì)上用于控制兄弟盒子間隙的
④ 使用 margin： 0 auto，可以讓盒子自己相對于父盒子水平居中，這里auto只能在水平方向使用，原因是auto默認(rèn)使用的是剩余空間，左右設(shè)置auto則均分剩余空間，橫向?qū)挾仁枪潭ǖ模ǜ鸀g覽器或者父盒子寬度有關(guān)），而縱向?qū)挾炔欢ǎ撁娴目v向是可以無限滾動(dòng)的），所以當(dāng)縱向使用auto時(shí)計(jì)算值就為0
3、border（邊框）
作用：邊框就是環(huán)繞在 content（內(nèi)容）+ padding（內(nèi)邊距） 寬度和高度周圍的線條
格式1：
單獨(dú)設(shè)置四條邊：border-top: （上）、border-right:（右）、border-bottom:（下）、border-left:（左），邊框可以設(shè)置三個(gè)屬性 邊框的寬度 邊框的樣式 邊框的顏色
.box1{
border-top: 10px solid red;
border-right: 10px solid blue;
border-bottom: 10px solid pink;
border-left: 10px solid green;
}
格式2：
同時(shí)設(shè)置四條邊屬性，沒有省略設(shè)置單邊的寫法，可以使用快捷鍵 bd+ 然后按tab鍵直接生成
.box1{
border: 10px solid red;
}
注意點(diǎn)：
① 連寫格式中顏色屬性可以省略, 省略之后默認(rèn)就是黑色
② 連寫格式中樣式不能省略, 省略之后就看不到邊框了
③ 連寫格式中寬度可以省略, 省略之后還是可以看到邊框（默認(rèn)1px）
④ 給標(biāo)簽設(shè)置邊框之后, 標(biāo)準(zhǔn)模型下 標(biāo)簽整體 占有的寬度和高度會(huì)發(fā)生變化
屬性：
第一個(gè)值邊框的寬度：10 px
第二個(gè)值邊框的樣式： solid（實(shí)線） 、dashed（虛線） 、dotted（圓點(diǎn)虛線） 、double（雙線）
第三個(gè)值邊框的顏色： red（紅色）、blue（藍(lán)色）、pink（粉色）、green（綠色）
4、padding（內(nèi)邊距）
作用：邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式1：
單獨(dú)設(shè)置四條邊：padding-top: （上）、padding-right:（右）、padding-bottom:（下）、padding-left:（左），內(nèi)邊距只能設(shè)置 邊距屬性
.box1{
padding-top:20px;
padding-right:40px;
padding-bottom:80px;
padding-left:160px;
}
格式2：
同時(shí)設(shè)置四條邊屬性，對應(yīng)關(guān)系是padding: 上 右 下 左，同時(shí)設(shè)置四條邊還有省略的寫法 padding:上 右左 下 、 padding: 上下 右左 、margin:上右下左
.box1{
padding:20px 40px 80px 160px; 上 右 下 左
padding:20px 40px 80px; 上 右左 下
padding:20px 40px; 上下 右左
padding:20px; 上右下左
}
注意點(diǎn)：
① 給標(biāo)簽設(shè)置內(nèi)邊距之后, 內(nèi)邊距也會(huì)有背景顏色
② 給標(biāo)簽設(shè)置內(nèi)邊距之后, 標(biāo)準(zhǔn)模型下標(biāo)簽整體占有的寬度和高度會(huì)發(fā)生變化
元素的寬度和高度
寬度 = 左邊框 + 左內(nèi)邊距 + width（box-content） + 右內(nèi)邊距 + 右邊框
高度 同理可證
增加了padding/border之后元素的寬高也會(huì)發(fā)生變化
如果增加了padding/border之后還想保持元素的寬高, 那么就必須減去內(nèi)容的寬高
元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width（box-content） + 右內(nèi)邊距 + 右邊框 + 右外邊距
高度 同理可證
1、在CSS中設(shè)置 box-sizing : content-box 則表示使用標(biāo)準(zhǔn)模型（瀏覽器默認(rèn)），通過設(shè)置元素的width和height 指的都是盒模型中的content寬高
2、在CSS中設(shè)置 box-sizing : border-box 則表示使用IE模型， 通過設(shè)置元素的width和height 指的都是盒模型中的content+padding+border的寬高（如果已經(jīng)設(shè)置border或者padding的寬高，則剩下的寬高屬于content）
CSS常見屬性
文字屬性
1、font-style，規(guī)定文字樣式
取值:
normal ： 正常的， 默認(rèn)就是正常的
italic : 傾斜的
2、 font-weight，規(guī)定文字粗細(xì)
單詞取值:
bold 加粗
bolder 比加粗還要粗
lighter 細(xì)線， 默認(rèn)就是細(xì)線
數(shù)字取值：
100-900之間整百的數(shù)字
3、font-size，規(guī)定文字大小
取值:
10px(像素 pixel)
4、font-family，規(guī)定文字字體
取值:
各種字體名稱，如"微軟雅黑"、"宋體"、"楷體"
注意點(diǎn)：
① 如果取值是中文， 需要用雙引號(hào)或者單引號(hào)括起來
② 設(shè)置的字體必須是用戶電腦里面已經(jīng)安裝的字體，如果設(shè)置的字體不存在系統(tǒng)默認(rèn)使用宋體
③ 可以給字體設(shè)置備選方案，當(dāng)?shù)谝环桨笩o效的時(shí)候會(huì)采用備選方案
格式:font-family:"字體1", "備選方案1", ...;
④ 如果想給中文和英文分別單獨(dú)設(shè)置字體，那么英文字體放做第一方案，中文字體放做備選方案，因?yàn)橛⑽淖煮w里一定沒有中文字體
5、font，一次設(shè)置字體屬性
格式：
font: style weight size family;
例子：
font : italic bold 10px "楷體";
注意點(diǎn):
① 在這種縮寫格式中有的屬性值可以省略，sytle可以省略、weight可以省略，且兩者可以交換位置
② 在這種縮寫格式中也有的屬性值不可以省略，size不能省略、family不能省略，size一定要寫在family的前面, 而且size和family必須寫在所有屬性的最后
文本屬性
1、text-decoration，給文本添加裝飾
取值:
underline 下劃線
line-through 刪除線
overline 上劃線
none 什么都沒有, 最常見的用途就是用于去掉超鏈接的下劃線
2、text-align，設(shè)置文本水平對齊方式
取值:
left 左
right 右
center 中
3、text-indent，設(shè)置文本縮進(jìn)
格式:
text-indent: 2em;
取值:
2em, 其中em是單位, 一個(gè)em代表縮進(jìn)一個(gè)文字的寬度
文字顏色屬性
1、color，修改文字顏色
英文單詞取值:
red（紅色）
blue（藍(lán)色）
pink（粉色）
green（綠色）
rgba說明：
第一個(gè)數(shù)字就是用來設(shè)置三原色的光源元件 紅色 顯示的亮度
第二個(gè)數(shù)字就是用來設(shè)置三原色的光源元件 綠色 顯示的亮度
第三個(gè)數(shù)字就是用來設(shè)置三原色的光源元件 藍(lán)色 顯示的亮度
這其中的每一個(gè)數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮
第四個(gè)數(shù)字表示透明度，取值是0-1, 取值越小就越透明
rgba取值：
紅色: rgba(255,0,0,0);
綠色: rgba(0,255,0,0);
藍(lán)色: rgba(0,0,255,0);
黑色: rgba(0,0,0,0);
白色: rgba(255,255,255,0);
灰色: rgba(200,200,200,0);
CSS背景
背景顏色
1、background-color （或者background的第一個(gè)取值），添加標(biāo)簽背景顏色
英文單詞取值:
red（紅色）
blue（藍(lán)色）
pink（粉色）
green（綠色）
rgba取值：
紅色: rgba(255,0,0,0);
綠色: rgba(0,255,0,0);
藍(lán)色: rgba(0,0,255,0);
黑色: rgba(0,0,0,0);
白色: rgba(255,255,255,0);
灰色: rgba(200,200,200,0);
背景圖片
1、background-image，添加標(biāo)簽背景圖片
取值：
url("圖片位置（網(wǎng)絡(luò)或者本地的絕對路徑和相對路徑都可以）")
例子：
background-image : url(images/girl.jpg);
background-image : url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg)
2、background-repeat，控制背景圖片的平鋪方式
取值:
repeat 默認(rèn), 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
例子：
background-repeat: repeat-y;
應(yīng)用場景:
① 可以通過背景圖片的平鋪來降低圖片的大小, 提升網(wǎng)頁的訪問速度
② 可以將多張圖片拼接成一張圖片
注意點(diǎn):
① 背景顏色和背景圖片可以共存, 圖片會(huì)覆蓋顏色
3、background-position，專門用于控制背景圖片的位置
格式：
background-position： 水平方向 垂直方向；
方位名詞:
水平方向: left（左） center（中） right（右）
垂直方向: top（上） center（中） bottom（下）
具體方位名詞取值：
background-position: left top;
具體像素取值：
background-position: 100px 200px;
注意點(diǎn)：
① 記住一定要寫單位, 也就是一定要寫px
② 記住具體的像素是可以接收負(fù)數(shù)的
4、background-attachment，修改背景關(guān)聯(lián)方式
取值：
scroll 默認(rèn)值， 背景會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
fixed 背景不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
5、background，統(tǒng)一配置背景相關(guān)屬性
格式：
background : 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式；
例子：
background: red url("images/video1.jpg") bottom center fixed no-repeat;
注意點(diǎn)：
① background屬性中，任何一個(gè)屬性都可以被省略
img插入圖片與background設(shè)置背景圖片的區(qū)別
1、背景圖片僅僅是一個(gè)裝飾, 不會(huì)占用位置，插入圖片會(huì)占用位置
2、背景圖片有定位屬性, 所以可以很方便的控制圖片的位置，插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
3、插入圖片的語義比背景圖片的語義要強(qiáng), 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片
精靈圖，可以減少請求的次數(shù), 以及可以降低服務(wù)器處理壓力
注意點(diǎn)：
CSS的精靈圖需要配合背景圖片和背景定位來使用
例子：
.box{
width: 86px;
height: 28px;
background-image: url(images/weibo.png);
background-position: -425px -200px;
}
精靈圖：
[圖片上傳失敗...(image-af0945-1532753536550)]
CSS頁面布局排版
1、標(biāo)準(zhǔn)流（文檔流/普通流）
① 其實(shí)瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式
② 在CSS中將元素分為三類, 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
③ 在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版
2、浮動(dòng)流
① 浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式
② 浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對齊或者右對齊
注意點(diǎn)：
① 浮動(dòng)流中沒有居中對齊, 也就是沒有center這個(gè)取值
② 在浮動(dòng)流中是不可以使用margin: 0 auto;
③ 在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
④ 無論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
⑤ 在浮動(dòng)流中無論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
浮動(dòng)流特點(diǎn)：
① 如果前面一個(gè)元素浮動(dòng)了，后面一個(gè)元素沒有浮動(dòng)，那么前面元素會(huì)蓋住后面元素
② 相同方向的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面
③ 不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)
④ 浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來確定（標(biāo)準(zhǔn)流時(shí)在第幾行，浮動(dòng)就會(huì)在第幾行）
浮動(dòng)前（都是標(biāo)準(zhǔn)流）：
浮動(dòng)后：
⑤ 浮動(dòng)元素貼靠現(xiàn)象，如果父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從原需要貼靠的最后一個(gè)元素開始往前（最后一個(gè)元素貼靠的前一個(gè)元素）貼靠，如果貼靠了前面所有浮動(dòng)元素之后都不能顯示, 最終會(huì)貼靠到父元素的左邊（左浮動(dòng)）或者右邊（有浮動(dòng)），無論父元素的最左邊或者最右邊能不能容下該元素 都會(huì)貼靠在這里
⑥ 浮動(dòng)元素字圍現(xiàn)象，浮動(dòng)元素不會(huì)擋住沒有浮動(dòng)元素中的文字, 沒有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置,這個(gè)就是浮動(dòng)元素字圍現(xiàn)象
清除浮動(dòng)的原因
① 在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度
② 在浮動(dòng)流中浮動(dòng)的元素不可以撐起父元素的高度，所以需要清除浮動(dòng)才能使得元素既浮動(dòng)又能撐起父元素高度
清除浮動(dòng)的方法
① 給父元素配置高度（如此就不需要再讓內(nèi)容撐起高度）
缺點(diǎn)：無法讓高度根據(jù)內(nèi)容自適應(yīng)增長，在企業(yè)開發(fā)中能不寫高度就不寫高度
② 利用 clear:both; 屬性清除前面浮動(dòng)元素對當(dāng)前元素的影響
clear屬性取值：
none 關(guān)閉（默認(rèn)）
both 讓當(dāng)前浮動(dòng)元素不去尋找前面的浮動(dòng)元素
缺點(diǎn)：使用clear:both之后，當(dāng)前元素的margin（外邊距）屬性會(huì)失效，失效原因是由于當(dāng)前元素的父元素是body，如果使用margin-top 會(huì)把父元素一起頂下來，而body是無法被頂下來的，所以margin屬性無效。
③ 隔墻法，在兩個(gè)有浮動(dòng)子元素的盒子之間添加一個(gè)額外的塊級(jí)元素
外墻法，在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素，并且給這個(gè)塊級(jí)元素設(shè)置clear:both屬性
缺點(diǎn)：外墻法只能讓第二個(gè)盒子使用margin-top屬性，不能讓第一個(gè)盒子使用margin-bottom屬性，如果需要給兩個(gè)盒子間增加間隙，最好通過額外的元素添加高度實(shí)現(xiàn)
內(nèi)墻法，在前一個(gè)盒子子元素中最后位置添加一個(gè)塊級(jí)元素，并且給這個(gè)塊級(jí)元素設(shè)置clear:both屬性
優(yōu)點(diǎn)：內(nèi)墻法既可以讓第二個(gè)盒子使用margin-top屬性，也可以讓第一個(gè)盒子使用margin-bottom屬性，內(nèi)墻法可以撐起第一個(gè)盒子的高度
缺點(diǎn)：需要額外添加一個(gè)塊級(jí)元素
④偽元素的clear:both（最優(yōu)方案）：
.clearfix::after{
content:'';
display:block;
clear:both;
}
3、文檔流
什么是文檔流？
文檔流就是CSS中每個(gè)元素最基本的流向?qū)傩?，比如?nèi)聯(lián)元素的流向就是在 單行空間內(nèi)從左向右流，塊級(jí)元素本來的流向就是每一塊占滿每一行從上到下流。
absolute是什么？
絕對定位，只要position值配置了非static的值以后，該元素就會(huì)脫離文檔流，脫離文檔流的元素就會(huì)開啟top、left、right、bottom 四個(gè)屬性，而絕對定位的元素會(huì)根據(jù)父元素中上一個(gè)脫離文檔流的元素作為基準(zhǔn)，去使用上面四個(gè)新開啟的屬性。
relative是什么？
相對定位，以自己本來的位置為基準(zhǔn)，使用脫離文檔流后新增的top、left、right、bottom 四個(gè)屬性
