Web页中的HTML元素的排版布局规则2
2008-05-28 09:36
477 查看
我们知道每个Web页面都是由一大堆的HTML元素组成的,我们把每对<element>...</element>这样的结构称为box,在Web页面的排版布局中,浏览器把这样的box作为排版的元素,并且把box分为了inline level和block level两种类型。
当然这个box内是可以容纳很多其它的HTML标签的,但是不管它的内部有多少的TAGs,box都被我们看成是一个排版元素,比如:<div style="border: solid 1px blue"> abc </div>和<table> <tr> <td> <span> <i> abc </i> </span> </td> </tr> </table>就可以被看成是两个排版元素div和table(当然div和table的内部还可以继续细分子的box)。
在browser的默认排版策略(没有任何的CSS修饰)中,box的inline和block分别指的是:
Inline Level:元素按从左向右排列,就像我们输入文字一样,一行容纳不下了自动分行继续显示。比如text、<a>、<img>、<span>等都属于inline element(除了30个block level的TAGs,和[u]几个none的TAGs[/u],其它大多数的标签都是inline level的;
Block Level:相对于它的parentElement构成的box来说,它的排版始终会独自占一行,就是在block level的元素后必然会新起一行。比如<form>、<hr>、<div>、<table>、<p>等[u]30个TAGs[/u]都属于block element。
在大多数的情况下,虽然我们完全可以在inline level的元素中嵌套block level的元素,可是这样会对它们的显示效果带来一些混淆和不确定。比如<div>正常情况下是单独占一行的,可是我们却可以使用一个inline level的元素<span>把<div>包裹起来,这时这个<span><div>...</span>构成的box排版属性仍是inline的(e.g.
)。可是如果我们用<span>把<table>包裹起来,这时这个<span><table>...</span>构成的box的排版属性却成了block的了(e.g.
)。
其实inline和block直观的表现就是,比如<a>link1 </a>text1 <a>link2 </a>text2 ...这样的HTML在browser里是可以显示一行上(preview:link1 text1 link2 text2 ...),而<table> <tr> <td> text1 </td> </tr> </table> <table> <tr> <td> text2 </td> </tr> </table> ...是不能显示在一行上的(preview:
)。
以上是browser对于box的默认的排版策略,而我们可以通过css来改变这些默认的策略。使用css中提供的position(配合top,left)、float和clear三个属性就可以实现用户定制Web页中元素的排版布局策略。
注:所有示例都只针对IE6.0sp1。
span&div
当然这个box内是可以容纳很多其它的HTML标签的,但是不管它的内部有多少的TAGs,box都被我们看成是一个排版元素,比如:<div style="border: solid 1px blue"> abc </div>和<table> <tr> <td> <span> <i> abc </i> </span> </td> </tr> </table>就可以被看成是两个排版元素div和table(当然div和table的内部还可以继续细分子的box)。
在browser的默认排版策略(没有任何的CSS修饰)中,box的inline和block分别指的是:
Inline Level:元素按从左向右排列,就像我们输入文字一样,一行容纳不下了自动分行继续显示。比如text、<a>、<img>、<span>等都属于inline element(除了30个block level的TAGs,和[u]几个none的TAGs[/u],其它大多数的标签都是inline level的;
Block Level:相对于它的parentElement构成的box来说,它的排版始终会独自占一行,就是在block level的元素后必然会新起一行。比如<form>、<hr>、<div>、<table>、<p>等[u]30个TAGs[/u]都属于block element。
在大多数的情况下,虽然我们完全可以在inline level的元素中嵌套block level的元素,可是这样会对它们的显示效果带来一些混淆和不确定。比如<div>正常情况下是单独占一行的,可是我们却可以使用一个inline level的元素<span>把<div>包裹起来,这时这个<span><div>...</span>构成的box排版属性仍是inline的(e.g.
)。可是如果我们用<span>把<table>包裹起来,这时这个<span><table>...</span>构成的box的排版属性却成了block的了(e.g.
span&table |
其实inline和block直观的表现就是,比如<a>link1 </a>text1 <a>link2 </a>text2 ...这样的HTML在browser里是可以显示一行上(preview:link1 text1 link2 text2 ...),而<table> <tr> <td> text1 </td> </tr> </table> <table> <tr> <td> text2 </td> </tr> </table> ...是不能显示在一行上的(preview:
text1 |
text2 |
以上是browser对于box的默认的排版策略,而我们可以通过css来改变这些默认的策略。使用css中提供的position(配合top,left)、float和clear三个属性就可以实现用户定制Web页中元素的排版布局策略。
注:所有示例都只针对IE6.0sp1。
span&div
相关文章推荐
- Web页中的HTML元素的排版布局规则
- Web页中的HTML元素的排版布局规则
- Web页中的HTML元素的排版布局规则
- Web页中的HTML元素的排版布局规则
- 手机移动web页面的排版与布局一点经验(尺寸单位兼容行。)
- 用户定制Web页中元素的排版布局策略
- Web前端基础(四):HTML元素的分类与嵌套规则
- 用户定制Web页中元素的排版布局策略
- 第131天:移动web页面的排版与布局
- 用户定制Web页中元素的排版布局策略
- 网页万能排版布局插件,web视图定位布局创意技术演示页
- web.xml中的url-pattern写法规则及匹配过程
- [WPF] 使用Grid与GridSplitter排版布局 - lonelyxmas
- 微信小程序中wxml和wxss的样式说明,彻底搞定布局排版
- web前端_表格table布局,同一列两个<td>之间有间隙解决办法。
- CSS定位与div布局排版
- 常用的CSS命名规则 (web标准化设计)
- Web移动端Fixed布局的解决方案
- 简单而兼容性好的Web自适应高度布局,纯CSS
- Web移动端Fixed布局的解决方案