前言：css在瀏覽器中生成CSSOM樹（即CSS Object Modle）。JavaScript可以操作CSSOM樹。CSSOM樹和Dom樹生成render樹。render樹然后根據(jù)CSS中的值進行布局，最后將render樹在瀏覽器中繪制出來。然后，可以通過JavaScript操作render樹，對于改變了元素大小或者元素在樹中的結(jié)構(gòu)，都需要回流（即重新布局），然后進行重繪。

前面講解了CSS的各種規(guī)定，具體能應(yīng)用到哪些方面呢？【不同的元素，屬性值有不同之處】

（一）文字排版

1.字體

font-family 屬性應(yīng)包含多個字體名稱作為“后備”系統(tǒng)，以確保瀏覽器/操作系統(tǒng)之間的最大兼容性。請以您需要的字體開始，并以通用系列結(jié)束（如果沒有其他可用字體，則讓瀏覽器選擇通用系列中的相似字體）。字體名稱應(yīng)以逗號分隔。

注釋：如果字體名稱不止一個單詞，則必須用引號引起來，例如："Times New Roman"。

例如：body{font-family:"宋體";} 選擇器{font-family：“字體名稱”}

這里注意不要設(shè)置不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設(shè)置的字體，就會顯示瀏覽器默認的字體。（因為用戶是否可以看到你設(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。）

現(xiàn)在一般網(wǎng)頁喜歡設(shè)置“微軟雅黑”，如下代碼：

       body{font-family:"Microsoft Yahei";}

或

       body{font-family:"微軟雅黑";}

注意：第一種方法比第二種方法兼容性更好一些。

font-family:"microsoft yahei",simhei; 這句到底設(shè)置為微軟雅黑還是黑體，為什么寫2個字體？^{字體設(shè)置都是設(shè)置集合。意思是：優(yōu)先使用微軟雅黑，如果客戶端未安裝雅黑則使用黑體，如果兩者都找不到，則使用系統(tǒng)默認字體。像中文環(huán)境，只能指定：雅黑，黑體，宋體，楷體。其中宋體多為默認。雅黑只有VISTA及以上才預(yù)裝。一般對中文最好不指定字體，非使用藝術(shù)字體的話可以使用圖片形式。}

2.字號、顏色

字號: 選擇器{font-size：x px;} 顏色:選擇器{color：red;}

可以使用下面代碼設(shè)置網(wǎng)頁中文字的字號為12像素，并把字體顏色設(shè)置為#666(灰色)：

  body{font-size:12px;color:#666;}

  3.字體樣式
  font-style屬性主要用于指定斜體文本。

此屬性可設(shè)置三個值：

normal - 文字正常顯示
italic - 文本以斜體顯示
oblique - 文本為“傾斜”（傾斜與斜體非常相似，但支持較少）

我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實現(xiàn)設(shè)置文字以粗體樣式顯示出來。

    p span{font-weight:bold;}

  p span{font-weight:normal;}  

在這里大家可以看到，如果想為文字設(shè)置粗體是有單獨的css樣式來實現(xiàn)的，再不用為了實現(xiàn)粗體樣式而使用h1-h6或strong標簽了。

3.字符轉(zhuǎn)換

text-transform 屬性處理文本(字母)的大小寫。這個屬性有 4 個值：

none

upercase

lowercase

capitalize

默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。

作為一個屬性，text-transform 可能無關(guān)緊要，不過如果您突然決定把所有 h1 元素變?yōu)榇髮懀@個屬性就很有用。不必單獨地修改所有 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個修改：

     h1 {text-transform: uppercase}

使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規(guī)則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

5.white-space（^{一個元素內(nèi)容中的空白的處理}）

屬性設(shè)置如何處理元素內(nèi)的空白

通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經(jīng)完成了空白符處理：它會把所有空白符合并為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：

可以用以下聲明顯式地設(shè)置這種默認行為：

    p {white-space: normal;}

上面的規(guī)則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個值，換行字符（回車）會轉(zhuǎn)換為空格，一行中多個空格的序列也會轉(zhuǎn)換為一個空格。

值 pre

不過，如果將 white-space 設(shè)置為 pre，受這個屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會被忽略。

如果 white-space 屬性的值為 pre，瀏覽器將會注意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當于一個 pre 元素。

值 nowrap（不能換行，除非遇到<br/>）

與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 <td nowrap> 將一個表單元格設(shè)置為不能換行，不過 white-space 值可以應(yīng)用到任何元素。

值 pre-wrap 和 pre-line

當 white-space 屬性設(shè)置為 pre-wrap 時，瀏覽器不僅會保留空白符并保留換行符，還允許自動換行

7.縮進^{【1.只能用于塊狀元素的首行縮進；2.值可以是負值也可以是正值】}

中文文字中的段前習(xí)慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現(xiàn)：

  p{text-indent:2em;}    2em的意思就是文字的2倍大小

注意：一般來說，可以為所有塊級元素應(yīng)用text-indent屬性，但無法將該元素應(yīng)用于行內(nèi)元素，圖像之類的替換元素也無法應(yīng)用text-indent屬性。不過，如果一個塊級元素（比如段落）的首行中有圖片，它會隨該行的其余文本移動。

提示：如果想把行內(nèi)元素的第一行進行縮進，可以用左內(nèi)邊距或者外邊距創(chuàng)造這種效果。

text-indent的屬性值可以是長度，長度甚至可以是負值。

使用負值

text-indent可以使用負值.利用這種技術(shù)，可以實現(xiàn)很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊。例如：

p{text-indent:-5em;}

不過在text-indent設(shè)置負值的時候要小心，如果對一個段落設(shè)置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。

為了避免出現(xiàn)這種顯示問題，建議針對負縮進再設(shè)置一個外邊距或一些內(nèi)邊距：

   p {text-indent: -5em; padding-left: 5em;}
  

8.word-spacing（單詞間隔）

word-spacing屬性增加或減少單詞間的空白（即間隔）；該屬性定義元素中字之間插入多少空白符。針對這個屬性，“字”定義為由空白符包圍的一個字符串。如果指定為長度值，會調(diào)整字之間的通常間隔。所以，normal就等同于設(shè)置為0，允許指定負長度值，這會讓字之間擠得更緊。

9.letter-spacing^{（單詞/文字之間的間隔）}

letter-spacing用于增加或者減少字符間的空白（字符間距）；

該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長度時，會調(diào)整字母之間通常的間隔。因此，normal值相當于0.

注釋：允許使用負值，這會讓字母之間擠得更緊。

letter-spacing與word-spacing之間的區(qū)別：letter-spacing是設(shè)置字母（文字）之間的距離，而word-spacing設(shè)置單詞之間的間隔,word-sapcing對文字沒有效果！

10.文本裝飾

text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。text-decoration屬性規(guī)定添加到文本的修飾。這個屬性允許對文本設(shè)置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會“延伸”到后代元素中，即具有繼承性。

text-decoration 有 5 個值：

none

underline

overline

line-through

blink

（1）underline下劃線

有些情況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺上強調(diào)文字，可以使用下面代碼來實現(xiàn)：

p a{text-decoration:underline;}

（2）line-through刪除線

如果想在網(wǎng)頁上設(shè)置刪除線怎么辦，這個樣式在電商網(wǎng)站上常會見到：

上圖中的原價上的刪除線使用下面代碼就可以實現(xiàn)：

     .oldPrice{text-decoration:line-through;}

（3）blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。

（4）none 值會關(guān)閉原本應(yīng)用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：

    a {text-decoration: none;}

注意：如果顯式地用這樣一個規(guī)則去掉鏈接的下劃線，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區(qū)別）。

  8.行高（行高line-height和vertical-align：每個元素默認都有一個line-height值;每個元素同樣都有默認的對齊方式即vertical-align參考網(wǎng)址：https://www.cnblogs.com/keyi/p/5841222.html）

【1】行高的概念^{【默認情況下，一行內(nèi)容是按照基線對齊的。為什么呢？因為vertical-align的默認是baseline。在css的樣式屬性中，有些屬性不需要我們?nèi)ピO(shè)置都有默認值，因為瀏覽器給設(shè)置了默認值，比如，text-align的默認值是：left！切記：line-height和vertical-align只要有一個就存在另一個的值！兩個相偎相依，不可分割！】}

line-height行高是指文本行兩行文字基線之間的距離。「行高line-height實際上就是兩行文字之間的距離，跟元素沒有直接的關(guān)系，即，不管給什么元素設(shè)置了行高，這個 都指的是該元素所包含文本的兩行文字基線之間的距離（包含文本的元素有內(nèi)聯(lián)元素，內(nèi)聯(lián)塊狀元素，塊狀元素）。可以為一個塊級元素、內(nèi)聯(lián)塊狀元素、內(nèi)聯(lián)元素設(shè)置line-height，但這個值要么是直接讓子元素繼承（<div><span>X</span></div>//這里的line-height直接繼承給span子元素，line-height應(yīng)用到了span元素中的文字X。），要么就是直接應(yīng)用到該元素直接包含的文本中（<div><span>X</span>Y</div>//這里的line-height一是span元素繼承，了另一方面應(yīng)用到了div所包含的”Y“這個文字上）。

那么，有一個問題，我們修改一下第二個要么中的例子：<div><span>X</span>Y</div>即div這個元素包含一個內(nèi)聯(lián)元素，這個內(nèi)聯(lián)元素的行高是50px,而div元素的Y文字的行高是30px，div元素的這一行怎么顯示呢？豈不是層次不齊？【首先span的文本的行高是50，相比要么2中，那么就會在X這個字體的上下再各j加10px。這樣X字體就向下偏移了10px,而div元素中的文字Y則保持不變。這樣，div元素這一行豈不是層次不齊？這就需要vertical-align來解決這個問題，即讓一行中的子元素如何和父元素的這一行對齊。所以這就解釋了為什么light-height和vertical-align必須同時都存在，不可分割。一行中的所有行內(nèi)框都可以有自己的line-height，把這一行整的亂七八糟，這就需要這一樣的子元素設(shè)置vertical-align來收拾自己的殘局，保持父元素這一樣的干凈整潔。】

注：對于塊狀元素和內(nèi)聯(lián)塊狀元素，如果高度固定，設(shè)置line-height設(shè)置的值過大，則會導(dǎo)致文字溢出，并不會改變塊狀元素或者內(nèi)聯(lián)塊狀元素的尺寸以及顯示的位置。 例一<div>

    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px">
    <!--<span>X，查找一個元素的基線</span>X<span></span>-->
</div>

　 　 顯示如下：

1.我們給父元素div設(shè)置line-height：150px.分析：這個行高應(yīng)用于兩個部分：1.繼承給子元素；2.自己應(yīng)用于自己包含的文字。這里，div只有一個子元素，故而只能應(yīng)用于1即繼承。故而，這里的div高度不會改變。（這里div高度沒有設(shè)置為固定值，如果設(shè)置為固定值，div中即使有文字，也無論值設(shè)置的多大，div的高度都不會改變）。對于子元素img是一個內(nèi)聯(lián)塊狀元素，由于這個元素里面沒有文字，故而繼承來的line-height也沒有勇武之地。因而，保持現(xiàn)有樣式不會改變

這里如果給div里面添加文字，即：

<div>
    X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px">
    <!--<span>X，查找一個元素的基線</span>X<span></span>-->
</div>

　 　分析由于div的line-height是150px,故而X的行高就是150px，而X的底邊緣是div的基線，而行框中的行內(nèi)框的垂直對齊方式（vertical-align:baseline）默認值是基線對齊，故而圖片和X的底邊緣對齊。

例二 ：測試行高對行內(nèi)塊狀元素的影響（塊狀元素高度固定的的情況下，沒有影響，只是如果設(shè)置的行高值太大，文字會溢出。和塊狀元素一樣的）

<div>
    <!--X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px">-->
    <span></span>
</div>

顯示如下：

1.給父元素div設(shè)置line-height：150px；這里的分析和上面的圖片分析一樣，沒有任何改變。

2.給內(nèi)聯(lián)塊狀元素添加文字。

<div>
    <!--X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px">-->
    <span>X，測試line-height對內(nèi)聯(lián)塊狀的影響</span>
</div>

分析：div設(shè)置了line-height：80px;子元素塊狀元素span內(nèi)聯(lián)塊狀元素繼承了該屬性，由于div中沒有文字，故而不會對div有影響。對于內(nèi)聯(lián)塊狀元素span，由于其里面有文字，故而line-height作用于這些文字中即line-height：80px。對于高度固定的內(nèi)聯(lián)塊狀元素，line-height只是讓文字溢出。并不會改變該元素的位置和高度。

3.如果在2的基礎(chǔ)上，我們給div元素再添加一個內(nèi)聯(lián)塊狀元素呢？元素的位置應(yīng)該顯示在哪?

分析： 新的內(nèi)聯(lián)塊狀元素的行高繼承了div的行高，也就是行高為80px；又因為默認的是基線對齊，即新增的內(nèi)聯(lián)元素的基線要和父元素的基線對齊。而父元素中之前只有一個子元素，故而父元素的基線為原來子元素的基線。而原來的子元素是一個內(nèi)聯(lián)塊狀元素，由于該內(nèi)聯(lián)塊狀元素中有文本，故而基線為正常流中最后一個內(nèi)容所確定的基線。通過上圖，我們知道最后一行"height對內(nèi)聯(lián)”的基線在這個些文字的底邊緣，故而新增的內(nèi)聯(lián)塊狀元素的基線和最后一行文字的底邊緣對齊；那么新增的內(nèi)聯(lián)塊狀元素的基線在哪呢？由于只有一行文字，故而基線為這行文字的底邊緣。顯示結(jié)果如圖所示：

這里為什么div的高度會變化？首先因為div沒有設(shè)置固定值。其次，受第二個子元素的影響。第二個子元素也沒有設(shè)置高度，因為行高是80，故而其高度被撐到80.又因為div沒有設(shè)置告訴，故而這個子元素又把父元素撐大了。

行高對內(nèi)聯(lián)元素的影響：

1.行高會影響內(nèi)聯(lián)元素的位置！因為內(nèi)聯(lián)元素就是文字，故而文字因行高顯示在哪，內(nèi)聯(lián)元素就顯示在哪。內(nèi)聯(lián)元素的高度由字體大小決定。

2. 行高不會應(yīng)縣內(nèi)聯(lián)盒子的高度。只改變其顯示的位置。注：內(nèi)聯(lián)盒子包圍著文字，故而內(nèi)聯(lián)盒子和文字之間還有一小丟丟距離，這個距離就是我們選中文字的時候，藍色背景和文字之間的那一丟丟距離。如圖所示：

<div>
    <!--X<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="100px" width="100px">-->
    <!--<span>X，測試line-height對內(nèi)聯(lián)塊狀的影響</span><span>X</span>-->
    <span>X，測試line-height對內(nèi)聯(lián)的影響，X，測試line-height對內(nèi)聯(lián)的影響</span>X
</div>

這里注意，X和最后一行之間的對齊。X和span標簽里面的文字對齊，而不是和span標簽的底部對齊。因為是基線對齊，故而，一定是文字的底邊對齊。

」

這一小節(jié)我們來學(xué)習(xí)一下另一個在段落排版中起重要作用的（行高）屬性（line-height），如下代碼實現(xiàn)設(shè)置段落行間距為1.5倍。

*行高與行高有關(guān)的一些定義

    行高只是（就是）兩行文字之間的基線距離。（一行指的的就是行框，一行的上線是行框的頂端，下線是行框的底端。第一行的行框和該元素的內(nèi)容區(qū)的上邊重合。至于最后一行是否和該元素的內(nèi)容區(qū)的下邊重合，視情況而定）

這也明說行內(nèi)框=line-height的高度值；（我們所寫的每一行文字或者一行中的一部分內(nèi)容就是行內(nèi)框的表現(xiàn)，即文字在行內(nèi)框的中間，二分之一的行間距就是除了文字之外的空隙部分。）

  行內(nèi)框：line-height（行高）-內(nèi)容區(qū)域【內(nèi)容區(qū)就是鼠標選中文字的區(qū)域，這個區(qū)域是由字體大小和字體樣式?jīng)Q定的，如果是宋體，則字體大小剛好=內(nèi)容區(qū)的高度；其他字體，則內(nèi)容區(qū)高度一般>字體大小】=行間距；

         內(nèi)容區(qū)+兩個半行間距=行內(nèi)框（我們能夠看到的高度就是行內(nèi)框。）。
           

  行框：一行中，行內(nèi)框的最頂端與行內(nèi)框最低端的距離為行框。
          
          

示例： <p>這是一行普通的文字，這里有個<em>em</em>標簽。</p>

