行内元素(内联元素)、块级元素以及行内块元素的区别

行内元素以及块级元素的区别
inline行内元素(内联元素)
block块级元素  inline-block行内块元素
 不换行,和其他内联元素共行  总是从新行开始

 不独占一行的块级元素,

在某种程度上可实现与浮动的相似的效果,

但是inline-block占据文档流,

所以不会产生父容器坍塌问题,

而产生的缝隙问题,使用张鑫旭的博客

去除inline-block元素间间距的N种方法

 

 

 

 

 

 

可替换元素

 可以设置元素的高度与宽度

可设置margin和padding任意方向,几乎所有的可替换元素都是行内元素

如<img>、<input>、<textrarea>、<select>、<object>这些空元素

 默认宽度是父容器宽度的100%,可以设置高与宽,

 可以设置margin和padding任意方向

非替换元素

 宽度只与内容有关,不可设置高度与宽度,而是用line-height来控制高度,

padding左右起作用,上下不会影响行高

margin左右作用起作用,上下不起作用

例如<a>、<span>等

只能容纳文本或其他内联元素  能容纳其他块状元素或者内联元素

       

备注:(以下内容引自mabel_on_line

可替换元素

          就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

          例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容

          又例如:根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

          (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。

          这些元素往往没有实际的内容,即是一个空元素, 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

 

非替换元素:(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

          段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

 

padding左右起作用,上下不会影响行高,

          但是对于有背景色和内边距的行内非替换元素,背景可以向元素上下延伸,但是行高没有改变。

          因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)

margin左右作用起作用,上下不起作用,

          原因在于:行内非替换元素的外边距不会改变一个元素的行高(《css权威指南》 P227)。

 

行内元素(内联元素):行内元素不形成新内容块,即在其左右可以有其他元素,

          例如:<a>、<span>、<strong>等,都是典型的行内级元素。

          display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。

 

块级元素:最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的

          典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。            

           通过CSS设定了浮动(float属性,可向左浮动或向右浮动的)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。

           ★ 但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。

                例如:“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。

posted @ 2018-04-02 16:51  Azimuth  阅读(1055)  评论(0编辑  收藏