盒子 模型(box-model)
CSS處理網頁時，它認為每個标簽都包含在一 個不可見的盒子裡。 如果把所有的标簽都想象成盒子，那麼我們對網頁的布局就相 當于是擺放盒子。我們隻需要将相應的盒子擺放到網頁中相應的 位置即可完成網頁的布局。
一個盒子(标簽)我們會分成幾個部分：
- –内容區(content)
- –内邊距(padding)
- –邊框(border)
- –外邊距(margin)
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-kZ9Zoo12-1601969646976)(1.png)]
模型-内容區
- 内容區指的是盒子中放置内容的區域，也就是标簽 中的文本内容，子标簽都是存在于内容區中的。
- 如果沒有為标簽設定内邊距和邊框，則内容區大小 預設和盒子大小是一緻的
- 通過width和height兩個屬性可以設定内容區的大小而不是整個盒子的大小。
- width和height屬性隻适用于塊标簽(包含行級塊)。
模型- 内邊距
顧名思義，内邊距指的就是标簽内容區與邊框以内的空間。
内邊距會影響整個盒子的大小。
使用padding屬性來設定标簽的内邊距。
例如：
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
這樣會設定标簽的上、右、下、左四個方向的内邊距。
模型-邊框
可以在标簽周圍建立邊框，邊框是标簽可見框的最外部。
可以使用border屬性來設定盒子的邊框：
border:1px red solid;
上邊的樣式分别指定了邊框的寬度、顔色和樣式。
也可以使用border-top/left/right/bottom分别指定上右下左 四個方向的邊框。
邊框可以設定樣式：
dotted （點線） dashed （虛線） solid （實線） double （雙線） groove （槽線）
border-radius設定四個角為圓角邊框
border-top-left-radius設定左上為圓角邊框
模型- 外邊距
外邊距是标簽邊框與周圍标簽相距的空間。 使用margin屬性可以設定外邊距。用法和padding類似，同樣也提供了四個方向的 。
margin-top/right/bottom/left。
margin的值可以為負值。
margin的值還可以auto，設定外邊距為最大值，當将左右外邊距設定為auto時，浏覽器會将左右外邊距設定為相等.
垂直設定為auto時值為0，是以水準居中也可以簡寫為margin:0 auto。
外邊距不會影響盒子的整體大小，但是會影響盒子的位置，會影響盒子的實際控制範圍。
清除浏覽器的預設樣式
浏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，是以為很多的标簽都設定了一些預設的margin和padding，而它的這些預設樣式，正常情況下我們是不需要使用的。
是以我們往往在編寫樣式之前需要将浏覽器中的預設的margin和padding統統的去掉。
*{
margin: 0;
padding: 0;
} 練習
width 和 height 隻是設定内容的大小 不是标簽整體大小
如果标簽的内邊距,邊框都沒有,那麼内容區的大小就是标簽的大小
width 和 height隻适用于塊級和行級塊标簽
width: 170px;
height: 170px;
background-color: #00FFFF; /* padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px; */
padding: 10px; /*設定 上下左右内邊距 */
/* padding: 10px 5px; 上下内邊距 左右内邊距*/
/* padding: 5px 10px 15px 20px; 上 右 下 左 */
/*
标簽實際大小 = 内容區 + 内邊距 + 邊框
*/
/*
邊框:就是标簽的最外層的框 也是計算在标簽大小内的
*/
/* border-bottom-color: red;
border-bottom-width: 1px;
border-bottom-style: solid; */
/* border-bottom: 5px red solid; */
border: 5px red solid;
border-radius: 10px;/*設定圓角邊框*/ <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.div1{
width: 150px;
height: 50px;
background-color: #008000;
padding: 75px 25px;
}</style>
</head>
<body>
<!--
需要最終200*200大小的标簽
有一張150*50圖檔
讓圖檔在标簽中水準垂直居中
-->
<div class="div1">
<img src="img/3.jpg"style="display: block;"/>
</div>
</body> <style type="text/css">/* 去掉标簽的一些預設樣式 内邊距 外邊距 */
*{
margin: 0px;
padding: 0px;
}
.div1{
width: 200px;
height: 200px;
background-color: #008000;
margin-bottom: 50px;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
/* margin-top: 10px; 上下的外邊距需要給具體的值*/
/*margin-left: auto;
margin-right: auto; 左右外邊距設定為auto時 外邊距最大化*/
margin: 10px auto;
/*
外邊距就是标簽與另一個标簽之間的距離
不會影響标簽的大小
但會影響标簽的位置,影響标簽的控制範圍
*/
}</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
<p>ssss</p>
</body> ![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)