鼠標選中文字的時候，選中的則為內(nèi)容區(qū)域

*line-height的特點：

行高只是幕后黑手，高度的表現(xiàn)不是行高，而是內(nèi)容區(qū)和行間距。這句話怎么理解呢？就是說，我們給一個元素只有一行內(nèi)容，我們給該元素設(shè)置行高為20px,我們所看的20px的高度就是1/2行間距+內(nèi)容區(qū)域+1/2行間距的高度即行內(nèi)框。而行高，我們是看不見的，沒有表現(xiàn)出來，雖然它決定這行文字的高度。

一定要注意，行高指的是兩行文字之間的基線距離。那么這兩行文字的基線該如何確定呢？

*基線^{（這里說的基線和vertical-align基本沒有關(guān)系，vertical-align是元素和其父元素的對齊方式。每個元素的每一行都有一條基線。至于這一行的基線怎么確定？就是在這一行輸入一個X，X的底邊緣就是本行的基線。）}

總說基線基線，那么基線的位置在哪呢？

元素一個行的基線就是在這一行輸入字母X的底邊緣！

基線分為元素行內(nèi)基線和內(nèi)聯(lián)塊狀元素基線。元素行內(nèi)基線就是上述的基線；內(nèi)聯(lián)塊狀元素就是整個元素的基線，該基線具體的確定方式根據(jù)元素的情況有所不同。

1.內(nèi)聯(lián)元素的基線（內(nèi)聯(lián)元素比較特殊，內(nèi)聯(lián)盒子沒有行高，只是其內(nèi)部的每一行都具有行高）

即整個內(nèi)聯(lián)塊狀元素盒子的基線的確定方式如下：（內(nèi)聯(lián)元素的一個行的基線的確定方式。）

2.內(nèi)聯(lián)塊狀元素（把內(nèi)聯(lián)塊狀元素當做一個盒子，該盒子的基線的確定）

即如果內(nèi)聯(lián)塊狀元素為空或者overflow屬性不是visible、該內(nèi)聯(lián)塊狀元素設(shè)有float或者position:abslute，基線為margin低邊緣；否則，受里面圖片文字等決定的。

例如：

<style>
    .inblock_base_line{
        display: inline-block;
         100px;
        height: 100px;
        border: 1px solid;
    }
</style>

<div>
    <div class="inblock_base_line"></div>
    <div class="inblock_base_line">z_x_linejah</div>X加啊啊啊啊啊啊
</div>

這個的顯示結(jié)果會是啥呢？我們分析一下，首先 .inblock_base_line這兩個元素都是內(nèi)聯(lián)塊狀元素，那么其和父元素的其他元素顯示在一行，而且他們都沒有設(shè)置vertical-align即即和父元素的對齊方式，因此默認這兩個內(nèi)聯(lián)塊狀元素和該元素的對齊方式是：該元素的基線和其所在行的基線對齊。

父元素的基線即所在行的基線："X加啊啊啊啊啊"在頁面中的位置的底邊緣。

第一個元素的基線：因為該元素是空，因此 ，該元素的基線是margin的邊緣。

第二個元素的基線：因為該元素是包含正常流，因此，該元素的基線是正常流最后一個包含元素的基線，即z_x_linejah的基線

三條基線都找到了，根據(jù)這個內(nèi)聯(lián)塊狀元素的基線都要和其所在行的基線對齊，因此，最后頁面的顯示結(jié)果為：

*塊狀元素整個盒子不需要基線，因為其獨占一行，根本沒有其他元素和其在一行，因此，不需要vertical-align屬性

行高和基線的關(guān)系： 一個元素的相鄰兩條基線之間的距離是由行高決定的。行高越大，基線之間的距離就越大。每一行的基線的位置：在該行輸入X,X的底部就是這一行的基線的位置。

*內(nèi)聯(lián)元素和內(nèi)聯(lián)塊狀元素的規(guī)則——與line-height不可分割的另一個屬性Vertical-align.

每一個內(nèi)聯(lián)塊狀元素和內(nèi)聯(lián)元素都有一個屬性就是vertical-align，這個屬性就是表示整個元素和父元素的所在行的對齊方式，所有的內(nèi)聯(lián)元素或者內(nèi)聯(lián)塊狀元素都默認有這個屬性，并且這個屬性是:vertical-align:baseline,即內(nèi)聯(lián)元素或者內(nèi)聯(lián)塊狀元素和其所在行的基線對齊。(當然內(nèi)聯(lián)元素或者內(nèi)聯(lián)塊狀元素內(nèi)部的每一行都有l(wèi)ine-height和基線)，vertical-align不針對元素內(nèi)部，而是元素整個盒子和其父元素的其所在行的對齊方式。

這里會有一個問題，如果這個內(nèi)聯(lián)塊狀元素所在行沒有文字，那么它怎么跟該行的基線對齊呢？這時候，我們就可以默認為父元素的該行有個隱形的X，這個X在哪，這行的基線就在哪。

*line-height的屬性值

normal：行高和瀏覽器有關(guān)，不同的瀏覽器下，行高不一樣。在同一瀏覽器下，字體大小不同或者不同的字體的行高也不一致，例如同樣大小的24號字體的宋體和微軟雅黑的行高也不一樣。

因此，我們在實際開發(fā)中，為了避免這種不確定性，在body及其元素里面進行reset初始化

因此，一般推薦使用數(shù)值

*line-height的應(yīng)用

【1】行高和圖片的表現(xiàn)[*******因為每個內(nèi)聯(lián)塊狀元素或者內(nèi)聯(lián)元素的屬性vertical-align的默認值是：baseline，即其基線要和父元素的基線對齊，因此，在實際開發(fā)中會遇到各種各樣的因為基線對齊而產(chǎn)生的問題，根據(jù)這個根本原因，所有的問題都可以有解決的辦法******幽靈空白節(jié)點！]

替換元素（圖片等【只要是display:inline-block水平，都可以將其看成是一個圖片。這個元素后面跟圖片一樣跟著幽靈空白節(jié)點。相當于一個看不見的X吧】）

　　 默認地，行內(nèi)替換元素位于父元素的基線上(也就是假如在父元素中輸入X，X的底邊緣)【因為圖片沒有包括內(nèi)容，因此其基線就是margin的邊緣，也就是圖片的底邊緣是】。替換元素的基線是正常流中最后一個內(nèi)容的基線。除非，該替換元素內(nèi)容為空或者本身的overflow屬性值不是visible，這種情況下基線是margin底邊緣；圖片的基線就是底線^{【因為img標簽沒有內(nèi)容】}

行高和圖片實際占據(jù)高度的關(guān)系:行高不會影響圖片實際占據(jù)的高度,也就是說不管行高怎么變化，圖片所占據(jù)的高度都不會改變。

實戰(zhàn)中遇到的問題以及解決辦法：

塊狀元素中只有圖片，有空隙

父元素div沒有設(shè)置高度以及行高^{【前提條件】}，并且只有一個img子元素。如圖所示，圖片下方有間隙，不是根據(jù)img的高度顯示。這是為什么？分析如下：

1.首先圖片是一個內(nèi)聯(lián)塊狀元素，因此，A.圖片這個盒子是有基線的，這個基線就是圖片的底邊緣；

B.這個圖片有默認的屬性vertical-align:baseline，因此，這個圖片的基線要和所在行的父元素的基線對齊。

2.父元素的基線：這個例子中，父元素只有圖片一個子元素，沒有其他的文字，該行的基線怎么找呢？那就是我們可以默認在這行有一個隱藏X，這個X的下邊緣就是該行的基線。圖片的基線也就是和隱藏的文字X的下邊緣對齊。

3.因為瀏覽器會對所有元素都設(shè)有默認的行高，因此，div的每一行都有一個默認的行高，這個行高的表現(xiàn)就是X的上邊和下邊都各加（行高-X字體的內(nèi)容區(qū)）/2。因此，這里，圖片不能和div的底邊緣重合，空隙的部分就是1/2的行間距。

解決辦法：

1.解決X的底部的1/2的行間距。我們修改瀏覽器給div設(shè)置的默認的line-height，修改為line-height：0，這樣行間距都成了負值，沒有了行間距。【一般不采用這種方式】

2.修改圖片和父元素的對齊方式。即修改瀏覽器給img圖片設(shè)置的默認vertical-align，修改為vertical-align:top/middle/bottm

3.將圖片設(shè)置為display：block。這樣的話，這個圖片就沒有vertical-align這一屬性，即不需要和誰對齊了，獨占一行。

即

【2】line-height與居中^{[1.看家本領(lǐng)：設(shè)置行間距；2.圖片、文字居中（行內(nèi)元素和行內(nèi)塊狀元素）記住：vertical-align對塊狀元素沒有作用，因為vertical-align的對齊必須有跟其一行的參考元素！]}

父容器寬度固定，必須line-height 或者line-height和vertical-align配合使用 ^{【注：父元素的內(nèi)容區(qū)的頂端總是和第一行的行框盒子的頂端重合。如果沒有設(shè)置高度，那么父元素的底端和最后一行的行框盒子的底端重合。如果設(shè)置了高度，那么就會文字內(nèi)容溢出】}

1.單行文本的居中：^{【這里指的是父容器高度固定；如果高度不固定，以下面的為例，父容器的高度是被子元素撐開的。父元素的高度是無知的，怎么垂直居中呀？】}

例如<p>我是一個段落</p>

現(xiàn)在我們要實現(xiàn)P元素中的這句話在P元素中垂直居中。分析如下：

首先這個P元素有一個默認的行高，這個行高的值是瀏覽器給定的。這個時候，P元素的內(nèi)容 ”我是一個段落“文本形成的匿名行內(nèi)框，這一行只有這一個行內(nèi)框，故而這個行內(nèi)框也就是行框。又因為這個行框是第一行的行框，故而這個行框的上邊和P元素的內(nèi)容區(qū)的上邊重合，而這個行內(nèi)框的高度是瀏覽器給定的，這里假設(shè)是20。這時候我們給p元素的line-height也設(shè)置100px，這時候每基線會下移，即行內(nèi)框的高度為100px(行高=行內(nèi)框)，即這時候這個行內(nèi)框的下邊和p元素的下邊重合，而又因為文字在行內(nèi)框中間，故而就實現(xiàn)了單行文本在父元素中的垂直居中。

即設(shè)置height=line-height。<p></p>

演變：（1）<div style='height=100px;line-height=100px'><p>我是一個段落</p></div>//這里其實和上面一個例子的本質(zhì)是一樣的，雖然給父容器設(shè)置了line-height,但是line-height具有繼承性，故而p元素繼承了這個屬性。【反正你給了我line-height的值，那么我的行內(nèi)框的值也就是怎么多，我要在行內(nèi)框中居中，而p元素沒有設(shè)置高度，故而p元素的高度就是行內(nèi)框撐開的高度，我就居中了】

演變：(2)<divstyle='height=100px;line-height=100px'><span>我是一個段落</span></div>//這里也是一樣，因為繼承性。但是這里和上面一個例子有不同之處，span元素的內(nèi)容區(qū)的高度不會改變，只是行間距改變了。

再例如：

總結(jié)：對于單行文本無輪是父容器設(shè)置line-height=height還是子元素設(shè)置line-height=父容器的height，子元素中的單行文本都會居中顯示(這是因為子元素繼承了父元素的line-height的值，故而子元素中的文本會在子元素中居中)^{【這里的子元素沒有設(shè)置line-height值和高度.即子元素和父元素的高度一樣的[對于能夠設(shè)置高度的塊狀元素或者內(nèi)聯(lián)塊狀元素]】}。當然，只有一個父容器包圍的單行文本同樣也會居中顯示。

2.多行文字在父容器中的垂直居中：^{【這個父容器當然也是高度固定，高度不固定，怎么垂直居中？}】

多行文字的垂直居中可以把整體看成一個圖片一樣的元素，居中方式和圖片一樣。

//這里添加一個空元素i,設(shè)置為內(nèi)聯(lián)塊狀元素（目的是可以設(shè)置高度），高度設(shè)置的和父元素一樣高（這樣，這個元素就是最高的行內(nèi)框盒子了，故而父元素的頂端和底端剛好可以和行框頂端底端對齊，從而這個元素的中心點就是父元素的中心點）。這個元素設(shè)置vertical-align：middle，父元素的基線往上1/2處和這個元素的中點對齊，故而父元素的中心點和這個元素的中心點重合，這時候給多行文本設(shè)置vertical-align，故而多行文本的中點和父元素的中點剛好重合。

3.圖片在父容器中的垂直居中：^{【這個父容器當然也是高度固定，高度不固定，怎么垂直居中？}】

<!--圖片的垂直居中-->
<div>
    <img src="../1.png">
</div>

我們想讓img在父元素div中居中，該怎么設(shè)置CSS呢？我們分析：

1.圖片是一個內(nèi)聯(lián)塊狀元素，可以和其他的元素在一行中顯示。因此，我們可以給父元素設(shè)置line-height=height，這樣，我們父元素的隱藏的X就居中了。而內(nèi)聯(lián)元素都必須有vertical-align屬性即該元素和父元素中其所在行的隱形元素X對齊方式，這時候我們可以修改圖片的vertical-align:middle即圖片的中線和父元素的基線往上1/2X的高度處對齊，即圖片的中點和父元素的垂直方向的中點對齊，故而實現(xiàn)了圖片的近似垂直居中。

即：

<!--圖片的垂直居中-->
<div>
    <img src="../1.png">
</div>

再例如：

這時候，我們給父容器設(shè)置line-height：300.(同時給圖片后面加一個X，便于理解！) 分析：X因為是文字，故而其行高是300px。圖片雖然繼承了行高300PX，但是圖片中沒有文字，故而行高對它的沒有任何作用。這個父容器中一共有兩個子元素，故而行框的頂端為最高的X這個行內(nèi)框的頂端，行框的最底端為X這個行內(nèi)款的最底端。又由于父元素的最頂端和第一行行框的頂端對齊，而長度都是300，故而父元素的底端也和這個行框的底端對齊。故而，X在垂直方向上就是這個父元素的中心位置。又由于圖片和父元素的基線對齊，故而，顯示如下圖所示：

X倒是居中了，我們要實現(xiàn)的圖片居中啊！這時候就需要用到vertical-align:middle了即改變圖片和其所在行基線的對齊方式為中點對齊。【單獨將圖片摘出來，和其所在行的基線看是怎么對齊。具體的對齊方式在vetical-align中講解】

這里我們給圖片設(shè)置：vertical-align:middle,即圖片的中點和父元素基線往上1/2X處對齊，故而實現(xiàn)了其垂直居中。（近似垂直居中）

總結(jié)：圖片垂直居中（父元素高度固定，設(shè)置父元素高度和行高值一樣大；img設(shè)置vertical-align：middle）

父容器高度不固定，無法設(shè)置line-height=height。只需要vertical-align就可以實現(xiàn)垂直居中（這個例子和上述的例子本質(zhì)很相似。只不過這里父容器沒有設(shè)置高度，故而可以實現(xiàn)父容器的頂端和第一行的行框盒子的頂端對齊，父容器的底端和最后一行的行框盒子的底端對齊。只有圖片和文字。包含文字的元素設(shè)置為內(nèi)聯(lián)塊狀元素，相當于圖片。父容器的頂端和底端和這兩個中一個的內(nèi)聯(lián)盒子的頂端和底端重合。如過左邊的高度沒有圖片的高度大，那么父元素的高度則為圖片的高度。<這里的圖片就和上面設(shè)置的<i></i>元素一樣。圖片的中點和父容器的中點重合，給圖片設(shè)置vertical-align:middle,圖片的中點和父元素基線往上1/2處對齊，這時候又因為圖片高度和父元素的高度一樣，故而二者完美重合，因為這時候圖片還是和原來現(xiàn)實一樣。這時候，我們給左邊的元素設(shè)置vertical-align:middle,即這個元素的中心點和圖片的中心點在一條線上，故而這個元素的中點就和父容器的中心點在一條線上，故而實現(xiàn)了左邊的垂直居中，二者都居中了。反之，如果左邊大高度大，一樣的道理>）

*line-height與內(nèi)聯(lián)元素【^{行高的表現(xiàn)，內(nèi)聯(lián)元素[一般情況下，一個內(nèi)聯(lián)元素應(yīng)該是只有幾個文字，反正就是最多是一行文字的。]不同于內(nèi)聯(lián)塊狀元素和塊狀元素。內(nèi)聯(lián)元素里面的文字的行高除了受自身行高的影響外，還可能受和其在行的其他元素的影響即行框的高度。如果內(nèi)聯(lián)元素的行高<行框的告訴，雖然給內(nèi)聯(lián)元素設(shè)置行高，但是該元素的文字表現(xiàn)的行高是行框的高度。】}

