CSS盒模型

CSS盒模型

元素分类：

• 块状元素：
  
  1. 块级元素特点：
     
     1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
     2. 元素的高度、宽度、行高以及顶和底边距都可设置。
     3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
  2. 类型转换：display：block(转化为块状元素)/inline(转化为内联元素)
• 内联元素：
  内联元素特点：
  
  1. 和其他元素都在一行上；
  2. 元素的高度、宽度及顶部和底部边距不可设置；
  3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。
• 内联块状元素：
  inline-block 元素特点：
  
  1. 和其他元素都在一行上；(内敛)
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。（块状）

盒模型

• 边框：粗细、样式(dashed（虚线）| dotted（点线）| solid（实线）。)、颜色。可以设置单个方向的边框，topbottom，left，right
• 宽度、高度：元素实际宽度（盒子的宽度）=左边界（margin）+左边框（border）+左填充（padding）+内容宽度（这就是定义的宽度）+右填充+右边框+右边界。对高度和宽度的定义不包括边界、边框、填充部分
• 填充：
  padding:10px ——————- 一周;
  padding-xxx: ——————- 单个方向;
  padding:10px 20px; ————- 上下10px，左右20px;
• 边界：与填充一样。