美文网首页
行内元素和块级元素、替换元素和非替换元素

行内元素和块级元素、替换元素和非替换元素

作者: 啊啊啊阿南 | 来源:发表于2018-06-12 10:01 被阅读0次

1、块级元素(block-level element):一个水平流上只能显示一个块级元素,多个块级元素则换行显示

也就是说块级元素横向默认充满其父元素的内容区域,自带换行特性,其左右两边没有其他元素,即块级元素默认是独占一行的。
但是要注意的是:"块级元素"和"display为block的元素"不是一个概念,例如<li>元素默认的display值为list-item,<table>默认的display值默认为table,但他们都是块级元素

  • 2、行内元素:行内元素不形成新内容块,即在其左右可以有其他元素。

  • 3、 替换元素

替换元素就是浏览器根据元素的标签属性,来决定元素的具体显示内容,在其显示中生成了框。
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素。
Example:

  1. <img src=”path/to/picture.jpg”/>
    浏览器根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看HTML代码,则看不到图片的实际内容。
  2. <input type="submit" name="submit" value="提交"/>
    浏览器根据<input>标签的type属性来决定是显示输入框,还是按钮。
  • 4、 不可替换元素

HTML的大多数元素是不可替换元素,即其内容直接表现在浏览器。
Example:
<p>段落的内容</p>
<label>label的内容</label>

  • 5、 替换的行内元素:具有“内在尺寸”,尺寸是由自身决定的,而不会受周围环境的影响,如<img>和<input>等,但是如果同时定义<img>标签的width属性,和css的width属性,根据层叠原理,css的属性将优先于<img>标签的width属性;替换的行内元素的高度是有height属性决定
  • 6、非替换的行内元素:(如 a,span等元素)的宽度是其内容经过浏览器解释后实际的宽度,而不能通过设定width属性为非替换的行内元素设置宽度,非替换的行内元素的高度是由框高度的行高决定的。

相关文章

网友评论

      本文标题:行内元素和块级元素、替换元素和非替换元素

      本文链接:https://www.haomeiwen.com/subject/ljnceftx.html