一行是由不同的行內(nèi)框盒子組成的行框，因此，父元素的這一行就是行框

（1）行內(nèi)元素設(shè)置行高，為什么不生效還是表現(xiàn)為父類盒子的行高？

例如：<p><span>文本內(nèi)容</span></p>

請注意暗紅色的幽靈空白節(jié)點是塊狀元素貌似特有的一個性質(zhì)，是看不見的，無形的(塊狀元素的每一行都有這么一個幽靈空白節(jié)點)。本質(zhì)是因為這個span元素要和父元素中其所在行的基線對齊，而這時候這一行沒有父元素的文字，因此只能以隱藏的X的基線作為父元素這一行的基線，從而span元素的基線和該元素的基線對齊。

例如：

<head>
    <style type=""text/css">
          p{line-height:96px;}
          span{line-height:20px;}
    </style>
</head>
<body>
     <p>
           <span>span標簽中的文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
     </p>
</body>

為了讓文字換行體現(xiàn)效果，我把瀏覽器縮窄一些，span標簽中的文字放多一點，上述代碼頁面表現(xiàn)為：

如上圖，span的line-height屬性確實設(shè)置上了，并且覆蓋了來自繼承父類p元素的line-height值96px,但是從Span的表現(xiàn)來看，行高仍然是96px！行高失效?

分析：span的行高應(yīng)該是20px，幽靈空白節(jié)點的行高為96px，這個行高撐起了高度，所以父元素的高度為最高的高度即可以認為是該行的高度就是行框。

但是，這里通過換行我們可以發(fā)現(xiàn)span表現(xiàn)的并不是20px,而是96px ！而且通過調(diào)試器我們發(fā)現(xiàn)，上下調(diào)整span的line-height頁面根本一點變化都沒有，紋絲不動！

這時候小白就要說話了，行內(nèi)元素的行高設(shè)置無效！聰明的你試一下就會發(fā)現(xiàn)，行內(nèi)元素當然是可以設(shè)置行高屬性的。那這里為什么會設(shè)置無效呢？其實當你設(shè)置span的行高超過父元素的時候，你就會發(fā)現(xiàn)，有意思的現(xiàn)象出現(xiàn)了！

沒錯，span的行高生效了！

那么問題來了，說不生效吧，比父元素行高大的時候它生效了，說生效吧，小于父元素行高的時候多少都沒用，什么情況?問題不急著回答，再看下面一個例子：

高度不用說，按照張大佬得出的大值特性，肯定是160px。那行高呢？各位不妨猜猜最終的表現(xiàn)，

結(jié)合上述盒子模型圖，在這個例子中應(yīng)該是這樣的

幽靈空白節(jié)點繼承父元素的行高屬性 ，各個內(nèi)聯(lián)盒子自身有自身的行高屬性，但是這些“行高屬性”都不是作用在自身而是作用在如圖的行框盒子上，

而行框盒子又反過來讓其內(nèi)的所有內(nèi)聯(lián)盒子表現(xiàn)出行高的特性。打個通俗點的比方講就是，爸爸問自己的兒子們今晚吃啥，兒子們提意見，爸爸其中一個的意見后發(fā)出命令，今晚大家都吃這個！

兒子們自己決定不了，但可以提意見，切回行高就是，內(nèi)聯(lián)盒子決定不了自己所在行的行高，但是可以告訴行框盒子，我想是這么多！(line-height:***)

最后帶來一個小例子，提醒一下各位看官，行框盒子的行高也不是固定，什么意思呢？還是上例的樣式（為了方便觀看，我為對應(yīng)元素加上底色，

同時去掉margin和padding的影響），請看：

調(diào)整瀏覽器的寬度，使換行，效果如下：

就不賣關(guān)子，直接說了，這里變成了這樣：

一個包含盒子（包含塊）p，4個行框盒子，4個行框盒子。

第一個行框盒子里包含了幽靈空白節(jié)點+span標簽的前部分，

第二個行框盒子包含了幽靈空白節(jié)點、span標簽的后部分和em標簽的前部分，

第三個行框盒子包含了幽靈空白節(jié)點、em的后部分和b標簽的前部分，

第四個行框盒子包含了幽靈空白節(jié)點、b標簽的后部分。

四行表現(xiàn)的行高分別是 40px 、80px、160px、160px。

最后的最后來個總結(jié)：

1. 行內(nèi)元素的line-height屬性是去設(shè)置該元素所在行框盒子的行高，行框盒子取其內(nèi)部所有內(nèi)聯(lián)盒子要求的行高的最大值，定為當前行的行高，所有內(nèi)聯(lián)盒子遵守這個最終行高來行事！

2.換行后生成新的行框盒子，新生成的行的行高，重新在當前行包含的內(nèi)聯(lián)盒子中選拔最高者定之！

行高具體到每一行，每一行根據(jù)每個內(nèi)聯(lián)盒子的行高而確定該行的行高，注意別忘了幽靈空白即隱藏的X文字。如果該行有父元素的文字，那么這個隱藏的X文字就在該行消失了。

切記，切記，切記：line-height，基線、vertical-align使用的時候只按照定義來，不要自己胡亂給人家加一些東西。

而且，要注意，一行就是行框區(qū)域。一個元素的第一行的行框的上邊緣和該元素的上邊緣重合。最后一行行框的下邊緣和該元素的下邊緣：如果該元素沒有設(shè)置高度，則兩條線重合；如果如元素設(shè)有高度，則極有可能不會重合。當然如果是由padding，則是和padding的邊緣重合。

9.vertical-align^{【對齊行內(nèi)元素是x相對齊。比如該元素對于父類基線的垂直對齊方式。也就是說，vertical-middle能夠作用的元素就是那些和其他元素顯示在一行的元素。那么這些元素肯定就是內(nèi)聯(lián)元素，內(nèi)聯(lián)塊狀元素，以及td。而塊狀元素獨占一行，沒有參考對齊的元素，故而失效】。【line-height：只負責元素內(nèi)的兩行文字的基線距離；line-height中的元素包括：塊狀元素、內(nèi)聯(lián)塊狀元素、內(nèi)聯(lián)元素。vertical-align：負責是元素和該元素所在父元素的這一行的對齊方式。即該元素和父元素的對齊方式。vertical-align中的元素包括：內(nèi)聯(lián)塊狀元素、內(nèi)聯(lián)元素。vertical-align是以整個元素為一個盒子，這個盒子整體和其父元素中的其所在行的對齊方式。】}

　 *定義： 用來設(shè)置內(nèi)聯(lián)塊狀元素的垂直對齊方式；該屬性定義了行內(nèi)元素和父元素的的垂直對齊方式。

vertical-align 屬性設(shè)置元素的垂直對齊方式。

應(yīng)用于: 行內(nèi)元素、替換元素、表單元格【按照vertical-align的定義，這些元素必須是能夠和其他元素顯示在一行的元素。塊狀元素獨占一行，它哪有能和它所在行的基線對齊？】

特點： 所有垂直對齊的元素都會影響父元素的行高^{（這句話的意思是，父元素雖然自己設(shè)置了行高，但是父元素的每一行的行高，取決于行框的高度。如果行框>父元素的行高，則父元素的這一行被撐開。）}，vertical-align是用來對齊imline水平以及table-cell元素.其中，inline水平包括：1.img,em,a等內(nèi)聯(lián)元素；2.inline-block塊狀內(nèi)聯(lián)元素；table-cell則為td元素.[這里一定要注意，vertiacl-align是元素與父元素的對齊方式。而不是與其他元素的對齊。比如基線對齊，指的是內(nèi)聯(lián)元素或者內(nèi)聯(lián)塊狀元素和父元素的其所在行的基線的對齊]

值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit繼承

【用法：對于vertical-align:top/bottom,設(shè)置這兩個屬性值得元素，都是相對于其他的進行對齊。具體對齊方法就是：將要對齊的行內(nèi)框盒子從原來的隊列中抽離出來，然后和剩余組成的進行各種對齊！如果，這個元素抽離出來之后，沒有參考的對齊元素，那么這時候就利用匿名的參考元素進行對齊！而且，記得，要對齊的元素是自己跑下去或者跑上去進行對齊，只是因為dom元素的一些特效，故而表面看著像是其他組成的跟著這個要對齊的盒子進行位置變化！】

可分類為：

注：我們知道display也有很多屬性值，其中以inline/inline-block/block三個最常見，這代表了頁面上三種不同水平的元素。而vertical-align的部分屬性值只對inline-block水平元素起作用，例如：一個元素屬于inline-block（table-cell也可以理解為inline-block水平）水平，，其身上的vertical-align：middle才會起作用。所以，類似下面的代碼就不會起作用：

    span{vertical-align:middle;}//為什么內(nèi)聯(lián)元素設(shè)置vertiacl會失效？因為，以vertical-align:middle為例，由于內(nèi)聯(lián)元素沒有高度，故而怎么找到其中點呢？沒辦法設(shè)置
    div{vertical-align:middle;}//對于塊狀元素為什么設(shè)置vertical-align會失效呢？因為塊狀元素獨占一行，哪里還有其他元素組成的基線去參考呢？因而也沒辦法去弄！
    故而，只有內(nèi)聯(lián)塊狀元素才可以！！！！

    所謂inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以與inline水平元素混排，又能設(shè)置高寬屬性的元素。哪些元素呢，例如圖片，按鈕，單復(fù)選框，單行/多行文本框等HTML控件，只有這些元素默認情況下會對vertical-align:middle屬性起作用。
   雖然vertical-align:middle屬性只會在inline-block水平的元素上起作用，但是其影響到的元素涉及到inline屬性的元素，這里千萬記住，inline水平元素受vertical-align:middle而位置改變等不是因為其對vertical-align:middle屬性敏感或起作用，而是受制于整個line box的變化而不得不變化的，這個后面會較為深入的分析。
    總結(jié)：塊狀元素：vertical-align是完全失效的，塊狀元素就根本沒有vertical-align這個屬性
        內(nèi)聯(lián)塊狀元素：vertical-align的所有屬性值都可以使用。
        內(nèi)聯(lián)元素：vertical-align：middle對該元素失效。內(nèi)聯(lián)元素怎么找中垂線？高度都沒有。而且，這里的內(nèi)聯(lián)元素指的是只有一個的內(nèi)聯(lián)元素。如果一個內(nèi)聯(lián)元素包含多行，不好
  *vertical-align起作用的前提
    
   
                            
      即為什么是默認狀態(tài)下呢？因為display屬性可以改變元素的顯示水平，即塊狀可以改為內(nèi)聯(lián)塊狀等。
      這樣可以引申出，vertical-align不能用于float position等元素，因為float等已將元素塊狀化。
     附加：table-cell和inline水平還是有區(qū)別的

     table-cell作用于自身，即table-cell的垂直居中只適用于自身元素，其里面的子元素設(shè)置不起作用，必須將table-cell和vertical-align同時設(shè)置給內(nèi)容需要垂直居中的元素
   例如
        <style type="text/css">
               p{
                   display:table-cell;  
                   vertical-align:middle;
                 }
       </style>
-----------------------------------------------------------------------------
       <p>
              <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3023806798,280362912&fm=26&gp=0.jpg" width="100px" height="100px"> 
       </p>
     
     
  *vertical-align的值
    【1】初始值: baseline【所有的內(nèi)聯(lián)元素、內(nèi)聯(lián)塊狀元素、表單的td元素，都有vertical-align屬性，這個屬性的默認值是瀏覽器給設(shè)置的，它的默認值是vertical-align：baseline】
     即如果一個元素沒有設(shè)置vertical-align，那么這個元素的vertical-align的默認值就是baseline，即該元素的基線和父元素的該元素所在行的基線對齊。所在行的基線的位置的確定就是在該行輸入一個X，X的底邊緣就是父元素的該行的基線的位置。
    在line-height中，有關(guān)于基線對齊的例子，這里就不展示了。 
   【2】vertical-align的線性對齊(相對于父級的整個內(nèi)聯(lián)盒子頂部對齊，不是后面的某個元素；其中，這里的整行內(nèi)聯(lián)盒子要把要對齊的元素摘出來，不包括該元素。即該元素對齊于除了該元素外的所有整行內(nèi)聯(lián)元素形成的頂部對齊)

     （1）vertical-align：bottom
         定義：inline/inblock元素：元素的底部和行框盒子的底部對齊；【這里一定要注意這個元素，這個元素是我們平時說的盒子，包括margin、padding、border、content。元素的底部，就是這個元素盒子的底部。即margin的底邊緣】
             table-cell:單元格底部padding邊緣和表格行底部對齊；                
          
           例如：
<!--vertical-align:bottom-->
<div>
    <span>呵呵呵呵</span>X
</div>
          
          
    （2）vertical-align：top
         定義：inline/inblock元素：元素的頂和行框的頂部對齊；【這里一定要注意這個元素，這個元素是我們平時說的盒子，包括margin、padding、border、content。元素的頂部，就是這個元素盒子的頂部。即margin的上邊緣】
             table-cell:單元格頂部padding邊緣和表格行頂部對齊；
            
    （3）vertical-align：middle【只使用于內(nèi)聯(lián)塊狀元素】

       定義：inline/inblock元素：元素的垂直中心點和父元素基線上1/2X高度處對齊；
            table-cell:單元格頂部padding邊緣和表格行頂部對齊；
       例一：關(guān)于inline/inblock元素垂直居中
           給父元素設(shè)置line-height=height；
           給子元素設(shè)置vertical-align：middle
           至于原理和例子，line-height中都有，這里就不再重復(fù)了。
            我們在實際項目中，設(shè)置內(nèi)聯(lián)元素在父類元素中垂直居中，一般需要垂直居中的元素設(shè)置vertical-align：middle，父元素設(shè)置line-height=height就可以了，但是，這只是近似垂直居中，還需要給父類元素設(shè)置：font-size：0px才算是真正垂直居中。為什么呢？具體分析如下：
          
          如上圖所示，元素X的底線是基線，圖片中心也就是紅線所在的地方和基線往上1/2x的地方對齊，即x字符的中點和圖片中垂線重合。但是由于字符本來具有下沉的特點，因此這里的X字符的中點并非父容器的垂直中心點，因此具有一點偏差。解決的辦法:
                                          (1)設(shè)置父容器line-height=height,font-size為0。
                                          例如:
                                              
                                           代碼如下：
                                              
                                            (2)添加輔助元素【這種方式適應(yīng)用定高或者不定高的都可以】（這個和多行文字圖片垂直對齊一個原理）
                                               <1>主體元素imginline-block化(需要垂直居中的元素)
                                               <2>添加寬度為0，高度100%的輔助元素（沒有這一步也可以）
                                               <3>主體元素和輔助元素均設(shè)置vertical-align：middle； 
                                                                                                      
       例二：關(guān)于table-cell元素垂直居中
       
      例二：     
       
     
               
<!--vertical-align的多行文字圖片的垂直居中-->
<div>
    <div>
        <span>文字文字</span><img src="../1.png"><br>
    </div>
    <div>
        <span>文字文字<br>文字文字<br>wensdaf</span><img src="../1.png"><br>
    </div>
