CSS 盒模型

先介紹幾個CSS經常使用概念

width

• 能夠設置元素的寬度

height

• 能夠設置元素的高度

padding

• 內邊距
• 能夠讓盒模型裏得內容與邊框有相應距離
• 他有四個參數，從前到後分別對應的是：上內邊距、右內邊距、下內邊距、左內邊距，每一個參數都不同
• 若是設置的內邊距是上下左右都同樣的只須要設置一個值就好
• 若是上下同樣，左右同樣，但上下和左右的值不同，則須要設置兩個值
• 若是三個值或者四個值都不同，那麼必須都把值寫出來
• 若是隻想用一個方向的內邊距能夠在padding上鍊接一個方向字符
  • padding-left/right/top/bottom

div{
  order: 1px solid red;
  width: 100px;
  padding: 10px;
}
複製代碼

div{
  border: 1px solid red;
  width: 100px;
  padding: 30px 20px;
}
複製代碼

div{
  border: 1px solid red;
  width: 100px;
  padding: 10px 30px 50px 70px;
}

複製代碼

div{
  border: 1px solid red;
  width: 100px;
  padding-left: 100px;
}
複製代碼

margin

• 外邊距
• 元素與元素之間的邊距
• 語法基本和內邊距相同，具體參照上一小節

盒模型

content-box

• 默認的盒模型
• width = 內容寬度
• 能夠使用 box-sizing 設置

div{
  border: 1px solid red;
  width: 100px;
  padding: 20px;
  box-sizing: content-box;
}
複製代碼

border-box

• IE盒模型
• width = 內容寬度 + border + padding
• 能夠使用 box-sizing 設置
• 推薦使用 border-box

div{
  border: 1px solid red;
  width: 100px;
  padding: 20px;
  box-sizing: border-box;
}
複製代碼

PS:正在學習的前端能夠嘗試一下作這幾個例子，這樣會加深印象並能有助於理解盒模型，若是有什麼建議或意見就私信我