CSS中的盒子模型、怪异盒子模型

盒子模型

• 构成：
  • Margin(外边距)
    清除边框外的区域，外边距是透明的。
  • Border(边框)
    围绕在内边距和内容外的边框。
  • Padding(内填充)
    清除内容周围的区域，内边距是透明的。
  • Content(内容)
    盒子的内容，显示文本和图像。

应用方式

box-sizing:content-box; 

边框

边框样式

p{
    border-color:  ;
    border-width:  ;
    border-style:  ;(必填项)
}

四条边框的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话则对应对边。

• border-style:ridge ; 【脊线】
• border-style:solid dotted; 【上实、右点、下实、左点】
• border-style:solid dotted dashed; 【上实、右点、下虚、左点】
• border-style:solid dotted dashed double; 【上实、右点、下虚、左双】

分别设置边框样式

p{
    border-top:red npx solid;  
    border-right:  ;  
    border-bottom:  ;  
    border-left:  ;
}

外边距与内填充（统称为边距）

• 在HTML5中很多元素都有默认的外边距或者内填充。
• 比较特殊的是div，没有外边距或者内填充，其他的都有。

去掉边距的方式

margin:0;  padding:0;

• 使用通配符清除所有元素的边距：

  *{
      margin:0;padding:0;
  } 
  

• 补充：对单边的设置方式与border相同；

外边距合并

• 所谓外边距合并，指的是margin合并；
  • 块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距合并；
• 注意：外边距合并只针对块级元素，而且是顶部或底部的外边距；

解决方式

• 设置的时候使用padding值，将margin值设为0；
• 加透明边框用以使得元素之间隔开举例：
  • 透明设置方式：
    • border-style:rgba(0,0,0,0.0);
    • border-style:transparent;

怪异盒子模型

• IE盒子模型
• 可固定“外边框+边框+内边距”的数值 ；

应用方式

box-sizing:border-box;

与标准盒子模型对比

• 宽高计算方式不同：
  • 标准盒模型：
    • width = content-width
    • height = content-height
  • 怪异盒子模型:
    • width = content-width + padding-width + border-width
    • eight = content-height + padding-height + border-height