</div>
       分析如下：首先span設(shè)置為inline-block，是為了能夠使用middle屬性值。
             我們這里先給span設(shè)置vertical-align：middle，那么這時候span元素的中垂線和隱藏的X文字的基線往上1/2X（就是X的中心）對齊。這兩個盒子現(xiàn)在中垂線對齊了。
             這里我們又給img設(shè)置了vertical-align：middle，那么圖片的中垂線就需要和X的中垂線對齊，繼2，這時候這三個盒子的中垂線就全部對齊了。這三個行內(nèi)框形成了一個行框，這個行框的高度取決于圖片或者span元素的高度。不管是哪一個決定的，都無所謂。反正這個行框就是父元素的高度（父元素沒有設(shè)置高度）。而這三個行內(nèi)框都在該行框中垂直居中。從而實現(xiàn)了，上述的效果。
    【3】vertical-align文本類屬性值(行內(nèi)元素整個盒子的頂部或者底部和父元素的該元素所在行的隱藏的X或者父元素的該行的文字的頂部或者底部對齊。還是針對X的對齊）
      定義： vertical-align：text-top 盒子（要對齊的內(nèi)聯(lián)元素）的頂部和自身父級content area的頂部對齊即行內(nèi)盒子和其所在行的隱藏的X（或者父元素該行的文字）頂部對齊。
           vertical-align:text-bottom 盒子（要對齊的內(nèi)聯(lián)元素）的底部和自身父級content area的底部對齊即行內(nèi)盒子和其所在行的隱藏的X（或者父元素該行的文字）底部對齊。
      父級的內(nèi)容區(qū)：注釋：content area是看不見的，可以默認為是鼠標選中文字的區(qū)域（即鼠標選中X的區(qū)域或者該行中直接屬于父元素的文字），例如
      左圖中鼠標選中的藍色部分。
      （備注：content area只和字體大小相關(guān)，和行高等沒有關(guān)系即要對齊的行內(nèi)框盒子當設(shè)置text-top的時候，就是和同一行的匿名的X內(nèi)容區(qū)的頂部對齊！設(shè)置為text-bottom的時候，就是和這個匿名X的底部對齊！text-bottom到text-top之間切換，就是移動一個父元素font-size大小的距離而已！這個匿名的X怎么找？就是在和要對齊的輸入同一行中，輸入X字母的時候，X的位置就是參考的元素的位置并且這個X是要對齊元素的同胞！）
      
      當一個元素設(shè)置vertical-align為text-top或者text-bottom時，可以想象為父類元素中除了該元素沒有任何元素，就只有一個大小繼承父級字體大小的字體，該元素和這個字體的content area頂部或者底部對齊就可以了。
    例如：
    <div>
         <!--<span>圖文就這么一回事</span>-->
         <span>Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊</span>X<br>X<br>XX<br>XX<br>X</div>
    </div>
     
     1.這里我們設(shè)置第一個span（很長內(nèi)容的那個span）的vertical-align為text-top,結(jié)果如下：（注：這里我們以顯式的X作為參考，因為這個X和父元素匿名的X各方面都是一樣的。）
    
     這里，要對齊的span行內(nèi)框的頂端X這個content area（鼠標選中X的藍色區(qū)域）的頂端對齊！時刻記得無論哪種對齊，最后父元素的第一個行框的頂端要和父元素的頂端（即content的頂端對齊！）
     這里如果，我們給要對齊的這個元素的寬度設(shè)置為100%，對齊應(yīng)該是失效，因為其沒有給參考元素留位置，因為這個參考元素必須和其在同一行！
     2.我們給第一個span元素再設(shè)置text-bottom
     分析，元素的vertical-align:text-bottom就是要和其同一行的同胞匿名X（這里用顯示的X作為參照）的底部（鼠標選中這個X藍色區(qū)域的底部）對齊，即
      
     這里，向上移動對齊的span行內(nèi)框，移動到其底部和X的底部對齊的位置！這時候，這一行的行框就是
     
      因為是父元素的第一個行框，故而，這個行框的上邊緣和父元素的上邊緣重合，故而，顯示結(jié)果如下（表面上看著是X跑到元素的下面去，這是表象！其實X是不動的。要對齊的元素自己上移或者下移。）：
     
      對于第二行，第三行等等中的元素要text-top或者text-bottom都和上面的移動的規(guī)則是一樣的。【除了，第一行和最后一行的（高度不固定）的行框頂端/底端要和父元素的頂端或者底端重合，對于中間行的行框的頂端或者底端也要和上一行的底端或者下一行的頂端重合】
      實例：主要用于表情圖片（或者原始尺寸背景圖標）與文字的對齊效果
      
        1.使用基線存在圖標偏上的問題；
        2.使用頂線、底線的問題在于受其他內(nèi)聯(lián)元素影響，造成巨大定位偏差，例如，在后面插入一張圖片
        和想要的效果差距太大
       3.使用text-bottom
       
   【4】vertical-align上標下標（sup、supper）
         在實際項目中，幾乎用不到vertical-align:sub /supper
  【5】數(shù)值百分比類
      分為：數(shù)值類、百分比類
      數(shù)值、百分比類的共性：1.都帶數(shù)字       20% 20em 20px
                      2.都支持負值      基本上就是margin letterspacing worldspacing vertical支持負值，其他屬性基本沒有！
                      3.行為表現(xiàn)一致    
     數(shù)值：就是設(shè)置vertical-align的元素在其所在行的baseline的基礎(chǔ)上上下偏移對應(yīng)的數(shù)值大小。
     百分比：百分比和數(shù)值差不多，只是這個百分比是相對于行高計算的！
     例如：
<!--vertical-align的屬性值為數(shù)值/百分比-->
<div>
    <span id="span">某妹子：</span>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.gz2010.cn%2Fallimg%2F1712%2F56-1G20PS346.jpg%3Fx-oss-process%3Dstyle%2Fqr.gz2010&refer=http%3A%2F%2Fpic.gz2010.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635396861&t=cef1bbc56f75ea2f42b64598579eb276">X<br><br>
    <label>請選擇：</label>
    <select id="sel">
        <option value="baseline">baseline</option>
        <option value="1px">15px</option>
        <option value="1em">1em</option>
        <option value="20%">20%</option>
    </select>
</div>
<script>
    var select=document.getElementById('sel');
    var span=document.getElementById("span");
    select.onchange=function (e) {
        span.style.verticalAlign=e.target.value
    }
</script>
      
      當我們選擇15px或者1em的時候即包裹某妹子的span元素的 vertical-align:1em，這時候某妹子就是如下的表現(xiàn)。這是因為當vertical-align為數(shù)值的時候，其和父元素的對齊方式是：該元素的基線偏移父元素中其所在行的基線x px或者x em 。                  
           
      
    總結(jié)：對于vertical-align的屬性值的分類：a.和元素所在行的隱藏元素X對齊：1.baseline;2.vertical-align;3.text-top;4.text-button;
                                         b.和元素所在行的行框?qū)R：1.top;2.bottom
   【8】vertical-align前后不一的作用機制； 
      前面元素和后面元素（相鄰元素）的vertical-align值不一樣，該如何表現(xiàn)呢？
     <1>關(guān)于vertical-align:top/bottom  
       以圖文混合為例:
      
      在上圖中一個父容器中有三個內(nèi)聯(lián)元素，分別是一個圖片，兩個<span>標簽包含的內(nèi)聯(lián)元素。
       我們首先改變圖片的vertial-align的屬性值為top,表現(xiàn)結(jié)果如下：
       
      這里，圖標的頂部和”zxx：頂線和底線對齊“ 以及 ”我是醬油“的頂部對齊，切記這里，是圖片對比圖-跑到下面和文字對齊，不是文字跑上去和圖片對齊，之所以是這么顯示，因為DOM元素默認的一些特質(zhì)。具體分析如下：
                圖片要和父容器的整一行實現(xiàn)頂部對齊，那么，出來圖片這一元素，那么，剩下的”zxx：頂線和底線對齊“ 以及 ”我是醬油“這兩內(nèi)聯(lián)元素的頂部在哪，圖片就和哪對齊。
      再例如：我們將圖一中的內(nèi)聯(lián)元素“zxx：頂線和底線對齊”設(shè)置vertical-align:top.顯示結(jié)果如下如所示。（分析：除開要對齊的元素“zxx：頂線和底線對齊”，父容器的這一行中，剩余圖片和"我是醬油"這兩個內(nèi)聯(lián)元素，那么，整個行的最高的地方此刻是圖片的頂部，因此內(nèi)聯(lián)元素“zxx：頂線和底線對齊”和圖片的頂部對齊。設(shè)置”我是醬油“這個元素也是同樣的道理。）
     
    <2>vertical-align:text-top/text-bottom
        要對齊的元素會存在一點下沉，因為要實現(xiàn)元素和父容器的內(nèi)容區(qū)對齊。
    總結(jié)：   
  *vertical-align失效
  例一： 
<style type="text/css">
     img{
              vertical-align:middle;
        }
</style><p>
     <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3023806798,280362912&fm=26&gp=0.jpg" width="100px" height="100px"> 
</p>
     這里，img是inline水平，設(shè)置了vertical-align為middle，但是顯示結(jié)果如下：
     
     所有的條件都符合，為什么vertical-align還是失效呢？
     不是vertical-align：middle沒起作用，而是太短，不夠居中。分析如下：vertical-align：middle：元素的中垂線和父元素中該元素所在行的基線往上1/2X處對齊。
                                                      首先，這里只有圖片這個內(nèi)聯(lián)塊狀元素，其就和隱藏的X文字參照對齊。這一行的基線就是X的下邊緣。
                                                      然后，基線往上1/2就是X的中心位置。而X的行高是瀏覽器默認的，比較小一般。
                                                      最后，因為圖片設(shè)置了vertical-align：middle,即其中垂線就和隱藏的X的文字的中點對齊。即：      
                                                          
                                                          在這一行中，圖片的行內(nèi)框是最高的，因此這一行的行框也就是圖片的行內(nèi)框。這也是父元素的第一行，因此，父元素的內(nèi)容區(qū)的上邊和該行行框即圖片行內(nèi)框的上邊重合。故而圖片以及X的位置整體下移，直到父元素的上邊和圖片的上邊重合.故而就出現(xiàn)了圖片沒有居中的情況。
      解決的辦法：給父元素設(shè)置hight=line-height，這樣X就居中了，因為圖片的重錘點和X的中心對齊，故而就實現(xiàn)了對齊。
                       
   *vertical-align和line-height的關(guān)系
     
       只要是內(nèi)聯(lián)元素，就一定會受vertical-align和line-height的影響
   vertical-align是相對于父類的某一種，而不包括自身
 
    【1】小圖標和文字的對齊
        使用vertical-align數(shù)值實現(xiàn)；
    【2】不定尺寸圖片或多行文字的垂直居
      實現(xiàn)分為三步：
              
     例如：實現(xiàn)圖片垂直居中
     
     實現(xiàn)多行文字垂直居中
  
    
    
  
  10.段落排版--對齊（inline元素【有標簽包圍的文字或者裸露的文字】、inline-box元素水平方向在父元素對應(yīng)行中如何顯示。比如：center，也就是讓每個行內(nèi)框組成的行框在父元素對應(yīng)行中的水平方向上居中顯示。即行框的中垂線和父元素的對應(yīng)的這一行的中垂線對齊，可以將父元素這一行的中垂線看成是一個匿名的X元素。即行框的中垂線和位于父元素對應(yīng)行的中垂線上匿名元素X對齊）
    text-align是一個基本的屬性，它會影響一個元素中的文本行相互之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些復(fù)雜。
    值left right center 會導(dǎo)致元素中的文本分別左對齊、右對齊、居中對齊。
    想為塊狀元素中的文本、圖片設(shè)置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現(xiàn)文本居中顯示。(那么什么是塊狀元素呢？在后面的11-1、11-2小節(jié)中會講到。)
     h1{ text-align:center; } 
    <h1>了不起的蓋茨比</h1>
    同樣可以設(shè)置居左：
    h1{ text-align:left; } 
    <h1>了不起的蓋茨比</h1>
    還可以設(shè)置居右：
    h1{
       text-align:right;
      }
   <h1>了不起的蓋茨比</h1>
   這個屬性是設(shè)置給父元素的：即父元素里面的內(nèi)容在水平方向上如何顯示。
   例如：
<div>
    <!--<span>圖文就這么一回事</span>-->
    <span>Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊Bottom對齊</span>X<br>X<br>XX<br>XX<br>X</div>
</div>
 

   提示：將塊級元素或表元素居中，要通過在這些元素上適當?shù)卦O(shè)置左、右外邊距來實現(xiàn)。text-align僅僅針對內(nèi)聯(lián)元素、內(nèi)聯(lián)塊狀元素。ps：為什么塊狀元素設(shè)置了沒效果呢？分析如下：首先塊狀元素，在不設(shè)置寬度的情況下，獨占一行即
寬度本來就和父元素一樣寬，還哪里用空間讓其挪動？其二，給塊狀元素設(shè)置的寬度比父元素寬度小，這時候總有空間能挪動了嗎？No,除了這個子塊狀元素的寬度之外的那些寬度即（父元素寬度-子元素寬度）不好意思，分配給了auto這個屬性值！沒辦法，這就是塊狀元素的特質(zhì)！
   11.display屬性
   顯示或隱藏（display:none;）
   我們可以通過使用visibility屬性或display屬性來顯示或隱藏元素。
   要隱藏元素，請將display屬性設(shè)置為“none”或?qū)isibility屬性設(shè)置為“hidden”。
   visibility：hidden隱藏元素，但是元素仍然占據(jù)空間并影響布局。
    h1.hidden {
        visibility: hidden;
     }
  display：none隱藏元素，并從布局中刪除元素。
     h1.hidden {
        display: none;
    }
   block（塊）和 inline（內(nèi)聯(lián)）元素
    塊元素嘗試獲取整個寬度，并在布局中開始新行。一些HTML元素是塊元素或塊級元素。
   <h1>, <p>, <li>, <div>
    都是塊元素的示例。
    內(nèi)聯(lián)元素與其他內(nèi)聯(lián)元素保持在同一行中，并且不會開始新行。
    <a>, <span>是內(nèi)聯(lián)元素的示例。
   我們可以使用display屬性來更改塊或內(nèi)聯(lián)函數(shù)。
   以下代碼使li元素顯示為內(nèi)聯(lián)元素。不是開始一個新行作為正常li元素，它顯示li元素在同一行。
   li {
        display: inline;
      }

   以下代碼使span元素顯示為塊元素。現(xiàn)在每個span元素將像div元素，默認情況下它是一個塊元素。
   span {
          display: block;
       }
   Inline-Block（內(nèi)聯(lián)塊）
   inline-block值混合塊和內(nèi)聯(lián)特性。
   盒子的外部被視為內(nèi)聯(lián)元素。因此，不會為元素創(chuàng)建新行。
   框的內(nèi)部被視為塊元素，并應(yīng)用諸如寬度，高度和邊距的屬性。
   以下代碼顯示如何使用inline-block值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  display: inline;
}

