关于HTML的行内元素和块状元素
成功志
关于HTML的行内元素和块状元素
2013-4-26 ok12

行内元素对于Margin无响应:




      行内元素不响应垂直方向的Margin属性,水平方向响应(这个或许就是行内的定义)。

      建议:避免对行内元素使用Margin的所有属性,因为严格地来说是Margin是盒子模型的对外属性,是一个布局属性。如果一定需要实现左右缩进效果可以使用padding、文本缩进以及其他效果实现;

  

行内元素对于垂直方向Padding、Border拥有相应,但是响应不统一:




  在IE9和火狐中,就有着截然不同的响应方式,更别说是IE的低端版本,因此绝对不使用行内元素垂直方向的Padding属性。Border也需要谨慎使用,绝大多数情况同样不推荐使用,宁愿不要边框效果,通过text-decoration属性去渲染这样就不会出现问题。

  

下面说下IE9和FF下对于上面的两个属性不同的响应方式。

  在IE9下,这里吐槽下IE系列没有一个浏览器可以算的上好的浏览器,至少从5.5以后都是垃圾作品。

  在IE9下,我仅仅针对只有一行的情况下进行讨论。假设是<p><a></a></p>的标签,此时a元素垂直方向的Padding和Border属性会对a元素在行高属性处理上产生影响。具体情况是这样的:

  55555555.......研究数据丢失呀。回忆了一下,当时得出的结论是行内元素关于垂直方向的问题请使用line-height属性在处理,使用line-height属性时也请尽量确保该数值相较与font-size足够大(1.2倍应该足够)。另外,关于垂直方向的对齐可以通过base-line属性进行简单处理。




      小结论:inline不响应垂直margin,padding(有但请避免), width, height, max/min width/height 等属性声明。

  


 




正文:




block元素的特点:

  * 总是另起一行开始;

  * 高度,行高以及顶、底边距都可控制;

  * 宽度缺省是它所在容器的100%,除非设定一个宽度。(100%是指撑满容器,因为考虑margin、padding元素宽度可能不到100%)




inline元素的特点:

  * 和其它元素都在一行上;

  * 高度(行高有影响,但是不影响盒子模型的content)以及顶、底边距不可改变;

  * 宽度就是它所容纳的文字或图片的宽度,不可改变(自适应宽度,不可设定)。




块级元素的分类




  块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。




  一.结构化块状元素

  这类元素用于构造文档的结构,一个好的文档结构对于搜索引擎和应用其他技术都是十分有利的。它们没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。

  主要的结构化块状元素

  <ol> 、<ul> 、<dl>、<table>

  支持结构化的元素

  <li>、<dt>、<dd>、<caption>、<thead>、<tbody>、<tfoot>、<colgroup>、<col>




  二.终端块状元素

  这类元素用于从结构转向内容,它们拥有语义上的含义,能够表明内容的性质。终端块状元素属于结构的终点,它们不能再包含其他块级元素,只能包含文本或行级元素。

  终端块状元素

  <h1>...<h6>、<p>、<blockquote>、<dt>、<address>、<caption>




  三.多目标块状元素

  所谓多目标指的是可自由的扩展或嵌套文档的结构,也可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵,以终端的形式使用就含有语义的内涵。

  多目标块状元素既可以包含块状元素,也可以包含内容(文本与行级元素的组合为内容),但不能同时包含两者(实现上其实是可以的,但是为了文档结构清晰,请确保两者没有同时包含,这个是推荐方式)。

  多目标块状元素

  <div>、<li>、<dd>、<td> 、<form>




XHTML块级元素有哪些呢?(常见的)

  ◎ address – 地址

  ◎ blockquote – 块引用

  ◎ dir – 目录列表

  ◎ div – 常用块级

  ◎ dl、ul、ol – 定义列表、非排序列表、排序表单

  ◎ fieldset – form控制组

  ◎ h1-6 – 大标题、副标题、 3-6级标题

  ◎ hr – 水平分隔线

  ◎ p – 段落

  ◎ pre – 格式化文本

  ◎ table – 表格




XHTML行内元素有哪些呢? (常见的)

  ◎ a – 锚点

  ◎ abbr – 缩写

  ◎ b、i、u、em – 粗体、斜体、下划线、强调

  ◎ br – 换行

  ◎ cite – 引用

  ◎ img – 图片

  ◎ input – 输入框

  ◎ label – 表格标签

  ◎ select – 项目选择

  ◎ span – 常用内联容器,定义文本内区块

  ◎ textarea – 多行文本输入框

发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容