1)块级元素
特点:
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时,默认为100%
4.块级元素中可以包含块级元素和行内元素
5.块级文字元素中不能放入其他块级元素
6.块级大多为结构性标记
常见块级元素:
<center>...</center> 地址文字<h1>...</h1> 标题一级<h2>...</h2> 标题二级<h3>...</h3> 标题三级<h4>...</h4> 标题四级<h5>...</h5> 标题五级<h6>...</h6> 标题六级<hr> 水平分割线<p>...</p> 段落<pre>...</pre> 预格式化<blockquote>...</blockquote> 段落缩进 前后5个字符<marquee>...</marquee> 滚动文本<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>...</table> 表格<form>...</form> 表单<div>...</div>
2)行内元素
特点:
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度,依靠自身字体大小和图形支撑结构的,不可以改变
4.行内元素只能行内元素,不能包含块级元素
5.行内元素的paddding可以设置
6.margin只能够设置水平方向的边距,即:margin-left和margin-right,设置margin-top和margin-bottom无效
7.块级大多为结构性标记
常见行内标签:
特点:
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度,不可以改变
4.行内元素只能行内元素,不能包含块级元素
5.行内大多为描述性标记
<b>...</b> 加粗<strong>...</strong> 加粗<sup>...</sup> 上标<sub>...</sub> 下标<i>...</i> 斜体<em>...</em> 斜体<del>...</del> 删除线<u>...</u> 下划线
3)行内块级元素
特点:
综合块级元素与行内元素的特性,可设宽高(默认是内容宽高),也可以设置内外边距
常见行内块级元素:
<span>...</span><a>...</a><img/><textarea>...</textarea><button>..</button><input><br><label>...</label><select>...</select><canvas>...</canvas><progress>...</progress><cite>...</cite><code>...</code><strong>...</strong><em>...</em><audio>...</audio><video>...</video>
4)块级元素与行内元素完整列表:
5)显示模式转换
display:block|inline|inline-block
1)块级转行内、行内块级
<!-- 快级元素转为行内元素 --><h1 class="inline">Talk is easy,show me the code!</h1><h1 class="inline">Talk is easy,show me the code!</h1><h1 class="inline">Talk is easy,show me the code!</h1><h1 class="inline">Talk is easy,show me the code!</h1><hr><!-- 快级元素转为行内块级元素 --><h1 class="inline-block">Talk is easy,show me the code!</h1><h1 class="inline-block">Talk is easy,show me the code!</h1><h1 class="inline-block">Talk is easy,show me the code!</h1><h1 class="inline-block">Talk is easy,show me the code!</h1>
将前两行转为行内元素,而将后两行转为行内块级元素:
.inline{display: inline;background: #ccc;}.inline-block{display: inline-block;background-color: #ccc;}hr{height:5px;background: green;}
在浏览器中的显示效果为:
可以看到,转为行内元素的
没有独占一行,垂直方向的外边距属性也消失了;而转为行内块级元素的也没有独占一行(之所以有换行是因为后面的位置不够,所以第三个h1自动换行到了第三行),但仍保持了垂直方向的外边距,这也说明了行内元素与行内块级元素的区别。
2)行内块级元素转为块级元素
<!-- 不做改变 --><img src="surprice.jpg" alt=""><img src="surprice.jpg" alt=""><hr><!-- 转为块级元素 --><img src="surprice.jpg" alt="" class="block-img"><img src="surprice.jpg" alt="" class="block-img">
前两行不做改变,而将后两行转为块级元素:
.block-img{display: block;}
在浏览器中的显示效果为:
3)行内元素转行内块级元素、块级元素
<!-- 不做改变 --><i class="i-inline">Talk is easy ,show me the code!</i><i class="i-inline">Talk is easy ,show me the code!</i><hr><!-- 转为行内块级元素 --><i class="i-inine_block">Talk is easy, show me the code!</i><i class="i-inine_block">Talk is easy, show me the code!</i><hr><!-- 转为块级元素 --><i class="i-block">Talk is easy,show me the code!</i><i class="i-block">Talk is easy,show me the code!</i>
前两行不做改变,第三、四行转为行内块级元素,第五、六行转为块级元素,此时在浏览器中的显示效果为:
可以看到行内元素不能独占一行,且设置外边距无效;行内块级元素也不能独占一行,但能够设置外边距;块级元素即独占一行,也能够设置外边距。