CSS盒子模型

边框、外边距、内边距

---

• 边框（border）：
  
  • 每个盒子都有边框（即使这些边框不可见或者是其宽度设为0px）。
  • 边框将一个盒子的边缘与另一个盒子隔开。

---

• 外边距（margin）：
  
  • 外边距位于边框的边缘之外。
  • 可以通过设置外边距的宽度在两的相邻盒子之间的边框之间创建间隙。

---

• 内边距（padding）：
  
  • 内边距是指盒子边框与盒子所包含内容之间的空隙。元素内容与元素边框之间的距离。
  • 增加内边框可以提高内容的可读性。

---

---

细节

---

边框border

• 边框宽度：border-width。

  • 如下图：
  • 

• 边框样式：border-style。

  • solid一条实线
  • dotted一串方形点
  • dashed一条虚线
  • double两条实线
  • groove显示为雕入页面的效果
  • ridge显示为在页面上凸起的效果
  • inset显示为嵌入页面的效果
  • outset显示为凸出页面的效果
  • hidden／none不显示任何边框

• 边框颜色：border-color

• 边框图像：border-image。需要三个值：图片的url、切割图片的位置、如何处理直边。

---

内边距padding

• padding-top
• padding-right
• padding-bottom
• padding-left

---

外边距margin

• margin-top
• margin-right
• margin-bottom
• margin-left

---

---

内容居中

1. 如果想让一个盒子在页面上居中显示（或者在某个元素内居中显示），首先需要为这个盒子设置一个宽度，然后将盒子的margin-left和margin-right属性的值设为auto。

---

内联元素与块级元素的转换

1. display作用：可以将内联元素与块级元素之间进行转换。
2. display取值：
   
   • inline：将块级元素表现为内联元素；
   • block：将内联元素表现为块级元素；
   • inline-block：将块级元素可以像内联元素一样浮动并且保持其他块级元素特征；
   • none：将元素从页面上隐藏。常用于设置导航条。

---

盒子的隐藏

1. visibility作用：允许从用户的视线中隐藏盒子，但它保留了元素原来占用的空间。
2. visibility取值：hidden（隐藏元素），visible（显示元素）。

---

盒子的投影

1. box-shadow

---

圆角、椭圆形

1. border-radius

---