span {
  display: inline-block;
  border: medium double black;
  margin: 2em;
   10em;
  height: 2em;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p>This is a test. <span>This is a test.</span>
  </p>
</body>
 </html>

　　性定義及使用說明
   display 屬性規(guī)定元素應(yīng)該生成的框的類型。



默認值：
inline


繼承：
no


版本：
CSS1


JavaScript 語法：
object.style.display="inline"




                                                              屬性值：



值
描述


none
此元素不會被顯示。


block
此元素將顯示為塊級元素，此元素前后會帶有換行符。


inline
默認。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。


inline-block
行內(nèi)塊元素。（CSS2.1 新增的值）


list-item
此元素會作為列表顯示。


run-in
此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。


flex
元素被設(shè)置為彈性盒子


marker
CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。


table
此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。


inline-table
此元素會作為內(nèi)聯(lián)表格來顯示（類似 <table>），表格前后沒有換行符。


table-row-group
此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。


table-header-group
此元素會作為一個或多個行的分組來顯示（類似 <thead>）。


table-footer-group
此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。


table-row
此元素會作為一個表格行顯示（類似 <tr>）。


table-column-group
此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。


table-column
此元素會作為一個單元格列顯示（類似 <col>）


table-cell
此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）


table-caption
此元素會作為一個表格標題顯示（類似 <caption>）


inherit
規(guī)定應(yīng)該從父元素繼承 display 屬性的值。





    1. display:no
    讓該元素隱藏，不顯示。
    2. display:block
    既是讓不是塊狀元素的元素稱為塊狀元素，又表示該元素顯示。
    舉例：
    我們要實現(xiàn)一個效果：
      點擊紅色區(qū)域，顯示一個下拉框， 

    當離開紅色區(qū)域或者離開該下拉框時，該下拉框隱藏
    1.在下拉框的父類中用overflow：hidden。當hover的時候，overflow：visible
<style type="text/css">
        .box{
             100px;
            height: 30px;
            background-color: #6a6666;
            position: relative;
            overflow: hidden;
        }
        .box_1{
             100%;
            height: 100%;
            background-color: red;
            text-align: center;
            line-height: 30px;
        }
        .box_2{
            border: 1px solid;
             30px;
            height: 30px;
        }
        .box:hover {
            overflow: visible;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box_1">我的購物車</div>
    <div class="box_2"></div>
</div>
     2.下拉框中用display：none 父類：hover .下拉框類{ display：block}
 <style type="text/css">
        .box{
             100px;
            height: 30px;
            background-color: #6a6666;
            position: relative;
            /*overflow: hidden;*/
        }
        .box_1{
             100%;
            height: 100%;
            background-color: red;
            text-align: center;
            line-height: 30px;
        }
        .box_2{
            border: 1px solid;
             30px;
            height: 30px;
            display: none;
        }
        .box:hover .box_2{
            /*overflow: visible;*/
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box_1">我的購物車</div>
    <div class="box_2"></div>
</div>
   
  display:flex
   display:flex是將容器變?yōu)閺椥院凶樱脕磉M行頁面布局。即對于某個元素只要聲明了display: flex，那么這個元素就成為了彈性容器，具有flex彈性布局的特性。
   塊狀元素申明為flex彈性盒子:display:flex;內(nèi)聯(lián)元素聲明為彈性盒子:display:inline-flex.
  （一）flex彈性盒模型
   對于某個元素只要聲明了display: flex;，那么這個元素就成為了彈性容器，具有flex彈性布局的特性。
    
   1.每個彈性容器都有兩根軸：主軸和交叉軸，兩軸成90度，默認如上圖所示的橫軸且從左向右的軸為主軸，縱軸且從上到下的軸為交叉軸。可以通過flex-direction來改變主軸和交叉軸。

   2.兩條軸都有各自的起點和終點；【1和2結(jié)合，決定了容器的主軸和交叉軸；從而決定了容器中的子元素按照什么順序在容器中排列】【容器中的所有子元素都是順著主軸，按照次序一次排列布局顯示】
   3.容器中的所有子元素【彈性元素】，永遠沿著主軸排列；
    4.彈性元素也可以通過display:flex設(shè)置為另一個彈性容器，形成嵌套關(guān)系。因此一個元素既可以是彈性容器也可以是彈性元素。
    彈性容器的兩根軸非常重要，所有屬性都是作用于軸的。下面從軸入手，將所有flex布局屬性串起來理解。
   彈性flex布局的12個屬性
    容器屬性
    1.flex-direction:row | row-reverse | column | column-reverse
    2.flex-wrap:nowrap | wrap | wrap-reverse
    3.flex-flow:flex-direction flex-wrap
    4.justify-content:flex-start | flex-end | center | space-between | space-around
    5.align-items:stretch | flex-start | flex-end | center
    6.align-content:stretch | felx-start | flex-end | center | space-between | space-around
    子元素屬性
    1.flex-grow:數(shù)值,默認值為0
    2.flex-shrink:數(shù)值，默認值為1
    3.felx-basis:默認值auto
    4.flex:flex-grow flex-shrink flex-basis
    5.align-self
    6.order
   二、主軸
    flex布局是一種一維布局模型，即子元素在容器的主軸上按照順序布局。也就是說，flex布局大部分的屬性都是作用于主軸的，在交叉軸上很多時候只能被動地變化。
    1.主軸方向【flex-direction來改變】
    我們可以在彈性容器上通過flex-direction
交叉軸就會相應(yīng)地旋轉(zhuǎn)90度。

彈性元素的排列方式也會發(fā)生改變，因為彈性元素永遠沿主軸排列。
    
    
    
    


    2.沿主軸的排列處理【flex-wrap】
    彈性元素永遠沿著主軸方向排列，那么排列不下，該如何處理？
    
   通過設(shè)置flex-wrap: nowrap | wrap | wrap-reverse可使得主軸上的元素不折行、折行、反向折行。
    nowrap:子元素不換行，都在容器的一行中布局。那么如上圖所示排列不下怎么辦？這就涉及到子元素的屬性flex-shrink即收縮。
    wrap:子元素顯示不下，換行顯示。那么折行之后行與行之間的間距（對齊）怎樣調(diào)整？這里又涉及到交叉軸上的多行對齊。
    wrap-reverse:反向折行，是從容器底部開始的折行，但每行元素之間的排列仍保留正向。
       
    3. 一個復(fù)合屬性
  flex-flow = flex-drection + flex-wrap
  flex-flow相當于規(guī)定了flex布局的“工作流(flow)”
    flex-flow: row nowrap;
   三、元素如何彈性伸縮應(yīng)對[容器主軸方向上，一行中，容器有剩余空間或者容器空間不足該如何處理？這里涉及到子元素屬性：flex-grow和flex-shrink]
    例如:當flex-wrap: nowrap;不折行時，容器寬度有剩余/不夠分，彈性元素們該怎么“彈性”地伸縮應(yīng)對？        
    這里針對上面兩種場景，引入兩個屬性(需應(yīng)用在彈性元素上)
flex-shrink：縮小比例（容器寬度<主軸方向上的一行元素總寬度（尺寸）時如何收縮）

flex-grow：放大比例（容器寬度>主軸方向上的一行元素總寬度（尺寸）時如何伸展）    
   1. flex-shrink: 縮小比例【子元素主軸方向的寬（主軸為column時是高）縮小的比例，交叉軸方向的高不變（主軸為column時是寬不變）】
   來看以下場景，彈性容器#container寬度是200px，一共有三個彈性元素，寬度分別是50px、100px、120px。在不折行的情況下，此時容器寬度是明顯不夠分配的，如下圖的第一行。 
#container{
    display:flex;
    flex-wrap:nowrap;
    200px;
}
   
   實際上，flex-shrink默認為1，也就是當不夠分配時，元素都將等比例縮小，占滿整個寬度。（如上圖所示）
   元素收縮的計算方法
   這里flex-shrink的默認值是1.          
容器剩余寬度：-70px(200px-50px-100px-120px)

縮小因子的分母：1*50 + 1*100 + 1*120 = 270 (1為各元素flex-shrink的值)

以第一個元素為例：元素1的縮小因子：1*50/270

縮小的主軸方向尺寸為：1*50/270*(-70px)

第一個元素主軸方向縮小后的尺寸：50px+[1*50/270*(-70px)]=37.03px
   注：一行元素按照各自的尺寸在容器的主軸方向上排列布局，如果排列不下，要么換行要么元素都按照各自設(shè)置的flex-shrink進行縮小，如果子元素沒有設(shè)置flex-shrink，默認值是1;
    總結(jié)：flex-shrink只作用于主軸方向，且是針對每一行中的元素，只要顯示不下而且不換行，就按照子元素的flex-shrink屬性設(shè)置的值進行縮小。
        即：容器主軸尺寸<一行元素主軸方向尺寸之和，子元素就縮小即flex-shrink屬性就生效。如果尺寸相等或者主容器主軸尺寸>一行子元素主軸方向尺寸之和，子元素的flex-shrink就失效。
        如果某個子元素不想收縮，則可以設(shè)置flex-shrink：0
   2. flex-grow: 擴大比例【子元素主軸方向的寬（主軸為column時是高）擴大的比例，交叉軸方向的高不變（主軸為column時是寬不變）】
    同樣，彈性容器#container寬度是200px，但此時只有兩個彈性元素，寬度分別是50px、100px。此時容器寬度是有剩余的。 
    那么剩余的寬度該怎樣分配？而flex-grow則決定了要不要分配以及各個分配多少。
    （1）在flex布局中，容器剩余寬度默認是不進行分配的，也就是所有彈性元素的flex-grow都為0。
       
     (2)如果某個子元素的flex-grow不為0，則按照flex-grow設(shè)置的分數(shù)進行擴大。
     元素放大的計算方法：放大的計算方法并沒有與縮小一樣，不會將元素大小納入考慮。
     如上例中容器寬度：200px, 第一行的子元素主軸方向的尺寸分別為50px、100px,共剩余200-50-100=50px；
     然后，根據(jù)這一行的子元素各自設(shè)置的flex-grow的總和為總份數(shù)，50px/總份數(shù)；
     其次，每個子元素擴大的尺寸為:50px/總份數(shù)*該元素flex-grow的值
     最后，該元素的尺寸為：原來尺寸+擴大尺寸
     以上圖為例：1.假設(shè)這里第一個子元素的flex-grow:3,第二個子元素的flex-grow：2，則，第一個子元素擴大的尺寸為:50/(3+2)*3=30,第二個子元素擴大的尺寸為:50/(3+2)*2=20;第一個子元素的最終尺寸為：50+30=80px,第二個子元素的最終尺寸為:100+20=120px
              2.假設(shè)這里第一個子元素的flex-grow:1,第二個子元素的flex-grow:0;則，第一個子元素擴大的尺寸為：50/(1+0)*1=50,第二個子元素不擴大。
     注：子元素的屬性flex-grow只作用于在容器的主軸方向的尺寸，并且容器尺寸-子元素主軸方向尺寸之和>0,且子元素設(shè)置了flex-grow不為0，然后根據(jù)子元素設(shè)置的flex-grow將剩余空間按分數(shù)分配給每個子元素的主軸方向尺寸
         無剩余空間時，flex-grow設(shè)置無效，例如：下圖中，彈性容器的寬度正好等于元素寬度總和，無多余寬度，此時無論flex-grow是什么值都不會生效。
        
        同理，對于flex-shrink，在容器寬度有剩余時也是不會生效的。因此這兩個屬性是針對兩種不同場景的互斥屬性。
               
    四、彈性處理與剛性尺寸（flex-basis）
     flex還提供了一個flex-basis屬性。flex-basisi的本質(zhì)就是替代width即等同于width。
   flex-basis設(shè)置的是子元素在主軸上的初始尺寸【子元素在主軸上的尺寸，等同于width的屬性】，默認值為auto；所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸.即一個子元素中既有flex-basis又有width，則在容器主軸上的尺寸是以flex-basis為尺寸，此時width無效。
     這里有個需要記憶的一個公式:子元素的在容器中的尺寸：
     
     1.在決定 Flex 子元素的尺寸方面，記住很重要的一點，就是最終尺寸（final flex-basis）會受min-width和max-width屬性限制。
     2.如果未指定flex-basis，flex-basis將回退到width屬性。如果未指定width屬性，flex-basis將回退到基于 Flex 項目（主軸方向子元素）內(nèi)容的計算寬度值（computed width）。
     例如：我們使用 1000px 寬、包含一些 子元素的 Flex 容器來說明：
        
       設(shè)置寬度width
          .item{200px}
          我們將Flex 項目設(shè)置為 200px × 200px 的大小。如下圖所示：
          
        這個例子里，我們沒有為 容器子元素指定flex-basis（也就是取默認的flex-basis: auto），因此基礎(chǔ)尺寸會回退到width（200px）。
        此時，設(shè)置的width等同于設(shè)置flex-basis。
         
      設(shè)置 flex-basis
       下面我們再為 Flex 子元素指定flex-basis，看看會產(chǎn)生什么效果。
        
       
       可以看見，指定了flex-basis后，width屬性被忽略、不再起作用（相當于沒有設(shè)置）。
        我們關(guān)心的是最終尺寸。最佳實踐是使用flex-basis而非width或height。特別是，Safari 瀏覽器上還有一個古老的 bug：在使用了height而非flex-basis屬性的 Flex 項目上felx-shrink屬性不會生效。
        總結(jié)：flex-basis就是子元素在容器主軸方向上布局是使用的尺寸，如果flex-basis沒有設(shè)置，則使用width（column時，height）充當flex-basis,或者width沒有設(shè)置則，元素的content尺寸作為flex-basis尺寸
       
     flex-basis 受限于 max-width
       Flex 項目的最終尺寸會受到min-width和max-width屬性影響。我們在 Flex 子元素上設(shè)置max-width看一下：
            
       如上圖所示：雖然flex-basis設(shè)置了250px，但是卻達到了100px的max-width限制。因此最終尺寸是100px，此時，F(xiàn)lex 項目還是能很好的放在 Flex 容器中的。
      現(xiàn)在我們再設(shè)置min-width看下對最終尺寸的影響：
        
       雖然指定了flex-basis: 100px，但是因為不能比250px的min-wdith更小。因此，最終尺寸是250px，F(xiàn)lex 項目能正好裝在 Flex 容器中：
          
     So，flex-basis 到底是什么？
       現(xiàn)在我們知道了在flex-basis未指定的情況下，width是它的回退方案，min-width和max-width是限制了最終尺寸的上限和下限。So，flex-basis到底是什么？
       在上圖里，你也可能注意到了，放入 Flex 容器之前，我們可視化了 Flex 項目的大小。之所以這樣做，就是為了說明這就是flex-basis：即 Flex 項目放入 Flex 容器之前的尺寸（譯者注：也就是項目的max-content大小）。這是 Flex 項目的理想或者說假想尺寸。但是    為flex-basis指定的值不能保證就是 Flex 項目的最終尺寸！一旦我們將 Flex 項目放入 Flex 容器之后，事情就有改變了。上例中，F(xiàn)lex 容器的尺寸是剛剛好的，因此項目放在里面都是 OK 的，因為所有項目的最終尺寸加起來正好是 Flex 容器的寬度（1000px）。這很好，但通常所有 Flex 項目的felx-basis相加之后，F(xiàn)lex 容器不是空間不足就是空間過剩，而不是像這樣剛剛好。
       當空間不夠的時候
        假設(shè)我們像容器中放置了更多flex-basis: 200px的項目：
       
        在放入容器之前，它們中的每一個都占據(jù)200px的尺寸，一共是1600px。但是我們的容器只有1000px寬。結(jié)果是，我們沒有足夠的空間裝得下這么多 Flex 項目，結(jié)果 Flex 項目默認會收縮以便適應(yīng)不足的容器尺寸：
      
       所有項目的起始寬度是200px，因為空間不夠，所以 Flex 項目開始收縮以適應(yīng)容器空間（變?yōu)槊總€125px）。flex-shrink用于控制收縮比例。可以通過給flex-shrink指定一個更大或更小的值來控制收縮的程度，甚至可以設(shè)置為0，表示不許收縮。             
      當有剩余空間的時候
     有時候，當我們把所有 Flex 項目的最終flex-basis加到一起后，容器還有剩余空間。
     
      我們可以指定我們的 Flex 項目在放入 Flex 容器之后伸展，來占據(jù)剩余空間，這是通過flex-grow屬性控制的，此屬性默認為0，表示不會伸展。下例中，我們?yōu)槊總€ Flex 項目都設(shè)置了flex-grow: 1（以相同比例伸展）來占據(jù)剩余空間。
        增長和收縮是 Flexbox 布局的一大亮點，也是 Flexbox 在響應(yīng)式 UI 設(shè)計方面如此出色的原因。
      widthvs flex-basis
       現(xiàn)在能夠區(qū)分width和flex-basis了吧，min-width和max-width會限制最終的尺寸。而當flex-direction為column或column-reverse的時候，那就是flex-basis跟height的關(guān)系了。
      
     五、子元素復(fù)合屬性flex
       常用的復(fù)合屬性 flex
        flex = flex-grow + flex-shrink + flex-basis
        復(fù)合屬性，前面說的三個屬性的簡寫。
             
      一些簡寫
 flex: 1 = flex: 1 1 0%

 flex: 2 = flex: 2 1 0%

 flex: auto = flex: 1 1 auto;

 flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸縮
      flex:1 和 flex:auto 的區(qū)別
     其實可以歸結(jié)于flex-basis:0和flex-basis:auto的區(qū)別。
   flex-basis是指定初始尺寸，當設(shè)置為0時（絕對彈性元素），此時相當于告訴flex-grow和flex-shrink在伸縮的時候不需要考慮我的尺寸；相反當設(shè)置為auto時（相對彈性元素），此時則需要在伸縮時將元素尺寸納入考慮。
   五、容器內(nèi)如何對齊【每一行的所有子元素沿著主軸如何對齊：justify-content；每一行所有子元素在交叉軸上如何對齊：align-items；所有行作為一個整體，在交叉軸上如何對齊：align-content】
     前面講完了元素大小關(guān)系之后，下面是另外一個重要議題——如何對齊。可以發(fā)現(xiàn)上面的所有屬性都是圍繞主軸進行設(shè)置的，但在對齊方面則不得不加入作用于交叉軸上。需要注意的是這些對齊屬性都是作用于容器上。
     1.justify-content每一行在主軸上的對齊方式
      
      如上圖所示：主軸有起點和終點。justify-content就是每一行沿著主軸如何對齊。具體對齊的值以及結(jié)果如下圖所示：
     
      1.justify-content:flex-start，表示每一行在主軸上，靠著主軸的起點進行布局；（相當于按照順序依次布局好之后，整體向左移動，直到第一個元素與主軸的起點對齊）
     2.justify-content:flex-end,表示每一行在主軸方向上，靠著主軸的終點顯示。（相當于按照順序依次布局好之后，整體向右移動，直到最后一個元素與主軸的終點對齊）
     3.justify-content:flex-center,表示每一行在主軸方向上，在主軸的中點顯示。（相當于按照順序依次布局好之后，元素組成的整體的中垂線與容器中垂線對齊）
     4.justify-content:space-between,表示每一行的所有子元素，在主軸方向上，第一個子元素靠著起點、最后一個子元素靠著終點，其余的子元素間隔相等的布局在主軸方向上。
     5.justify-content:space-around,表示每一行的所有子元素，在主軸方向上，每個元素左右間隔相等的排列布局   

     2. 交叉軸上的對齊方式【每一行在交叉軸方向上如何對齊：因為交叉軸也有起點和終點，】
      
     主軸上比較好理解，重點是交叉軸上。因為交叉軸上存在單行和多行兩種情況。
     A.align-items【每一行元素的所有元素即每一行整體在交叉軸上的對齊方式】
        1.默認值：stretch，當子元素在交叉軸方向上沒有設(shè)置固定的尺寸，則子元素會沿著交叉軸方向?qū)⑷萜髟诮徊孑S方向撐滿。
              
        當align-items不為stretch時，此時除了對齊方式會改變之外，元素在交叉軸方向上的尺寸將由內(nèi)容或自身尺寸（寬高）決定。       
       2. flex-start【在交叉軸方向上，整行靠著交叉軸的起點布局】
       
       3.flex-end[在交叉軸方向上，整行靠著交叉軸的中點局部]   
       
      4.flex-center
      
      5.flex-baseline
      
     注意，交叉軸不一定是從上往下，這點再次強調(diào)也不為過。
        
     B.align-content:交叉軸上的多行對齊[多行作為整體在交叉軸方向上的對齊：因為交叉軸有起點和終點]
    還記得可以通過flex-wrap: wrap使得元素在一行放不下時進行換行。在這種場景下就會在交叉軸上出現(xiàn)多行，多行情況下，flex布局提供了align-content屬性設(shè)置對齊。
     首先明確一點：align-content只對多行元素有效，會以多行作為整體進行對齊，容器必須開啟換行。【對于只有一行的容器設(shè)置該屬性無效】

    
    在屬性值上，align-content比align-items多了兩個值：space-between和space-around。
    對于align-content和align-items的區(qū)別：align-items是一行作為整體；align-content是所有行作為整體 。
    1.align-content:默認值也是stretch。兩者同時都為stretch時，毫無懸念所有元素都是撐滿交叉軸。【當子元素在交叉軸方向上的尺寸固定時，元素不拉伸】
    所有行的元素（尺寸不固定的元素）都拉伸，所有行整體占滿交叉軸。
    a.align-item和align-content的值同時為stretch，結(jié)果如下圖所示
   
    b.當align-item的值不為stretch，每一行元素不拉伸，但是因為align-content設(shè)置為stretch，因此，多行整體依舊撐滿交叉軸，每一行都默認有一定的高度，這個高度看不見
    例如
    
    為什么？因為align-content會以整行為單位，此時會將整行進行拉伸占滿交叉軸；而align-items設(shè)置了高度或者頂對齊，在不能用高度進行拉伸的情況下，選擇了用間距。
    
     2.align-content不為stretch
     A.align-item:stretch
     align-items僅僅管一行，因此在一行中某個子元素設(shè)置了高度的情況下，這一行的其他元素遵循align-items: stretch也被拉伸到設(shè)置了固定尺寸的元素的高度。而其他行則保持高度不變。
     例如：
        
        
         B.align-content和align-items都不為stretch
         例如：
            
            以第一個圖為例，會發(fā)現(xiàn)align-content會將所有行進行頂對齊，然后第一行由于第二個元素設(shè)置了較高的高度，因此體現(xiàn)出了底對齊。
  兩者差異總結(jié)：
