什么是内联元素、块元素、块级元素?
一 · 块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
二 、内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
三、内联块级元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
内联元素的显示
为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。
以上内容参考:百度百科-内联元素
常见的块级元素、内联元素、行内块级元素
一、块级标签
1、独占一行,不和其他元素待在同一行
2、可以控制宽高、行高、边距、边框等改变其尺寸
常见的块级元素有:
<div> <p> <h1>-<h6> <ol> <dl> <li> <ul> <table> <address>
<form> <blockquote>
二、内联元素
1.只占据它对应标签的边框所包含的空间
2.只能通过修改水平边距、边框或者行高的方式改变尺寸
3.只能容纳文本或者其他内联元素
常见的内联元素有:
<a> <span> <br> <i>
<em> <strong> <label> <q> <var> <cite> <code>
三、行内块级元素
1.元素在行内排列,不会独占一行
2.支持设置宽高以及垂直边距、边框
常见的内联元素:
<img> <input> <td> <span>
<textarea> <select> <option>