、

、

、

、
、

、、

、

和

。

inline-level

行级元素。可以和其他元素处于一行，不用必须另起一行；元素的高度、宽度及顶底边距不可设置；元素的宽度就是它包含的文字、图片的宽度，不可改变。文本的很多样式渲染，比如伪粗体、伪斜体、删除线、下划线等，都要仰仗行级元素的作用。

块级元素中的子元素

块级元素可以包含多个子块级元素，也可以包含多个行级元素。块级元素中不能同时包含块级和行级元素。

两个兄弟盒子之间的距离由margin属性决定。

行级元素中的子元素

行级元素内可以包含行级元素。当行级元素包含块级元素时，会被块级元素拆成两个行级元素。

盒之间的水平margin、border和padding都有效。当一个行盒放不下上下文内所有盒子时，会被分到多个垂直折叠的行盒内。行盒内的水平分布由text-align决定。

float

浮动。块级元素一定不能出现在同一行吗？未必。比如之前笔者提到了基于

的分栏，也可以采用块级的section加float属性实现分栏，每个栏宽20%即可。所以，浮动元素就是从常规中脱离，可漂浮在容器(包含块)的左边或者右边并依次排列的元素。

display

block生成块级盒；inline生成行级盒；inline-block生成行级盒，为其内容生成块级盒；none在排版时将元素忽略。

width

宽度。CSS中的宽度一般指盒子模型中content的宽度。如果你使用百分比宽度，那么百分比也是相对父容器/块的content而言。当然前提是该父容器/块本身的宽度并不依赖于它。

padding

内边距。这里请注意参数的书写方法，和本书此前提及的字体调用逻辑有相似之处，都反映了HTML5参数读取时的基本规则。

padding：10px、5px、15px和20px。

·  上内边距是10px；

·  右内边距是5px；

·  下内边距是15px；

·  左内边距是20px。

padding：10px、5px、15px。

·  上内边距是10px；

·  右内边距和左内边距是5px；

·  下内边距是15px。

padding：10px和5px。

·  上内边距和下内边距是10px；

·  右内边距和左内边距是5px。

padding：10px；

·  所有4个内边距都是10px。

margin

外边距。注意相邻的两个盒子的Margin会重叠，而且Margin也可以为负——这也是微信图文里把字写在图片上的常见套路。

box-sizing

属性可以为三个值之一：

·  content-box（默认）；

·  border-box；

·  padding-box。

content-box：border和padding不计算入width之内。

border-box：border和padding计算入width之内。

上一章目录下一章