1、块级元素(block-level element):一个水平流上只能显示一个块级元素,多个块级元素则换行显示
也就是说块级元素横向默认充满其父元素的内容区域,自带换行特性,其左右两边没有其他元素,即块级元素默认是独占一行的。
但是要注意的是:"块级元素"和"display为block的元素"不是一个概念,例如<li>元素默认的display值为list-item,<table>默认的display值默认为table,但他们都是块级元素
-
2、行内元素:行内元素不形成新内容块,即在其左右可以有其他元素。
-
3、 替换元素
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,在其显示中生成了框。
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素。
Example:
- <img src=”path/to/picture.jpg”/>
浏览器根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看HTML代码,则看不到图片的实际内容。 - <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属性为非替换的行内元素设置宽度,非替换的行内元素的高度是由框高度的行高决定的。
网友评论