HTML5技术

非替换元素和替换元素 - 刘江龙

字号+ 作者:H5之家 来源:H5之家 2016-11-21 15:00 我要评论( )

学习资料 : 元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的。比如:div 与span的方式不一样。 什么是替换元素与非替换元素 替换元素: 替

学习资料 :

元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的。比如:div 与span的方式不一样。

什么是替换元素与非替换元素

替换元素:

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

非替换元素:

(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。

比如<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

除了这两字,还有两种非常属性的元素,显示元素,他分为两种情况,一种是‘块及元素’ ‘block’,还有一种是“行内元素”inline,大家也叫“内联元素”。

块及元素

他最明显的特征就是独自占领一行,自动充满父级元素的内容区域,绝不会让别人“侵略”(当然可以通过其他方式去改变他)。

常见的有:div,p..等等。

通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况,可以详查浮动这个知识

行内元素:

上面说块及元素独自占领一行,行内元素就没这么霸道了,他可以左右都允许有元素,最常见的就是<a></a>

通过display:'inline'设置以后都会变成行内元素。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5新增元素、标签总结 - 奔跑的铃铛

    HTML5新增元素、标签总结 - 奔跑的铃铛

    2016-10-19 12:00

  • HTML常用文本元素 - 艾前端

    HTML常用文本元素 - 艾前端

    2016-10-16 15:11

  • H5新元素 - JVAM

    H5新元素 - JVAM

    2016-09-25 18:00

  • 【高级功能】使用canvas元素(第一部分) - Luka.Ye

    【高级功能】使用canvas元素(第一部分) - Luka.Ye

    2016-08-27 10:00

网友点评
u