文章目录
  1. 1. 块级元素
  2. 2. 行内元素
  3. 3. 区别
  4. 4. inline-block
  5. 5. 转换
    1. 5.1. 块级元素转换为行内元素
    2. 5.2. 行内元素转换为块级元素

页面中元素一般分为两种:块级元素,行内元素(内联元素)。两种类型的元素在页面布局中的使用中略有区别,了解二者区别才能做出更完美的页面。

块级元素

顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的<div>、<p>、<ul>默认状态下都是属于块级元素。块级元素默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。

块级元素有:

<address> /<blockquote> /<button> /<caption>
<dd> /<del> /<div> /<dk> /<dt> /<fieldset>
<form> / <h1>~<h6> /<hr> /<iframe> / <ins> 
<legend> /<li> / <map> /<noframes> /<noscript>
<object> / <ol> / <p>/ <pre> /<table>
<tbody> /<td> /<tfoot> /<th> /<thead> /<tr> /<ul>

行内元素

通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。

行内元素有:

<a> / <abbr> / <acronym> /<b> /<bdo>/<big>/
<br> / <button>/<cite>/<code>/<del>
<dfn>/<em>/<i>/<iframe>/<img>/<input>
<ins>/<kbd>/<label>/<map>/<object>/<q>
<samp>/<select>/<small>/<span>/<strong>
<sub>/<sup>/<textarea>/<tt>/<var>

区别

  1. 行内元素与块级元素直观上的区别

    行内元素会在一条直线上排列,都是同一行的,水平方向排列

    块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

  2. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素
  3. 行内元素与块级元素属性的不同,主要是盒模型属性上

    行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

  4. text-align属性

    text-align:center仅作用于行内内容上。

    IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。

    解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”:

inline-block

display在2.1新增的一个值,叫做行内的块,有以下特性:

  1. 块在一行显示
  2. 行内属性标签支持宽高
  3. 没有宽度的时候内容撑开宽度

但是这个属性在IE6/7下是有兼容问题的。不过该属性的设置总是会触发hasLayout。

转换

块级元素转换为行内元素

块级元素能通过css的display:inline变成内联元素,或者使用float来实现(使多个块级元素在同一行)。

行内元素转换为块级元素

非块级元素可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。

文章目录
  1. 1. 块级元素
  2. 2. 行内元素
  3. 3. 区别
  4. 4. inline-block
  5. 5. 转换
    1. 5.1. 块级元素转换为行内元素
    2. 5.2. 行内元素转换为块级元素