前言：最近在進行前端的系統學習（html和css部分）。有一些感悟：

1.雪碧圖

很多時候頁面的圖片不是一張一張從伺服器請求的，而是一張圖上面有很多的圖片，通過background-position屬性來顯示這張圖上的不同圖片，另外，還需要width:76px;height:18px;這兩個屬性來顯示圖上不同大小的圖片。如下圖就是一張雪碧圖：

2.頁面圖片顯示

通常情況：下我們頁面的樣式（css）都是單獨寫在一個css文件中，通過」< link src=」css文件的路徑」 type=」text/css」 href=」「stylesheet>」來引用。

但是是有例外，如果是圖片（< img>）的話，你要在HTML標籤中指定它的寬和高，如「< img src=」357a692e102648a48cd62f9351d171e320170907121955.jpeg」 width=」200」; height=」90」; alt=」一百年前我們都只有1米5」;>< /img>」。

這樣有什麼好處呢？一方面可以加快圖片文件的渲染速度；更重要的一點是可以對用戶更友好。要弄明白這個問題，首先要明白頁面的渲染機制：先看有沒有行內樣式，如果沒有去< head>標籤裡面找對應樣式（< style>）,最後是外鏈樣式。如果 body 中的 img 標籤引用了圖片資源，則立即向伺服器發出請求，此時引擎不會等待圖片下載完畢，而是繼續解析後面的標籤；伺服器返回圖片文件，由於圖片需要佔用一定的空間，會影響到後面元素的排版，因此引擎需要重新渲染這部分內容；如果在最開始就給一個寬高，後期迴流的時候，就不會造成頁面布局位置變化，這樣的用戶交互很友好。

3.解決外層div不隨內部div高度變化而變化

這裡介紹一種流行的做法：額外標籤法。

這種方法就是向父容器的末尾再插入一個額外的標籤，並令其清除浮動（clear）以撐大父容器。這種方法瀏覽器兼容性好，沒有什麼問題，缺點就是需要額外的（而且通常是無語義的）標籤。我個人不喜歡這種方法，但是它確實是W3C推薦的方法，具體做法:

使用after偽類

這種方法就是對父容器使用after偽類和內容聲明在指定的現在內容末尾添加新的內容。經常的做法就是添加一個「點」，因為它比較小不太引人注意。然後我們再利用它來清除浮動（閉合浮動元素），並隱藏這個內容。

這種方法兼容性一般，但經過各種 hack 也可以應付不同瀏覽器了，同時又可以保證html 比較乾淨，所以用得還是比較多的。

給不隨內部div變化高度的外層div增加一個額外的class屬性（clearfix ），如：

<div class="data_row news_article clearfix news_first">

• 1

給這個class屬性賦值

.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}

• 1
• 2

然後刷新頁面，外層div就會隨著內層div高度的變化而改變自己的高度了，到此大功告成。

4.行內元素（inline）和塊級元素（block）

• 1.常見的行內元素

一般的行內元素：對行內元素設置高度、寬度、內外邊距等屬性，都是無效的。如下：

a

em

i

select

small

strong

span

label

特殊的行內元素：可以設置寬和高，如下：

img

input

• 2.塊級元素，會自動佔據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子,常見的塊級元素如下:

div

form

h1-h6

hr

ul

li

table相關的都是

• 3 .一個特殊的button（常用的可變元素），它是可變元素，據上下文語境決定該元素為塊元素或者行內元素。
• 4.行內元素與塊級元素直觀上的區別:

• 行內元素

  :會在一條直線上排列，都是同一行的，水平方向排列

• 塊級元素:

  各佔據一行，垂直方向排列。塊級元素從新行開始結束接著一個斷行。
• 5.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。(但是行內元素可以變為塊級元素)
• 6.行內元素轉換為塊級元素（很常用，很重要）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！