兩者“作用域”不同

align-content管全局(所有行視為整體)

align-items管單行
  
   （六）能否更靈活地設(shè)置交叉軸對齊（align-self：子元素自身在交叉軸上的對齊方式）
    除了在容器上設(shè)置交叉軸對齊，還可以通過align-self單獨對某個元素設(shè)置交叉軸對齊方式。
值與align-items相同

可覆蓋容器的align-items屬性

默認值為auto，表示繼承父元素的align-items屬性
    
    （七）order：更優(yōu)雅地調(diào)整元素順序
    
     （八）總結(jié)
     
     
     參考阮老師博文中的骰子練習(xí)，我做了張圖，大家不妨可以各自實現(xiàn)下，理解之后應(yīng)該能夠比較輕松地寫出來。codepen
     
      參考文章：https://cloud.tencent.com/developer/article/1354252
             https://www.ruanyifeng.com/blog/2015/07/flex-examples.html     
  12.CSS 列表
   CSS 列表
   從某種意義上講，不是描述性的文本的任何內(nèi)容都可以認為是列表。人口普查、太陽系、家譜、參觀菜單，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。
   列表類型
   要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。
   例如，在一個無序列表中，列表項的標志 (marker) 是出現(xiàn)在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數(shù)字或另外某種計數(shù)體系中的一個符號。
   要修改用于列表項的標志類型，可以使用屬性list-style-type：
  ul {list-style-type : square}
  上面的聲明把無序列表中的列表項標志設(shè)置為方塊。
  list-style-type的可能值
   
   列表項圖像
   有時，常規(guī)的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用list-style-image屬性做到：
   ul li {list-style-image : url(xxx.gif)}
   只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。
  
  
   list-style-position 屬性
  
  
 list-style 屬性
   list-style 簡寫屬性在一個聲明中設(shè)置所有的列表屬性
  說明
   該屬性是一個簡寫屬性，涵蓋了所有其他列表樣式屬性。由于它應(yīng)用到所有 display 為 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不過實際上它可以應(yīng)用到任何元素，并由 list-item 元素繼承。
   可以按順序設(shè)置如下屬性：
list-style-type

list-style-position

list-style-image
   可以不設(shè)置其中的某個值，比如 "list-style:circle inside;" 也是允許的。未設(shè)置的屬性會使用其默認值。
 
  CSS 表格
  CSS 表格屬性可以幫助您極大地改善表格的外觀
  表格邊框
  如需在 CSS 中設(shè)置表格邊框，請使用 border 屬性。
  下面的例子為 table、th 以及 td 設(shè)置了藍色邊框：
 table, th, td
              {
                border: 1px solid blue;
              }


  
  請注意，上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。
  如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。
 
  
   表格寬度和高度
   通過 width 和 height 屬性定義表格的寬度和高度。
   下面的例子將表格寬度設(shè)置為 100%，同時將 th 元素的高度設(shè)置為 50px：
   表格文本對齊
   text-align 和 vertical-align 屬性設(shè)置表格中文本的對齊方式。
   表格內(nèi)邊距
   如需控制表格中內(nèi)容與邊框的距離，請為 td 和 th 元素設(shè)置 padding 屬性：
  td
  {
   padding:15px;
  }
  表格顏色
  下面的例子設(shè)置邊框的顏色，以及 th 元素的文本和背景顏色：
  table, td, th
              {
               border:1px solid green;
              }

  th
    {
      background-color:green;
      color:white;
    }

  水平分隔線
  
  向 <th> 和 <td> 添加border-bottom屬性，以實現(xiàn)水平分隔線：
  
   可懸停表格
   在 <tr> 元素上使用:hover選擇器，以突出顯示鼠標懸停時的表格行：
  
   條狀表格
     
   為了實現(xiàn)斑馬紋表格效果，請使用nth-child()選擇器，并為所有偶數(shù)（或奇數(shù)）表行添加background-color：
  tr:nth-child(even) {background-color: #f2f2f2;}//偶數(shù)行
   tr:nth-child(odd) {background-color: #f2f2f2;}//奇數(shù)行
  
  13.overflow

    注：網(wǎng)頁滾動條來自html元素，不是body；html元素overflow屬性的默認值是:overflow:auto;如果想去調(diào)瀏覽器的滾動條，則給html元素設(shè)置  html{overflow:hidden}等
   屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情
   這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會被如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條。
   在實際開發(fā)中，overflow的作用：
                            （1）基本特點：實現(xiàn)文字溢出時應(yīng)該如何使用
                            （2）實現(xiàn)BFC，去解決父容器塌陷的問題
                            （3）某些屬性必須依賴于overflow，因而必須設(shè)置overflow這個值
   I.overflow的基本屬性值：
   
   注：這里不是被剪裁，只是被隱藏
    1.默認值visible：里面的內(nèi)容超出父類元素邊框，如實展示
    
   2.hidden：當內(nèi)容超出父類元素邊框，超出的部分會被隱藏，看不到
    
   3.scroll,出現(xiàn)滾動條

   
   4.auto，自動適應(yīng)，根據(jù)需要是否出現(xiàn)滾動條，沒有一開始就限制要滾動條還是不要滾動條。
   5.overflow-x,overflow-y
  （1）當overflow-x的值==overflow-y的值，則等同于overflow；
  （2）當overflow-x的值！=overflow-y的值，則如果一個值為visible，另一個值為hidden/scroll/auto,那么這個visible會被重置為auto
     例如：
        
      這里由于設(shè)置了overflow-x的值為hidden，而overflow-y的值沒有設(shè)置（默認值為visible），因此，當高度溢出時，y方向就出現(xiàn)出現(xiàn)了滾動條（因為這時，overflow-y被設(shè)置為auto）
  II.overflow出現(xiàn)滾動的條件：

    
     
     這是重點！瀏覽器默認的滾動條來自于HTML，不是body標簽！因此，如果頁面不想要滾動條，可以設(shè)置html{overflow:hidden}
    
     計算滾動區(qū)域的高度
    
    
    容器滾動條的寬度機制
    一個容器，如果設(shè)置了overflow:auto/scroll即有滾動條，那么滾動條會占據(jù)容器的可視區(qū)域的尺寸，一般滾動條的寬度為17px;滾動條的位置:boder->滾動條->padding->content
y因此，容器可視區(qū)的寬度尺寸為:boder+滾動條+padding+content
   由于滾動條的出現(xiàn)
  
    因此，overflow會給布局帶來的影響
                               1.尺寸對不上
                    
                                      解決問題的方案：A.里面的子元素設(shè)置自適應(yīng)布局；
                                                  B.或者預(yù)留滾動條的尺寸
                                    2.水平居中跳動。由于滾動欄占據(jù)了一定的尺寸，所以auto的值發(fā)生了變化，所以會水平跳動。
                                
                                問題原因分析：假如html的寬度時1200px，body元素在沒有滾動條的情況下和HTML的寬度一樣（width：100%）；.container容器定寬為1150，使用margin：0 auto，auto的值=1200-1150px=50px,這50px分別分給左右各25px。這時如果出現(xiàn)了滾動條（滾動條的寬度為17px），由于滾動條占據(jù)html的一些寬度，故而body的寬度變?yōu)?200-17px即body的右邊縮短17px.又因為container的寬度為1150px，故而auto的值=body寬度（1200-17）-1150=33px，這33px分別分給左右各16.5px。即左邊auto和右邊auto的值均由25px，變?yōu)?6.5px，故而
                                看著頁面向 左偏移。         
                                兩種解決問題的方法：
                                            
    III.overflow與BFC：
    清除浮動、自適應(yīng)布局
   
    什么是BFC？這個很重要
    BFC（block formatting context），中文為“塊級格式化上下文”
    先記住一個原則：如果一個元素具有BFC，那么內(nèi)部元素再怎么翻江倒海，翻云覆雨，后不會影響到外面的元素。同時，外面的元素也不能影響到該元素。所以，BFC元素是不可能發(fā)生margin重疊的，
                 因為margin重疊會影響到外面的元素的。BFC元素可以用來清除浮動帶來的影響，因為如果不清除，子元素浮動則會造成父元素高度塌陷，
                 必然會影響后面元素的布局和定位，這顯然有違反BFC元素的子元素不會影響外部元素的設(shè)定。
                 以下情況會觸發(fā)BFC：
                 1.HTML元素；
                 2.float不為：none；
                 3.display的值為table-cell，table-caption和inline-block中的任何一個；(inline-block不完全BFC，當其內(nèi)容超出設(shè)置的高度的時候，其還是會影響后面元素的布局。除此之外，margin帶來的影響、浮動等，都可以和其他BFC一樣，不影響外面的元素。)
                 4.overflow的值為hidden，auto，scroll；
                 5.position的值不為relative或static
    那么顯然我們設(shè)置overflow的值為hidden時，使.container元素具有BFC，那么子元素child浮動便不會帶來父元素的高度塌陷影響。
    設(shè)置overflow為hidden使元素具有BFC而不會受子元素的影響，但是當子元素過多需要滾動顯示時，我們可以設(shè)置overflow的值為auto或acroll，超出父元素
     之外的元素會被隱藏。使用overflo:hidden也具有一定的局限性，所以我們應(yīng)該根據(jù)具體的業(yè)務(wù)場景來選擇合適的方法。
      

       I.清除浮動：
       （1）當設(shè)置overflow:visible
       
       （2）當設(shè)置overflow：hidden,scroll,auto（清除浮動）
         
        但是使用上述這3個屬性值，還是有弊端的。比如hidden，會隱藏父元素中的一些內(nèi)容。故而修改一些使用overflow及快速又高效。大部分清除浮動的影響最好用:
       
       II.避免margin穿透的問題！
       元素設(shè)置了overflow：hidden/auto/scroll將元素BFC，故而元素內(nèi)部不會影響外面的元素
      III.兩欄自適應(yīng)布局【外面的元素同樣不能影響B(tài)FC元素】。
       例如：
      
      這里一個父容器包含一個圖片（這個圖片左浮動）和另一個div（這個div又包含兩張圖片）。我們要實現(xiàn)圖片和這個div形成兩欄自適應(yīng)布局，而且左邊的浮動圖片不能影響div元素。【注釋：如果是環(huán)繞，浮動圖片一定影響div元素，因為這個浮動圖片占據(jù)著div元素的一部分。因此如果給這個div設(shè)置為BFC，那么這個div元素就會顯示為上圖中右邊的藍色背景的區(qū)域。這里，我們可以通過給這個div元素設(shè)置overflow:hidden或者auto或者scroll即BFC化div,讓浮動元素不再影響div元素】    
<div> 
      <div>
        <img src="../1.png" width="40px">
        <div>
            <img src="../1.jpeg">
        </div>
    </div>
</div>
   
    IV.overflow與absolute絕對定位：
    父元素的overflow：hidden/auto/scroll在子元素設(shè)置position:absolute的時候有時候會失效！
    例如：在一個父容器中包含一個子元素img，這個圖片的寬高均大于父元素，這里給父元素設(shè)置了overflow:hidden;
   
       當我們給img圖片設(shè)置position:absolte的時候，因為圖片和父容器不在一個層級，相當于兩個平行面了，父容器還怎么限制它呀？故而顯示如下：

    
    對于overflow：auto，scroll和其一樣的道理！
      失效的原因（或者說有些情況下才失效，有些情況下是有效的）：
     
      這句話的意思就是說如果overflow屬性設(shè)置給具有position:absolute的子元素的某個祖先元素，這個祖先元素和子元素之間的元素沒有設(shè)置position：relative/absolute/fixed，那么overflow就會失效！
      當然，如果這子元素的某個祖先元素（當然這個祖先元素是設(shè)置overflow屬性的祖先元素的后代元素或者就是其本身，那么overflow就不會失效！）
      例如： 
    <div>
         <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0" height="150px" width="150px">
    </div>
    
     1.給圖片設(shè)置position:absolute,分析，這里具有overflow的元素和設(shè)有position:absolute的元素之間沒有設(shè)有定位的元素作為一個后代元素，另一個祖先元素，故而定位肯定失效
     
     2. 給這個父元素設(shè)置position:relative 
<div>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0"
         height="150px" width="150px">
</div>
    
     3.給img的父元素設(shè)置position:absolute.將原來的父元素改為父元素的父元素，即：
<div>
    <div>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0"
             height="150px" width="150px">
    </div>
</div>
    顯示結(jié)果如上圖所示
    4.如果這么寫，就會失效！因為設(shè)置overflow屬性的元素和設(shè)置position:absolute屬性的元素之間沒有設(shè)置定位屬性的元素作為一個（設(shè)有overflow屬性的元素）后代元素，另一個（設(shè)有postion:absolute）的父級元素
<div>
       <div>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com%2Fsmall%2Ft4518508309136384.jpg&refer=http%3A%2F%2Ftrademark-pics-search.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626416798&t=9cde613705b0ce5fb8187401c9d2d0e0"
             height="150px" width="150px">
    </div>
</div>
   
        
   
     V.依賴于overflow的樣式表現(xiàn)
   
     （1）resize屬性，想要resize屬性起作用，必須設(shè)置overflow值，即不是默認值visible；
     
     
    （2）ellipsis屬性
     
     
     
 背景[添加背景的方式有兩種：1.背景色(默認是透明的)；2.背景圖片；背景的特點：1.不具有繼承性；2.任何元素都可以設(shè)置背景]
  1.背景色
   可以使用background-color 屬性為元素設(shè)置背景色。這個屬性接受任何合法的顏色值。
   這條規(guī)則把元素的背景設(shè)置為灰色：
   p {}
   可以為所有元素設(shè)置背景色，這包括 body 一直到 em 和 a 等行內(nèi)元素。
   background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。
  總結(jié)：background-color的設(shè)置很簡單，只需要給定一個顏色值就可以了，默認值是transparent。
  2.背景圖像
   要把圖像放入背景，需要使用background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。
   【1】 如果需要設(shè)置一個背景圖像，必須為這個屬性設(shè)置一個 URL 值：
   body {background-image: url(/i/eg_bg_04.gif);}
   background-image也不能繼承
   【2】背景圖片background-position 屬性
    定義和用法： background-position屬性設(shè)置背景圖像的起始位置。
    注意對于這個工作在Firefox和Opera，background-attachment必須設(shè)置為 "fixed（固定）"。



