[转]内联元素和块状元素，盒子模型

阅读更多

块元素(block element)
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

内联元素(inline element)
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量

注：内联样式权重高于外部样式。

综上所述，用实例总结一下权重分配：

</code> </div> <div class="line number2 index1 alt1"> <code class="css plain">span.fColor{ </code> <code class="css keyword">color</code> <code class="css plain">:</code> <code class="css value">black</code> <code class="css plain">;}</code> </div> <div class="line number3 index2 alt2"> <code class="css plain">.fColor{ </code> <code class="css keyword">color</code> <code class="css plain">:yellow;}</code> </div> <div class="line number4 index3 alt1"> <code class="css plain">.fColor{ </code> <code class="css keyword">color</code> <code class="css plain">:</code> <code class="css value">red</code> <code class="css color3">!important</code> <code class="css plain">;}</code> </div> <div class="line number5 index4 alt2"> <code class="css plain">

"fColor" style= "color:blue; color:green !important;" >
颜色测试

以上实例中很明显，显示颜色为green，因为这句包含两个权重高的方面color:green !important; 第一，它属于内联样式，就内联本身就排除了blue、green之外的颜色，剩下的两个再看important权限，所以最终显示颜色是green。

CSS选择器执行权重分配如下：

style="color:green !important;"
style="color:blue;"
.fColor{ color:red !important;}
span.fColor{ color:black;}
.fColor{ color:yellow;}

盒子模型：
W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒 模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

盒模型的实际宽度

关于盒模型，还有以下几点需要注意：
A. 对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图所示：

B. 块级元素（display： block）
每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。

C. 内联元素，例如、等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

D. 内联元素（display：inline）
内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。

边界值可为负，其显示效果各浏览器可能不相同。

填充值不可为负。

边框默认的样式（border-style）为不显示（none）。

补充：

1 http://hi.baidu.com/sonan/blog/item/229b5f4ee0b3e501b2de05a7.html

2 http://www.birdol.com/article/566.html

3. http://www.w3.org/TR/CSS2/box.html

 

原文地址：http://www.livingelsewhere.net/2010/05/22/inline-block-box-model/