如何理解CSS的盒子模型
當我們在寫一個html頁面時,頁面中的每一個元素都相當於一個盒子。在網頁上右鍵選擇“檢查”時,我們可以在開發者工具的Element選項中看到頁面中有哪些元素,點擊某一個元素,可以看到該元素的寬高和背景色等資訊,同時下方會展示一個方框套一個方框的盒子,上面標註有尺寸資訊,如下圖所示。我們在學習盒子模型時首先要了解三個概念:border是盒子的邊框,相當於盒子的四個擋板,可以設定顏色(border-color),寬度(border-width),樣式(border-style),邊框可以用連寫模式(border:border-width border-style border-color);padding是盒子的內邊距,相當於盒子的填充物,用於設定盒子的內容和邊框之間的距離;margin用於設定盒子之間的距離。
操作方法
(01)我們透過一個案例來講解盒子模型,假設有一個寬400px高300px背景顏色是粉色的大盒子,有一個寬200px高140px背景顏色爲紅色的小盒子,我們在不改變盒子大小的情況下,將小盒子放入大盒子的中心位置,如何實現呢?我們創建一個html頁面,在<body>標籤中設定一個div,class取值爲big,在div中再嵌套一個div,class取值爲small。然後我們在<head>標籤中添加<style>標籤用於設定css的樣式,如下圖所示,其中和l均爲類選擇器。
(02)在Sublime Text3的代碼編輯區域,右鍵選擇Open in Browser,在瀏覽器中開啟該頁面,如下圖所示。我們可以看到此時大盒子和小盒子均在頁面顯示了,但是小盒子的位置卻在大盒子的右上角。
(03)那如何將小盒子設定到大盒子的中間位置呢?此時我們最先想到的便是設定padding,即設定上下左右的內邊距,我們使用大盒子和長寬減去小盒子的長寬,計算出大盒子的內邊距上下爲80px,左右爲100px,因此在大盒子中設定padding:80px 100px,第一個值代表上下,第二個值代表左右,中間用空格隔開。
(04)在瀏覽器中開啟後,我們發現小盒子非但沒有設定在大盒子的中間,反而使大盒子變大了,這違背了題目中不可以改變盒子大小的前提。
(05)那如何才能不改變盒子的大小呢?我們思考一下,當盒子中增加了填充物,又不想改變盒子的大小,只能改變盒子的內容了,因此我們在盒子原有的寬高上面減去padding增加的上下左右寬高,此時大盒子的寬變爲200px,高變爲140px。
(06)在瀏覽器中開啟我們可以看到小盒子中大盒子的中間,正是我們想要的效果。此時再提醒一下大家,我們設定的寬高其實是元素內容的寬高。因此在這裏總結一下盒子寬高的計算公式,盒子的寬度爲:border-left-width+padding-left+width+padding-right+border-right-width,盒子的高度爲:border-top-width+padding-top+height+padding-bottom+border-bottom-width。
(07)上面的公式清晰的表示了盒子大小的計算方法,此時我們只給大盒子設定上和左的padding,同時大盒子的內容寬和高只減去上和左padding的大小,可以達到同樣的效果。
(08)我們在設定padding時將右側和底部的值設定爲0,同時寬度在原來400px的基礎上減去100px,高度在原來300px的基礎上減去80px,在瀏覽器中檢視的效果如下圖所示,和步驟6的結果是一致的。
(09)接着我們爲大小盒子添加邊框(border),根據步驟6的公式我們可以看出border的寬度也會算在盒子的大小中,因此我們如果需要加上邊框的話,還需要調整其他值的大小。我們先來看小盒子,給小盒子的邊框設定爲5px,那個在不改變小盒子大小的前提下,我們需要將小盒子的寬度減去10px變爲190px,高度減去10px,變爲130px。大盒子的設定我們緊接着步驟6的值來修改,在步驟6中我們可以看到大盒子的內容和小盒子的大小寬高是一致的,此時如果給大盒子添加10px的邊框,不能再改變大盒子內容的寬高了,因此我們想到可以減少padding的值,因此分別將padding的值減少10px即可。
(10)將大小盒子的設定改爲上圖的設定即可,此時我們開啟瀏覽器會看到盒子的效果同步驟6。此時我們發現還有一個margin的設定沒有用上,margin是用於設定盒子之間的距離,不影響盒子模型的計算。很多標籤默認帶有margin和padding,所以將來在進行頁面佈局的時候一定要清除這些標籤默認的margin和padding。
特別提示
注意padding的設定一般會改變盒子的大小,特殊情況除外。
-
用CSS製作三角形,替代背景圖片
網頁設計,製作,在早期,一般都是用背景圖片來呈現三角形,比如一個提示視窗,有一個三角形圖標指示,這個圖標一般就是背景圖片來的。現在我們不用背景圖片,直接用CSS來生成,需要怎麼做呢?操作方法(01)先看下html代碼,代碼很簡單,就是幾個div,我們爲其中一個div加上樣式名,angle,...
-
耳機不響了怎麼辦?
操作方法(01)鼓膜如果出現故障,通常有四種情況:振膜塌陷、振膜開裂與進鐵粉。這四種情況往往會造成耳機有破音、雜音和低音丟失。如果出現上述四種問題,可以按以下方法修復。一、振膜塌陷的修復如果出現振膜塌陷的情況,可用鑷子夾住一樣帶黏性的物質,例如雙面膠,...
-
如何使用Flash繪製皮卡丘動畫
Flash中文翻譯爲“動畫”的意思,是專門用來製作動畫的軟件工具。現在,我們以實際的例子出發看看如何使用Flash軟件繪製皮卡丘圖案吧。操作方法(01)新建文檔雙擊【Flash圖標】,開啟軟件。在軟件介面點擊【檔案】---【新建】,會彈出的新建文檔視窗點擊【ActionScript3....
-
webstorm有什麼吸引開發者的特性功能?
webstorm是一個前端開發工具,相對衆多的開發工具,webstorm有什麼吸引開發者的特性功能?下面一起來看下。操作方法(01)相對於其它開發工具,webstorm是專爲前端而生的。對HTML元素,在代碼上有屬性提示,如圖,我們在寫一個P元素後,打上一個空格後,就會彈出P所有支援的HTML屬性...