CSS 元素分类
- 替换元素
replaced element
- 替换元素往往在文档中没有实际的内容,浏览器会根据这些元素的标签类型和属性来显示这些元素
- 大多数表单元素是替换元素,
- 举例 :
<img>
,<input>
,<textarea>
,<select>
,<object>
等,
- 不可替换元素
nonreplaced element
- 不可替换元素的内容就在文档自身中这个元素里面,浏览器会直接呈现这些元素的内容给用户;
- HTML的大多数元素是不可替换元素;
- 举例 :
<p>
,<span>
等
CSS中,每个元素(element
)产生一个矩形盒子(rectangular box
),该盒子叫做元素盒子 element box
。
每个元素盒子 element box
由外到内由以下部分组成 :
- 边缘区域
margin area
(可有可无)
- 总是透明 (从而允许父元素背景可见)
- 可以使用负值表示长度
- 边框区域
border area
(可有可无) - 填充区域
padding area
(可有可无)
- 不能使用负值表示长度
- 内容区域
content area
(可有可无)
盒子模型概览
盒子模型属性构成图示
盒子模型水平格式属性
- 七个属性
margin-left
,border-left
,padding-left
,width
,padding-right
,border-right
,margin-right
- 这7个属性的值加起来必须等于元素容器块(
containg block
)的宽度 - 7个属性中3个可以设置为
auto
:margin-left
,width
,margin-right
margin-left
,margin-right
可以是负数,其他属性的值都不能是负值
- 这7个属性的值加起来必须等于元素容器块(
- 在水平方向,盒子的边缘(
margin
)没有坍塌/重叠效应 (collapse
/overlap
)
盒子模型竖直格式属性
- 七个属性
margin-top
,border-top
,padding-top
,width
,padding-bottom
,border-bottom
,margin-bottom
- 这7个属性的值加起来必须等于元素容器块(
containg block
)的高度 - 7个属性中3个可以设置为
auto
:margin-top
,width
,margin-bottom
margin-top
,margin-bottom
可以是负数,其他属性的值都不能是负值
- 这7个属性的值加起来必须等于元素容器块(
- 在竖直方向,盒子的边缘(
margin
)有坍塌/重叠效应 (collapse
/overlap
)
盒子分类
- 块级盒子
block box
- 特点
- 总是在新行上开始
- 高度
height
,行高line-height
以及顶和底边距都可控制 - 宽度
width
缺省是它的容器的100%,除非设定一个宽度
- 该类元素举例 :
p
,h
,div
,table
- 特点
- 行内盒子
inline box
- 特点
- 和其他元素共用一行,不另起新行
- 高
height
,行高line-height
及顶和底边距不可改变 - 宽度
width
就是它的文字或图片的宽度,不可改变
- 该类元素举例 :
strong
,span
,img
- 特点
- 行内块级盒子
inline-block box
- 特点
- 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
- 可以通过CSS display定义将一个块级盒子元素显示为一个行内块级盒子
- CSS 定义方法 :
display : inline-block
- CSS 定义方法 :
- 特点
- table-cell 盒子 (
table-cell box
)
- 复杂,不多介绍,慎用