CSS盒模型

阅读目录

1. 标准盒模型与怪异盒模型
   • 标准盒模型
   • 怪异盒模型（IE盒模型）
2. 块级元素与行内元素
   • 块级元素
   • 行内元素
   • 行内块级元素

 

---

回到顶部

标准盒模型与怪异盒模型

标准盒模型

　

 

 

 

怪异盒模型（IE盒模型）

 

　

 

 

 

　

　　

 

　　两种盒模型可以由CSS的 box-sizing属性来切换，影响的是width属性与height属性的实际意义。

 

回到顶部

块级元素与行内元素

块级元素

　　段落p、标题h1或div等元素是块级元素，它们生成块级框，各个框体是纵向堆叠的（即“换行”）。任何元素可以由display:block声明为块级元素。注：通过CSS的display属性，是可以改变Html文档中元素默认的布局方式的，比如：p{display:inline} 也可以声明为行内元素。

 

 

横向格式化：

 

　　容纳块宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

 

其中，

 

• width的意义根据box-sizing属性定义；
• 内容区宽度、外边距宽度可以设为auto，其他不可以；
• 容纳块由最近的父元素的边界构成，当外边距取负值时，根据上述公式会自动调整元素的宽度使其向边界溢出。

 

纵向格式化：

　　同横向格式化，只不过外边距可以折叠。

 

行内元素

　　strong或span等元素是行内元素，它们生成的框体前后不“换行”。。任何元素可以由display:inline声明为行内元素。

 

非置换元素

• CSS盒模型属性，如margin、padding和border都可以应用在行内非置换元素上，只不过它们不影响行框的总体高度;
• 边框border的边界由font-size控制，而不受line-height影响；
• 正外边距会横向将文本推开，负外边距会让文本靠得更近；
• 内边距会影响背景色填充区域，设定了内边距可能会导致填充背景色遮挡上下文本；

置换元素

　　像<img>之类的置换元素，它的行框高度正好容纳置换元素及其盒模型属性，因此盒模型属性是会影响高度的；

 

行内块级元素

　　由display:inline-block声明的元素。

　　行内块级元素与其他元素和内容的关系按行内框处理，实际上是当做置换元素进行格式化的；而行内块级元素中的内容是视作块级元素进行格式化的，width、height或box-sizing属性都可以应用到行内块级元素中。