1. 首頁 > 生活百科 > >

如何理解CSS的盒子模型

小知識

當我們在寫一個html頁面時 ， 頁面中的每一個元素都相當于一個盒子 。 在網頁上右鍵選擇“檢查”時 ， 我們可以在開發者工具的Element選項中看到頁面中有哪些元素 ， 點擊某一個元素 ， 可以看到該元素的寬高和背景色等信息 ， 同時下方會展示一個方框套一個方框的盒子 ， 上面標注有尺寸信息 ， 如下圖所示 。 我們在學習盒子模型時首先要了解三個概念：border是盒子的邊框 ， 相當于盒子的四個擋板 ， 可以設置顏色（border-color） ， 寬度（border-width） ， 樣式（border-style） ， 邊框可以用連寫模式（borde工具/材料 Sublime Text3
操作方法 01 我們通過一個案例來講解盒子模型 ， 假設有一個寬400px高300px背景顏色是粉色的大盒子 ， 有一個寬200px高140px背景顏色為紅色的小盒子 ， 我們在不改變盒子大小的情況下 ， 將小盒子放入大盒子的中心位置 ， 如何實現呢？我們創建一個html頁面 ， 在<body>標簽中設置一個div ， class取值為big ， 在div中再嵌套一個div ， class取值為small 。 然后我們在<head>標簽中添加<style>標簽用于設置css的樣式 ， 如下圖所示 ， 其中.big和.small均為類選擇器 。

如何理解CSS的盒子模型



02 【如何理解CSS的盒子模型】在Sublime Text3的代碼編輯區域 ， 右鍵選擇Open in Browser ， 在瀏覽器中打開該頁面 ， 如下圖所示 。 我們可以看到此時大盒子和小盒子均在頁面顯示了 ， 但是小盒子的位置卻在大盒子的右上角 。

如何理解CSS的盒子模型



03 那如何將小盒子設置到大盒子的中間位置呢？此時我們最先想到的便是設置padding ， 即設置上下左右的內邊距 ， 我們使用大盒子和長寬減去小盒子的長寬 ， 計算出大盒子的內邊距上下為80px ， 左右為100px ， 因此在大盒子中設置padding：80px 100px ， 第一個值代表上下 ， 第二個值代表左右 ， 中間用空格隔開 。

如何理解CSS的盒子模型



04 在瀏覽器中打開后 ， 我們發現小盒子非但沒有設置在大盒子的中間 ， 反而使大盒子變大了 ， 這違背了題目中不可以改變盒子大小的前提 。

如何理解CSS的盒子模型



05 那如何才能不改變盒子的大小呢？我們思考一下 ， 當盒子中增加了填充物 ， 又不想改變盒子的大小 ， 只能改變盒子的內容了 ， 因此我們在盒子原有的寬高上面減去padding增加的上下左右寬高 ， 此時大盒子的寬變為200px ， 高變為140px 。

如何理解CSS的盒子模型



06 在瀏覽器中打開我們可以看到小盒子中大盒子的中間 ， 正是我們想要的效果 。 此時再提醒一下大家 ， 我們設置的寬高其實是元素內容的寬高 。 因此在這里總結一下盒子寬高的計算公式 ， 盒子的寬度為：border-left-width+padding-left+width+padding-right+border-right-width ， 盒子的高度為：border-top-width+padding-top+height+padding-bottom+border-bottom-width 。

猜你喜歡