默認值:
0% 0%


繼承:
no


版本:
CSS1


JavaScript 語法:
object object.style.backgroundPosition="center"





    語法：background-position:horizontalvertical    //horizontal(水平)vertical（垂直）
    水平是
    percentage（百分比） |length |left |center |right
    垂直是
    percentage（百分比） |length |top |center |bottom


    屬性值



值
描述


left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果僅指定一個關(guān)鍵字，其他值將會是"center"


x% y%
第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 。默認值為：0％0％


xpos ypos
第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他CSS單位。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions


inherit
指定background-position屬性設(shè)置應(yīng)該從父元素繼承



  （1）background-position的值為長度值;當值為長度值的時候，就是容器的左上角和background-image的左上角的對齊，即這里的background-position就相當于background-image的margin值。即background-position的值不設(shè)置的時候，相當于margin：0，背景圖片的左上角和容器的左上角對齊；當background-position的值為m,n的時候，背景圖片的左上角在距離容器左上角的m,n的地方。如效果如圖4所示：
     backround-position （xpos ypos）  容器的左上角為（0,0）。
     當我們設(shè)置為（xpos ypos）時，意思為圖片左上角距離容器左上角的距離。如下圖所示：
   
    當我們設(shè)置為兩個負數(shù)：（-70px，-40px），background-image的左上角的頂點距離容器的左上角頂點的距離為-70px,-40px.相當于background-image的margin值為-70px,-40px.
  
    當為（0px,0px）
   
  （2）background-position的值為left top等關(guān)鍵字的值時，應(yīng)用的是對齊規(guī)則，而不是坐標規(guī)則。【這里的對齊規(guī)則指的是:四條邊的對齊。即：left，表示容器的左邊和圖片的左邊對齊；top表示容器的上邊和圖片的上邊對齊；right表示容器的右邊和圖片的右邊對齊；bottom表示容器的底邊和圖片的底邊對齊。center表示兩個的中心點對齊】
    xpos 為 left 表示圖像的左邊與對象的左邊對齊，為 right 表示圖像的右邊和對象的右邊對齊；ypos 為 top 表示圖像的頂部和對象的頂部對齊，為 bottom 表示圖像的底部和對象的底部對齊；
    xpos、ypos等于 center表示圖像在水平和垂直方向的中心，和對象在水平和垂直方向的中心對齊
    比如：left top，圖片放置關(guān)鍵字最容易理解，其作用如其名稱所表明的
    根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個關(guān)鍵字 - 一個對應(yīng)水平方向，另一個對應(yīng)垂直方向。
    如果只出現(xiàn)一個關(guān)鍵字，則認為另一個關(guān)鍵字是 center。
    背景圖片的左上角和容器(container)的左上角對齊，超出的部分隱藏。
    等同于 background-position:0,0;
    也等同于background-position:0%,0%;
   right bottom
    背景圖片的右下角和容器(container)的右下角對齊，超出的部分隱藏。
    等同于background-positon:100%,100%;
    也等同于background-positon:容器(container)的寬度-背景圖片的寬度,容器(container)的高度-背景圖片的高度
   實例：希望每個段落的中部上方出現(xiàn)一個圖像，只需聲明如下
   
   （3）.background-position的值為百分比，比較復(fù)雜。
    4.背景重復(fù)
    如果需要在頁面上對背景圖像進行平鋪，可以使用background-repeat 屬性。
    屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪。
    默認地，背景圖像將從一個元素的左上角開始。請看下面的例子：
    body
       { 
         background-image: url(/i/eg_bg_03.gif);
         background-repeat: repeat-y;
       }
  
   我們能夠以不同的方法為鏈接設(shè)置樣式。

  5.background-attachment 
    background-attachment定義背景圖像是否固定或者隨著頁面的其余部分滾動。
    例如：body{
             background-image:url(bgimage.gif)；
             background-attachment：fixed；
           }
    可能值：scroll 默認值 背景圖像會隨著頁面其余部分的滾動而移動；
          fixed  當頁面的其余部分滾動時，背景圖像不會移動；
          inherit 規(guī)定應(yīng)該從父類元素繼承background-attachment屬性的設(shè)置。
   6.css背景屬性
    

    這里只有background-color和背景圖片沒關(guān)系，其余的屬性均為背景圖片服務(wù)。
     background簡寫的順序
   
   8.css圖標
   如何添加圖標？
   向 HTML 頁面添加圖標的最簡單方法是使用圖標庫，比如 Font Awesome。
   將指定的圖標類的名稱添加到任何行內(nèi) HTML 元素（如 <i> 或 <span>）。
   下面的圖標庫中的所有圖標都是可縮放矢量，可以使用 CSS進行自定義（大小、顏色、陰影等）。
   1.Bootstrap 圖標(無需下載或者安裝)
  
  
  9.CSS鏈接
  設(shè)置鏈接樣式：鏈接可以使用任何 CSS 屬性（例如color、font-family、background等）來設(shè)置樣式。
   此外，可以根據(jù)鏈接處于什么狀態(tài)來設(shè)置鏈接的不同樣式。
   四種鏈接狀態(tài)分別是：
a:link- 正常的，未訪問的鏈接

a:visited- 用戶訪問過的鏈接

a:hover- 用戶將鼠標懸停在鏈接上時

a:active- 鏈接被點擊時


文本裝飾（text-decoration）
text-decoration屬性主要用于從鏈接中刪除下劃線：
    background-color屬性可用于指定鏈接的背景色：
    
     改變光標
     cursor 屬性指定要顯示的光標類型。本例演示了不同類型的光標（對鏈接有用）。
    
   9.CSS width和max-width
   使用width，max-width和margin:auto
   如上一章所述，塊級元素始終占用可用的全部寬度（盡可能向左或者向右延伸）
   設(shè)置塊級元素的width，將防止其延伸到容器的邊緣。然后，您可以將外邊距設(shè)置為 auto，以將元素在其容器中水平居中。元素將占用指定的寬度，剩余空間將在兩個外邊距之間平均分配： 
   
   注意：當瀏覽器窗口小于元素的寬度時，上面這個<div>會發(fā)生問題。瀏覽器會將水平滾動條添加到頁面。
   在這種情況下，使用max-width可以改善瀏覽器對小窗口的處理。為了使網(wǎng)站在小型設(shè)備上可用，這一點很重要：
  
   提示：請將瀏覽器窗口的大小調(diào)整為小于 500 像素，以查看兩個 div 之間的區(qū)別！
   
  10.導(dǎo)航欄
  導(dǎo)航欄 = 鏈接列表
  導(dǎo)航欄需要標準 HTML 作為基礎(chǔ)。
   在我們的實例中，將用標準的 HTML 列表構(gòu)建導(dǎo)航欄。
  導(dǎo)航欄基本上就是鏈接列表，因此使用 <ul> 和 <li> 元素會很有意義
  
  以上代碼是垂直和水平導(dǎo)航欄中使用的標準代碼
  
   1.CSS 垂直導(dǎo)航欄
  
  I 方法一： 如需構(gòu)建垂直導(dǎo)航欄，除了上一章中的代碼外，還可以在列表中設(shè)置 <a> 元素的樣式：
 
  II 方法二：可以設(shè)置 <ul> 的寬度，并刪除 <a> 的寬度，因為當顯示為塊元素時，它們將占據(jù)可用的全部寬度。這將導(dǎo)致與我們之前的例子相同的結(jié)果：
 
  垂直導(dǎo)航欄實例
  場景：創(chuàng)建背景色為灰色的基礎(chǔ)垂直導(dǎo)航欄，并在用戶將鼠標移到鏈接上時改變鏈接的背景色：
 
 
  活動/當前導(dǎo)航鏈接(向當前鏈接添加 "active" 類，以使用戶知道他/她在哪個頁面上)
 

  2.CSS 水平導(dǎo)航欄
 
  有兩種創(chuàng)建水平導(dǎo)航欄的方法：使用行內(nèi)或浮動列表項。
  I 行內(nèi)列表項
 構(gòu)建水平導(dǎo)航欄的一種方法是，除了上一章中的“標準”代碼外，還要將 <li> 元素指定為 inline：
 
  II 浮動列表項
 
 CSS 下拉菜單
   使用 CSS 創(chuàng)建可懸停的下拉列表。
   i 基礎(chǔ)的下拉菜單：創(chuàng)建當用戶將鼠標移動到元素上時出現(xiàn)的下拉框
 
 .actor:hover .active解釋為： hover懸浮在父元素.actor時改變子元素active的樣式；
 ii下拉式菜單：當用戶鼠標移動到元素上時，出現(xiàn)一個下拉菜單，并允許用戶從列表中選擇一個選項：
                                                                   
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min- 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h1>下拉菜單</h1>

<p>請把鼠標移到按鈕上，以打開下拉菜單。</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<p><b>Note:</b>我們的測試鏈接用了 href="#"。真實的網(wǎng)站會用 URL。</p>

</body>
</html>

　　
  下拉式導(dǎo)航-2
<html>
<head>
<style>
ul{margin:0;padding:0;list-style-type:none;overflow:hidden;}
.nav{background-color:black;}
.nav>li{float:left;}
a{text-decoration:none; color:#fff;display:block;100%;height:100%;padding:10px;}
.dropdown-content{300px;background-color:#f1f1f1;position:absolute;
                  display:none;}
.dropdown-content li{padding:10px 2px;}
.dropdown-content a{color:black;}
.nav>li:hover{background-color:red;}
.dropDown:hover .dropdown-content{display:block}
.dropdown-content li:hover{background-color:#ddd;}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li class="dropDown">
      <a href="#">Dropdown</a>
      <ul class="dropdown-content">
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
     </ul>
  </li>
</ul>
<h1>導(dǎo)航欄內(nèi)的下拉菜單</h1>
<p>請懸停到 "Dropdown" 鏈接上，以查看下拉菜單。</p>
</body>
</html>

　 　  
 CSS 圖像精靈()
   圖像精靈是單個圖像中包含的圖像集合。
   包含許多圖像的網(wǎng)頁可能需要很長時間才能加載，同時會生成多個服務(wù)器請求。
   使用圖像精靈將減少服務(wù)器請求的數(shù)量并節(jié)約寬帶。
  圖像精靈 - 簡單的例子
  我們使用以下單幅圖像（"navsprites.gif"）而不是使用三幅單獨的圖像：
   
   通過使用 CSS，我們可以僅顯示所需圖像的某個部分。(background-position)  
   在下面的例子中，CSS 指定了顯示 "navsprites.gif" 圖像的哪部分：
    
  例子解釋：
<img id="home" src="trans.gif">- 僅定義小的透明圖像，因為 src 屬性不能為空。而實際顯示的圖像將是我們在 CSS 中指定的背景圖像。

 46px; height: 44px;- 定義我們要使用的圖像部分

background: url(navsprites.gif) 0 0;- 定義背景圖片及其位置（left 0px, top 0px）
 
 圖像精靈 - 創(chuàng)建導(dǎo)航列表
  我們希望使用精靈圖片（"navsprites.gif"）來創(chuàng)建一個導(dǎo)航列表。
  我們將使用 HTML 列表，因為它可以是鏈接，同時還支持背景圖片：
 
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
   43px;
  background: url('/i/css/navsprites.gif') 0 0;
}

#prev {
  left: 63px;
   42px;
  background: url('/i/css/navsprites.gif') -47px 0;
}

#next {
  left: 129px;
   42px;
  background: url('/i/css/navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="/css/index.asp"></a></li>
  <li id="prev"><a href="/css/css_jianjie.asp"></a></li>
  <li id="next"><a href="/css/css_syntax.asp"></a></li>
</ul>

</body>
</html>

　 　
    
  圖像精靈 - 懸停效果  
    現(xiàn)在，我們要向?qū)Ш搅斜碇刑砑討彝ＰЧ?  
    提示:hover 選擇器可用于所有元素，而不僅限于鏈接。
   我們的新圖像（"navsprites_hover.gif"）包含三幅導(dǎo)航圖像和三幅用于懸停效果的圖像：
    
   因為這是一幅圖像，而不是六個單獨的文件，所以當用戶將鼠標懸停在圖像上時，不會有加載延遲。
   我們僅添加三行代碼來實現(xiàn)懸停效果：
  
  
  例子解釋：
   #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我們?yōu)樗腥齻€懸停圖像指定相同的背景位置，僅向下 44 像素
 
 CSS 表單
  通過使用 CSS，可以極大地改善 HTML 表單的外觀：

  
  帶有圖標/圖像的輸入框
   如果希望在輸入框中包含圖標，請使用background-image屬性，并將其與background-position屬性一起設(shè)置。還要注意，我們添加了一個較大的左內(nèi)邊距（padding-left）來留出圖標的空間：
  
 
  當窗口大小小于600px時，頁面變?yōu)椋?/p>
 
 具體看媒體查詢

 CSS 計數(shù)器
 CSS 計數(shù)器是由 CSS 保持的“變量”，其值可以通過 CSS 規(guī)則遞增（以跟蹤其使用次數(shù)）。
 計數(shù)器使您可以根據(jù)內(nèi)容在文檔中的位置來調(diào)整其外觀。
 帶計數(shù)器的自動編號
 CSS 計數(shù)器就像“變量”。變量值可以通過 CSS 規(guī)則遞增（將跟蹤它們的使用次數(shù)）。
  如需使用 CSS 計數(shù)器，我們將使用以下屬性：
counter-reset- 創(chuàng)建或重置計數(shù)器

counter-increment- 遞增計數(shù)器值

content- 插入生成的內(nèi)容

counter()或counters()函數(shù) - 將計數(shù)器的值添加到元素
 如需使用 CSS 計數(shù)器，必須首先使用counter-reset創(chuàng)建它。
 下面的例子為頁面（在 body 選擇器中）創(chuàng)建一個計數(shù)器，然后為每個 <h2> 元素增加計數(shù)器值，并在每個 <h2> 元素的開頭添加 "Section <value of the counter>:"：

嵌套計數(shù)器
下面的例子為頁面（section）創(chuàng)建一個計數(shù)器，為每個 <h1> 元素（subsection）創(chuàng)建一個計數(shù)器。
"section" 計數(shù)器為每個 <h1> 元素計數(shù)，同時寫入 "Section" 以及 section 計數(shù)器的值，"subsection" 計數(shù)器為每個 <h2> 元素計數(shù)，同時寫入 section 計數(shù)器的值以及 subsection 計數(shù)器的值：

計數(shù)器對于創(chuàng)建概述列表也很有用，因為在子元素中會自動創(chuàng)建一個計數(shù)器的新實例。在這里，我們使用counters()函數(shù)在不同級別的嵌套計數(shù)器之間插入一個字符串：
<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

</body>
</html>


　　
 CSS 網(wǎng)站布局
  網(wǎng)站布局
   網(wǎng)站通常分為頁眉、菜單、內(nèi)容和頁腳：
  
  有很多不同的布局設(shè)計可供選擇。但是，以上結(jié)構(gòu)是最常見的結(jié)構(gòu)之一，我們將在本教程中對其進行仔細研究。
 
 頁眉
  頁眉（header）通常位于網(wǎng)站頂部（或頂部導(dǎo)航菜單的正下方）。它通常包含徽標（logo）或網(wǎng)站名稱：
 

  導(dǎo)航欄
  導(dǎo)航欄包含鏈接列表，以幫助訪問者瀏覽您的網(wǎng)站：
  
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 設(shè)置頁眉的樣式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* 設(shè)置頂部導(dǎo)航欄的樣式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 設(shè)置 topnav 鏈接的樣式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改變鼠標懸停時的顏色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

　　
 內(nèi)容
  使用哪種布局通常取決于您的目標用戶。最常見的布局是以下布局之一（或?qū)⑺鼈兘M合在一起）：
1-列布局（通常用于移動瀏覽器）

2-列布局（通常用于平板電腦和筆記本電腦）

3-列布局 （僅用于臺式機）



  我們將創(chuàng)建 3 列布局，并在較小的屏幕上將其更改為 1 列布局：

