块元素(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 – 定义变量
注:内联样式权重高于外部样式。
综上所述,用实例总结一下权重分配:
1
2
3
4
5
|
<style>
span.fColor{
color
:
black
;}
.fColor{
color
:yellow;}
.fColor{
color
:
red
!important
;}
</style>
|
1
2
3
|
<p class=
"fColor"
style=
"color:blue; color:green !important;"
>
<strong>颜色测试</strong>
</p>
|
以上实例中很明显,显示颜色为green,因为这句包含两个权重高的方面color:green !important; 第一,它属于内联样式,就内联本身就排除了blue、green之外的颜色,剩下的两个再看important权限,所以最终显示颜色是green。
CSS选择器执行权重分配如下:
1
2
3
4
5
|
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. 内联元素,例如<a>、<span>等,定义上下边界不会影响到行高(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/
分享到:
相关推荐
注:这节课看似挺长,其实内容很少,通过举例子让大家更容易理解而已,不要被眼前的文字和代码吓到哟~ 块状元素 一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度...
块状元素与内联元素大全 html标签中所有块状元素与内联元素 对前端的开发设计有很大帮助
css块状元素与内联元素以及inline-block
什么是块元素block和内联元素inline,什么是块元素block和内联元素inline。。。
CSS文档流与块级元素(block)内联元素(inline)那点事
块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div” 内联元素(行内...
CSS实例 盒模型、块状元素与内联元素、CSS选择器.
作为其他元素的容器,可以容纳其他内联和块状元素。 描述 示例 <li>1 <li>2 <li>3 块级元素总是从新的一行开始并占据可用的全宽度 块状元素 常见的块状元素 — 其中标记是最典型的块状元素。 内联元素 标签在...
块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈
CSS文档流与块级元素(block)、内联元素(inline)
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
个人主页:www.xmqisheng.com 包含了曾经讲网页过程中的块元素与内联素区别时的知识点课件。
块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等
用于在HTML文档中呈现内联3D模型并允许使用CSS对其进行转换的自定义元素_JavaScript_下载.zip
WPF-进阶视频教程(共113集)-087内联元素.mp4
x86平台转x64平台关于内联汇编不再支持的解决办法.