Kidney自得其乐版CSS教程 Chapter2 Box Model

Posted 2020-07-18

Chapter 2 Box Model

Version	Update	Note
1.0	2016-5-31	首次添加。欢迎在评论中指出错误，一经核实，立即修订，且注明贡献者。

 

 

 

 

1、元素的分类

       1.1 替换元素

       替换元素就是替身元素，它替别人占个位，它不是普通的标签，它代表某种元件。

       例如：<img> <source><input><embed>……

       1.2 非替换元素

       大部分元素都是非替换元素。

       从形式上看非替换元素是一对标签，替换元素是一个标签。

       1.3 块级元素

       块级元素在普通文档流中会换行。一个占一行，一行不容二块。

       1.4 行内元素

       行内元素在普通文档流中不会换行。

       1.5 display

       用display可以改变元素的显示属性。

2、包含块

       许多用百分比计算尺寸的情形以及定位问题都涉及包含块的概念。

       CSS2.1定义包含块的规则：

       1、根元素和position:fixed的元素，其包含块为视窗（viewport），又称“初始包含块”。

       2、定位为relative和stalic的元素，其包含块为父元素。

       3、定位为absolute的元素，其包含块为最近的有定位的祖先元素。如果没有，则包含块为初始包含块。

3、块级元素盒模型

       3.1 概述

       盒模型，就是关于尺寸的一系列计算规则。

       对于块级非替换元素，有一个非常重要的约束规则：

       左右margin+左右padding+左右border+content的宽=父元素的content宽。

       只有外边距和宽高可以设为auto，具体计算出的值由上面的公式决定。

       只有外边距可以设置为负值。

       垂直方向也一样。     

非替换元素
content	默认情况下由width和height指定
padding	四周表现一致。
border	四周表现一致。
margin	四周表现一致。

       3.2 垂直外边距合并

       相邻的垂直方向的外边距会发生合并（重叠）。

4、行内元素盒模型

非替换元素
content	用width和height指定宽高无效。 宽由内容决定，高由行高决定。 行高由line-height以及替换元素或inline-block纵向高度总和（包括内外边距和边宽）共同决定。
padding	上下padding不会影响行高。左右padding会增加总宽度。
border	左右边会显示并占据空间，将邻近内容挤开。上下边会显示，但不会占据空间，而是浮在上面。
margin	左右margin起作用，上下margin不起作用。

 

5、inline-block盒模型

       大致可以认为，替换元素的表现和inline-block是一样的，或者说inline-block这种混合特性就是用于描述替换元素的。

       inline-block的尺寸计算继承了block的规则，而在是否换行这一点，它则继承了inline元素的特性。