<head>
    <title>CSS 網(wǎng)站布局</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 設(shè)置頁眉的樣式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 設(shè)置頂部導(dǎo)航欄的樣式 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 設(shè)置 topnav 鏈接的樣式 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 改變鼠標懸停時的顏色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 創(chuàng)建并排的三個非等列 */
        .column {
            float: left;
             33.33%;
            padding: 15px;
        }

        /* 清除列之后的浮動 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 響應(yīng)式布局 - 創(chuàng)建堆疊而非并排的三列 */
        @media screen and (max-600px) {
            .column {
                 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>Header</h1>
    <p>請調(diào)整瀏覽器窗口的大小以查看響應(yīng)效果。</p>
</div>

<div class="topnav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>

<div class="row">
    <div class="column">
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
        <h2>Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>
</div>
</body>
   當屏幕寬度大于600的時候，3列顯示；                                                        當屏幕寬度小于600px的時候，一列顯示。
                 
  不相等的欄
   主要內(nèi)容（main content）是您網(wǎng)站上最大、最重要的部分。
列寬不相等的情況很常見，因為大部分空間都為主內(nèi)容保留。附屬內(nèi)容（如果有）通常用作替代導(dǎo)航或指定與主要內(nèi)容有關(guān)的信息。您可以隨意更改寬度，只要記住它的總和應(yīng)為 100％：
 
   
  CSS 2D 轉(zhuǎn)換
    CSS 2D 轉(zhuǎn)換方法
translate()

rotate()

scaleX()

scaleY()

scale()

skewX()

skewY()

skew()

matrix()
 
 CSS 多列
  CSS 多列布局:CSS 多列布局允許我們輕松定義多列文本 - 就像報紙那樣：
   
   
   CSS 創(chuàng)建多列
    column-count屬性規(guī)定元素應(yīng)被劃分的列數(shù)。
    下面的例子將 <div> 元素中的文本分為 3 列：
    
    
   CSS 指定列之間的間隙
     column-gap屬性規(guī)定列之間的間隔。
     下面的例子指定列之間的間距為 40 像素：
    
    
   CSS 列規(guī)則
    column-rule-style屬性規(guī)定列之間的規(guī)則樣式：
   
    column-rule-width屬性規(guī)定列之間的規(guī)則寬度：
   
    column-rule-color屬性規(guī)定列之間的規(guī)則的顏色：
     
   column-rule 屬性是用于設(shè)置上面所有 column-rule-* 屬性的簡寫屬性。
   下例設(shè)置了列之間的規(guī)則的寬度、樣式和顏色：
   實例
   
   指定元素應(yīng)該橫跨多少列
    column-span屬性規(guī)定元素應(yīng)跨越多少列。
    下例規(guī)定了<h2> 元素應(yīng)跨所有列：
    
   指定列寬度
    column-width屬性為列指定建議的最佳寬度。
    下例規(guī)定了列的建議最佳寬度應(yīng)為 100px：
   
   
 CSS 媒體查詢
   CSS2 引入了媒體類型
   CSS2 中引入了@media規(guī)則，它讓不同媒體類型定義不同樣式規(guī)則成為可能。
   例如：您可能有一組用于計算機屏幕的樣式規(guī)則、一組用于打印機、一組用于手持設(shè)備，甚至還有一組用于電視，等等。不幸的是，除了打印媒體類型之外，這些媒體類型從未得到過設(shè)備的大規(guī)模支持。
   CSS3 引入了媒體查詢
   CSS3 中的媒體查詢擴展了 CSS2 媒體類型的概念：它們并不查找設(shè)備類型，而是關(guān)注設(shè)備的能力。
   媒體查詢可用于檢查許多事情，例如：
視口的寬度和高度

設(shè)備的寬度和高度

方向（平板電腦/手機處于橫向還是縱向模式）

分辨率
  使用媒體查詢是一種流行的技術(shù)，可以向臺式機、筆記本電腦、平板電腦和手機（例如 iPhone 和 Android 手機）提供定制的樣式表。
 媒體查詢語法
  媒體查詢由一種媒體類型組成，并可包含一個或多個表達式，這些表達式可以解析為 true 或 false。
 @media not|only mediatype and (expressions) {

  CSS-Code;
}

　　如果指定的媒體類型與正在顯示文檔的設(shè)備類型匹配，并且媒體查詢中的所有表達式均為 true，則查詢結(jié)果為 true。當媒體查詢?yōu)?true 時，將應(yīng)用相應(yīng)的樣式表或樣式規(guī)則，并遵循正常的級聯(lián)規(guī)則。
   除非您使用 not 或 only 運算符，否則媒體類型是可選的，且隱含all類型。
   您還可以針對不同的媒體使用不同的樣式表:
      <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

　　
  媒體查詢的簡單實例
   使用媒體查詢的一種方法是在樣式表內(nèi)有一個備用的 CSS 部分。
   下面的例子在視口寬度為 480 像素或更寬時將背景顏色更改為淺綠色（如果視口小于 480 像素，則背景顏色會是粉色）：
  
  
   
   下例顯示了一個菜單，如果視口的寬度為 480 像素或更寬，則該菜單會浮動到頁面的左側(cè)（如果視口小于 480 像素，則該菜單將位于內(nèi)容的頂部）：
   
   屏幕寬度<480px時，頁面布局如下：
   
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing:border-box;}
ul{list-style-type:none;float:left;margin:0;padding:0;150px;margin-right:20px;}
.clearfix:after{content:'';display:table;clear:both;}
li{background-color:#CDF0F6;100%;margin-bottom:5px;border-radius:3px;padding:2px 5px;}
.auto{display:table-cell;2000px;}
@media screen and (max-480px){
  ul{list-style-type:none;display:block;margin:0;padding:0;100%;}
</style>
</head>
<body>
<div class="clearfix">
   <ul>
      <li>Menu-item 1</li>
      <li>Menu-item 2</li>
      <li>Menu-item 3</li>
      <li>Menu-item 4</li>
      <li>Menu-item 5</li>
   </ul>
   <div class="auto">
      <h1>請調(diào)整瀏覽器窗口大小來查看效果！</h1>
      <p>本例顯示了一個菜單，如果視口為 480 像素或更寬，它將向頁面左側(cè)浮動。如果視口小于 480 像素，則菜單將位于內(nèi)容的頂部。</p>
   </div>
</div>
</body>
</html>

　　
  CSS Flexbox
    flex布局見本博客《flex》網(wǎng)址如下：https://www.cnblogs.com/yyn120804/p/10159158.html

   
  響應(yīng)式網(wǎng)頁設(shè)計 - 簡介
   響應(yīng)式web設(shè)計會讓您的頁面在所有設(shè)備上都看來很不錯   
   響應(yīng)式 web 設(shè)計僅使用 HTML 和 CSS。
   響應(yīng)式 web 設(shè)計并不是程序或 JavaScript。
   

  為所有用戶獲得最佳體驗的設(shè)計
  可以使用許多不同的設(shè)備來查看網(wǎng)頁：臺式機、平板電腦和手機。無論使用哪種設(shè)備，您的網(wǎng)頁都應(yīng)該看起來美觀且易用。
  網(wǎng)頁不應(yīng)舍棄信息來適合較小的設(shè)備，而應(yīng)使其內(nèi)容適合任何設(shè)備：
 
  如果您使用 CSS 和 HTML 調(diào)整大小、隱藏、縮小、放大或移動內(nèi)容，以使其在任何屏幕上看起來都很好，則稱為響應(yīng)式 Web 設(shè)計。
　 如果您不理解下面的例子，請不要擔心，我們將在下一章中一步一步地分解代碼：
  
 響應(yīng)式網(wǎng)頁設(shè)計 - 視口
   什么是視口？
   視口（viewport）是用戶在網(wǎng)頁上的可見區(qū)域。
  視口隨設(shè)備而異，在移動電話上會比在計算機屏幕上更小。
  在平板電腦和手機之前，網(wǎng)頁僅設(shè)計為用于計算機屏幕，并且網(wǎng)頁擁有靜態(tài)設(shè)計和固定大小是很常見的。
  然后，當我們開始使用平板電腦和手機上網(wǎng)時，固定大小的網(wǎng)頁太大了，無法適應(yīng)視口。為了解決這個問題，這些設(shè)備上的瀏覽器會按比例縮小整個網(wǎng)頁以適合屏幕大小。
  這并不是完美的！勉強是一種快速的修正。
 設(shè)置視口
  HTML5 引入了一種方法，使 Web 設(shè)計者可以通過<meta>標簽來控制視口。
  您應(yīng)該在所有頁面中包含以下media視口元素：
  <media name="viewport" content="width=device-width，initial-scale=1.0">
 它為瀏覽器提供了關(guān)于如何控制頁面尺寸和縮放比例的指令。
  width=device-width部分將頁面的寬度設(shè)置為跟隨設(shè)備的屏幕寬度（視設(shè)備而定）。
  當瀏覽器首次加載頁面時，initial-scale=1.0部分設(shè)置初始縮放級別。
 
 把內(nèi)容調(diào)整到視口的大小
  用戶習(xí)慣在臺式機和移動設(shè)備上垂直滾動網(wǎng)站，而不是水平滾動！
  因此，如果迫使用戶水平滾動或縮小以查看整個網(wǎng)頁，則會導(dǎo)致不佳的用戶體驗。
  還需要遵循的一些附加規(guī)則
    1. 請勿使用較大的固定寬度元素- 例如，如果圖像的寬度大于視口的寬度，則可能導(dǎo)致視口水平滾動。請務(wù)必調(diào)整此內(nèi)容以適合視口的寬度。
     2. 不要讓內(nèi)容依賴于特定的視口寬度來呈現(xiàn)好的效果- 由于以 CSS 像素計的屏幕尺寸和寬度在設(shè)備之間變化很大，因此內(nèi)容不應(yīng)依賴于特定的視口寬度來呈現(xiàn)良好的效果。
     3. 使用 CSS 媒體查詢?yōu)樾∑聊缓痛笃聊粦?yīng)用不同的樣式- 為頁面元素設(shè)置較大的 CSS 絕對寬度將導(dǎo)致該元素對于較小設(shè)備上的視口太寬。而是應(yīng)該考慮使用相對寬度值，例如  100%。另外，要小心使用較大的絕對定位值，這可能會導(dǎo)致元素滑落到小型設(shè)備的視口之外
 
 響應(yīng)式網(wǎng)頁設(shè)計 - 網(wǎng)格視圖
   許多網(wǎng)頁都基于網(wǎng)絡(luò)視圖（grid-view),這意味著頁面被分為  
   在設(shè)計網(wǎng)頁時，使用網(wǎng)格視圖非常有幫助。這樣可以更輕松地在頁面上放置元素。
   
   響應(yīng)式網(wǎng)格視圖通常有12列，總寬度為100%，并且在調(diào)整瀏覽器窗口大小時會收縮和伸展。
  構(gòu)建響應(yīng)式網(wǎng)格視圖
  讓我們開始構(gòu)建響應(yīng)式網(wǎng)格視圖。
  首先，確保所有 HTML 元素的box-sizing屬性設(shè)置為border-box。這樣可以確保元素的總寬度和高度中包括內(nèi)邊距（填充）和邊框。
  I 請在 CSS 中添加如下代碼：
  * {
     box-sizing: border-box;
    }


 下面的例子展示了一張簡單的響應(yīng)式網(wǎng)頁，其中包含兩列：
  
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.menu {
   25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.main {
   75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="header">
  <h1>Shanghai</h1>
</div>

<div class="menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="main">
  <h1>The City</h1>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
  <p>請調(diào)整瀏覽器窗口的大小，來查看內(nèi)容如何響應(yīng)調(diào)整大小。</p>
</div>

</body>
</html>

　
   
   若網(wǎng)頁只包含兩列，則上面的例子還不錯。
   但是，我們希望使用擁有 12 列的響應(yīng)式網(wǎng)格視圖，來更好地控制網(wǎng)頁。
   首先，我們必須計算一列的百分比：100% / 12 列 = 8.33%。
  II，我們?yōu)?12 列中的每一列創(chuàng)建一個類，即class="col-"和一個數(shù)字，該數(shù)字定義此節(jié)應(yīng)跨越的列數(shù)：
 
 III,讓每一個元素左浮動
  
 Iv,每行都應(yīng)被包圍在<div>中。行內(nèi)的列數(shù)總應(yīng)總計為 12：
 
 V,行內(nèi)的所有列全部都向左浮動，因此會從頁面流中移出，并將放置其他元素，就好像這些列不存在一樣。為了防止這種情況，我們會添加清除流的樣式：
    
 
  例如：要實現(xiàn)如下頁面布局
  在電腦屏幕上，顯示如下：
  
  在 平板中顯示如下：
 這里是因為截屏有空隙

 在手機中，顯示如下：
這里是因為截屏有空隙

 代碼如下：
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1.0">
    <title>響應(yīng)頁面設(shè)計</title>
    <style type="text/css">
        *{box-sizing: border-box;}
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        * {
            box-sizing: border-box;
        }

        .row::after {
            content: "";
            clear: both;
            display: table;
        }

        [class*="col-"] {
            float: left;
            padding: 15px;
        }

        html {
            font-family: "Lucida Sans", sans-serif;
        }

        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }

        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color: #33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

        .menu li:hover {
            background-color: #0099cc;
        }

        .aside {
            background-color: #33b5e5;
            padding: 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
        }
        .col-1{ 8.33%;}
        .col-2{ 16.66%;}
        .col-3{ 25%;}
        .col-4{ 33.33%;}
        .col-5{ 41.66%;}
        .col-6{ 50%;}
        .col-7{ 58.33%;}
        .col-8{ 66.66%;}
        .col-9{ 75%;}
        .col-10{ 83.33%;}
        .col-11{ 91.66%;}
        .col-12{ 100%;}
        /*移動屏幕中*/
        [class*='col-']{
             100%;
        }
        /*平板*/
        @media screen and (min- 900px){

            .col-s-1 { 8.33%;}
            .col-s-2 { 16.66%;}
            .col-s-3 { 25%;}
            .col-s-4 { 33.33%;}
            .col-s-5 { 41.66%;}
            .col-s-6 { 50%;}
            .col-s-7 { 58.33%;}
            .col-s-8 { 66.66%;}
            .col-s-9 { 75%;}
            .col-s-10 { 83.33%;}
            .col-s-11 { 91.66%;}
            .col-s-12 { 100%;}
        }
        /*電腦屏幕下*/
        @media screen and (min- 1200px){
            .col-1{ 8.33%;}
            .col-2{ 16.66%;}
            .col-3{ 25%;}
            .col-4{ 33.33%;}
            .col-5{ 41.66%;}
            .col-6{ 50%;}
            .col-7{ 58.33%;}
            .col-8{ 66.66%;}
            .col-9{ 75%;}
            .col-10{ 83.33%;}
            .col-11{ 91.66%;}
            .col-12{ 100%;}
        }
    </style>
</head>
<body>
<div class="header">
    <h1>shanghai</h1>
</div>
<div class="row">
    <div class="col-3 col-s-3 menu">
        <ul>
            <li>航班</li>
            <li>景點</li>
            <li>美食</li>
            <li>購物</li>
        </ul>
    </div>
    <div class="col-6 col-s-9">
        <h1>城市</h1>
        <p>上海市，簡稱滬，別稱申，是中華人民共和國直轄市，中國的經(jīng)濟、金融、貿(mào)易和航運中心，世界著名的港口城市，是中國人口第二多的城市。</p>
        <p>上海位于中國東部弧形海岸線的正中間，長江三角洲最東部，東臨東海，南瀕杭州灣，西與江蘇、浙江兩省相接，北端的崇明島處于長江入海口中，與周圍的江蘇、浙江、安徽三省多個城市共同構(gòu)成世界級城市群長江三角洲城市群，是其重要的組成部分。</p>
    </div>
    <div class="col-3 col-s-12" >
        <div class="aside">
            <h1>簡介</h1>
            <p>最晚在新石器時代，上海地區(qū)已經(jīng)有先民聚居。春秋時代，上海由吳國管轄，戰(zhàn)國時代則是楚國領(lǐng)土 ...</p>
            <h1>位置</h1>
            <p>最晚在新石器時代，上海地區(qū)已經(jīng)有先民聚居。春秋時代，上海由吳國管轄，戰(zhàn)國時代則是楚國領(lǐng)土 ...</p>
            <h1>交通</h1>
            <p>最晚在新石器時代，上海地區(qū)已經(jīng)有先民聚居。春秋時代，上海由吳國管轄，戰(zhàn)國時代則是楚國領(lǐng)土 ...</p>
        </div>
    </div>
</div>
<div class="footer">
    <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
   15.border、padding、margin屬性見另一個篇隨筆“塊級元素-盒子模型1”

                            
總結(jié)
                            

                                以上是生活随笔為你收集整理的CSS属性以及属性值-新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
                            
                            

                                如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。