僅供學(xué)習(xí)，轉(zhuǎn)載請注明出處
需求
使用HTML編寫三個div，用來逐步分析拆解相關(guān)盒子模型的大小變化揣云。
首先繪畫三個div，設(shè)置大小50px冰啃，背景色為gold
<!DOCTYPE html>
<html>
<head>
<title>盒子的真實尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;}
.box03{width:50px;height: 50px;background-color: gold;}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
瀏覽器展示如下：
好了邓夕，從上圖來看，已經(jīng)繪畫除了三個正方形了阎毅。下面繼續(xù)看看增加一下邊框border看看焚刚。
給2和3的正方形增加黑色邊框，寬度為50px
border: 50px solid #000;
<!DOCTYPE html>
<html>
<head>
<title>盒子的真實尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
.box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
瀏覽器展示效果如下：
好了扇调，此時已經(jīng)2和3已經(jīng)有了邊框了矿咕。
下面來看看盒子模型的理解圖：
下面繼續(xù)可以給正方形3增加內(nèi)邊距padding，來看看效果。
給正方形3增加內(nèi)邊距50px
padding: 50px
<!DOCTYPE html>
<html>
<head>
<title>盒子的真實尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
.box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;padding: 50px}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
瀏覽器展示如下：
通過上面的頁面得出結(jié)論：盒子的width和height設(shè)置的是盒子內(nèi)容的寬和高碳柱，不是盒子本身的寬和高捡絮，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
練習(xí)
通過盒子模型的原理，制作下面的盒子：
實現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box{
width:400px;
height: 54px;
background-color: gold;
border-top: 1px solid #f00;
border-bottom: 3px solid #666}
.box span{
font-size: 20px;
font-family: "Microsoft YaHei";
line-height: 54px;
padding-left: 150px;
}
</style>
</head>
<body>
<div class="box"><span>新聞列表</span></div><br>
</body>
</html>
瀏覽器展示如下：
關(guān)注微信公眾號莲镣，回復(fù)【資料】福稳、Python、PHP瑞侮、JAVA的圆、web，則可獲得Python半火、PHP越妈、JAVA、前端等視頻資料钮糖。
