盒子結構：

外邊距 + 邊框 + 內邊距 + 內容
maigin + border + padding + width

區分三個概念：

• 內容寬高：width/height

• 元素寬高：邊框 + 內邊距 + 內容

• 元素空間寬高：外邊距 + 元素寬高

屬性：box-sizing 有兩個取值：

• 1.content-box 預設元素的寬高 == 邊框 + 內邊距 + 內容

• 2.border-box 元素的寬高 == 內容的寬高

巢狀關係的檢視，內部檢視要居中處理：

• 1.如果兩個盒子是巢狀關係, 那麼設定了裡面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來

• 2.如果外面的盒子不想被一起定下來,那麼可以給外面的盒子新增一個邊框屬性

• 3.在企業開發中, 一般情況下如果需要控制巢狀關係盒子之間的距離, 應該首先考慮padding, 其次再考慮margin。 margin本質上是用於控制兄弟關係之間的間隙的

auto 注意點:

• 1.在巢狀關係的盒子中, 我們可以利用margin: 0 auto;的方式來讓裡面的盒子在外面的盒子中水平居中

• 2.margin: 0 auto; 只對水平方向有效, 對垂直方向無效。要控制垂直方向，只能透過畫素。【EX：margin:150px auto;】

區分作用：text-align 和 margin: 0 auto;

text-align: center;作用: 設定盒子中儲存的文字/圖片水平居中
margin:0 auto;作用: 讓盒子自己水平居中

清空預設邊距

• 1.為什麼要清空預設邊距(外邊距和內邊距)
  在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等, 所以在企業開發中, 編寫程式碼之前第一件事情就是清空預設的邊距

• 2.如何清空預設的邊距
  格式

*{            margin: 0;            padding: 0;
}

• 3.注意點
  萬用字元選擇器會找導(遍歷)當前介面中所有的標籤, 所以效能不好
  企業開發中可以從這個網址中複製
  

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}

設定行高

• 1.什麼是行高?
  在CSS中所有的行都有自己的行高

• 注意點:
  行高和盒子高不是同一個概念
  行高指的是每行內容的高度
  盒子高指的是元素的高度

規律:

• 1.文字在行高中預設是垂直居中的

• 2.在企業開發中我們經常將盒子的高度和行高設定為一樣, 那麼這樣就可以保證一行文字在盒子的高度中是垂直居中的
  簡而言之就是: 要想一行文字在盒子中垂直居中, 那麼只需要設定這行文字的"行高等於盒子的高"即可

• 3.在企業開發中如果一個盒子中有多行文字, 那麼我們就不能使用設定行高等於盒子高來實現讓文字垂直居中, 只能透過設定padding來讓文字居中

還原字型和字號

注意點:

• 1.在企業開發中, 如果一個盒子中儲存的是文字, 那麼一般情況下我們會以盒子左邊的內邊距為基準, 不會以右邊的內邊距為基準, 因為這個右邊的內邊距有誤差

• 2.右邊內邊距的誤差從何而來? 因為右邊如果放不下一個文字, 那麼文字就會換行顯示, 所以文字和內邊距之間的距離就有了誤差

• 3.頂部的內邊距並不是邊框到文字頂部的距離, 而是邊框到行高頂部的距離

作者：葉子揚
連結：