前言
我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 本題目源自于牛客網 微信公衆号前端小歌謠
題目
盒模型是CSS的核心概念，描述了元素如何顯示，以及在一定程度上如何互相作用、互相影響。頁面中的所有元素都被看作一個矩形盒子，這個盒子包含元素的内容、内邊距、邊框和外邊距。
内邊距是内容周圍的空間，當給元素填充背景時會作用到元素的内容區域和内邊距區域。邊框會在内邊距外且緊挨着内邊距。邊框的外側是外邊距，外邊距是圍繞在盒子可見部分之外的透明區域，用于控制元素之間的距離。
預設情況下，width和height是指盒子的内容區域的大小，如果此時給盒子添加内邊距或邊框，那麼會導緻整個盒子變大。現在給類名為"content-box"的盒子設定寬度、高度都為"80px"、内邊距為"5px"、邊框為"5px solid black"，此時可以打開調試工具檢視該盒子的大小，會發現該盒子實際是一個長度為"100px"的正方形，并不是"80px"。
實際上還有另外一種盒模型，它的width和height的計算方式和目前的盒子不同。完成以上所講的步驟即可通過測試，進入下一節的學習吧。
編輯
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content-box</title>
<style type="text/css">margin: 0;
padding: 0;
}
.content-box{
width:80px;
height:80px;
padding:5px;
border:5px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="content-box"></div>
</body>
</html>