一：邊框屬性
1. 邊框：就是環繞在標簽寬度和高度周圍的線條
2. 如何設置邊框屬性
2.1 連寫（同時設置四條邊的邊框）
border：邊框的寬度 樣式 顏色；
快捷鍵：
bd + border: 1px solid #000;
注意點：
1.連寫格式中顏色屬性可以省略，省略之后默認為黑色
2.連寫格式中樣式不能省略，省略之后就看不到邊框了
3.連寫格式中寬度可以省略，省略之后還是可以看到邊框
2.2 連寫
border-top: 邊框的寬度 樣式 顏色
border-left: 邊框的寬度 樣式 顏色
border-right: 邊框的寬度 樣式 顏色
border-bottom: 邊框的寬度 樣式 顏色
2.3 連寫(分別設置四條邊框)
border-width: 上 右 下 左
border-style: 上 右 下 左
border-color: 上 右 下 左
注意點:
1.順序是按照上右下左的順序,按照順時針賦值的
2.上右下左 > 上 右 下 > 左邊的取值和右邊的一樣
3.上右下左 > 上 右 > 左邊的取值和右邊的一樣,下邊的取值和上邊一樣
4.上右下左 > 上 所有邊顏色盒上邊一樣
3.非連寫(方向+要素)
border-top-width:1px;
border-top-color: red;
border-top-style:solid;
-
內邊距：
邊框和內容之間的距離就是內邊距
格式：
4.1 非連寫padding-top: padding-right: padding-left: padding-bottom:
4.2 連寫方式
padding: 上 右 下 左
和邊框的屬性是一樣的
注意點:
給標簽設置完內邊距之后,標簽占有的寬度和高度會發生變化
內邊距也會有背景顏色的
- 外邊距
就是標簽和標簽之間的距離
給一個標簽設置外邊距的方式：
5.1 非連寫方式
單獨設置標簽的上右下左
margin-top:
margin-left:
margin-right:
margin-bottom:
5.2 連寫方式
margin: 上 右 下 左;
省略編寫的方式和邊框以及內邊距一樣
注意點:外邊距的那一部分是沒有顏色的
在默認布局的垂直方向上，默認情況下外邊距是不會疊加的，會出現合并現象，誰的外邊距比較大就聽誰的
- 什么是CSS的盒子模型
在html中所有的標簽都可以設置 寬度/高度 == 指定可以存放內容的區域
6.1 內容的寬度和高度
就是通過標簽的width和height屬性設置的寬度和高度
6.2 元素的寬度和高度
寬度 = 左邊框 + 左內邊距 + width +內右邊距 + 有邊框
高度同理
6.3 元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 +左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度同理
規律：
1.增加了padding之后，元素的寬度也會發生變化
2.如果增加了padding之后，還想保持元素的寬高，那就要減少內容的寬高
3.CSS3中新增了一個box-sizing屬性，這個屬性可以保證我們給盒子新增padding和border之后，盒子元素的寬度和高度不變
4.box-sizing屬性是如何保證增加padding和border之后盒子元素的寬度和高度不變，原理：增加padding和border之后，要想保證盒子元素的寬高不變，那么必須減去一部分內容的寬高
box-sizing：content-box;是默認的取值，保持寬高不變時，可以取值box-sizing: border-box;
注意點：
1.如果兩個盒子是嵌套關系，那么設置了里面的一個盒子的頂部的外邊距外面的一個盒子也會被頂下來
2.如果不想被一起頂下來，那么可以給外面的盒子添加一個邊框屬性
3.實際開發中，一般首先考慮padding 其次再考慮 margin margin本質上是用于兄弟關系之間的間隙的
4.在嵌套關系的盒子中，我們可以使用 margin ：0 auto；的方式來讓里面的盒子在外面的盒子中水平居中
5. margin:0 auto;只對水平方向有效,對垂直方向無效
- 盒子居中和內容居中
text-align:center; 和 margin:0 auto;之間的區別?
text-align:center;的作用：設置盒子中存儲的文字、圖片水平居中
margin： 0 auto； 讓盒子自己水平居中
8.系統默認會給我們自動加上邊距，所以在編寫html時我們需要清空一下邊距：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,p,blockquote,th,td
{
margin:0; padding:0
}
- 行高和字號
行高和盒子的高度不是同一個概念：
行高是某一行內容的高度
盒子高度：是整個盒子模型的高度
9.1 文字在行高中默認是垂直居中的
9.2 在開發中，經常講盒子的高度和行高設置為一樣，簡而言之：要想 一行文字 在盒子中垂直居中，那么只需要將行高等于盒子的高度即可
9.3 開發中，如果一個盒子中有多行文字，那么就不能設置行高來實現文字垂直居中，只能通過padding來讓文字居中
10.還原字體和字號
開發中，如果一個盒子中存儲的是文字，那么一般情況下我們會以盒子左邊的內邊距為基準，不會以右邊的右邊距為基準，因為這個右邊的內邊距又誤差
右邊的內邊距的誤差從何而來？因為右邊如果放不下一個文字，那么文字就會換行顯示，所以文字和內邊距之間的差距就有誤差
頂部的內邊距并不是邊框到文字頂部的距離，而是邊框到行高頂部的距離
91D801FE-2E5C-4E5E-BAF3-D54AF6DD3C8F.png
