行内元素和块级元素
HTML
可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS
的display
属性相互转换。
行内元素
行内元素对应的CSS
样式设置为display: inline;
。
特点
- 元素排在一行。
- 封闭后不会自动换行。
- 不能指定高度与宽度。
- 可以使用
line-height
来指定高度。
- 外边距对于水平方向有效,垂直方向无效。
- 内边距对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响。
示例
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
span{
width: 1000px; /* 指定宽度无效果 */
height: 1000px; /* 指定高度无效果 */
color: #333;
background: #eee;
padding: 100px 20px; /* padding对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响 */
margin: 100px 20px; /* margin水平方向有效,垂直方向无效 */
}
</style>
常见行内元素
<a>
、<span>
、<b>
、<big>
、<i>
、<small>
、<tt>
、<abbr>
、<acronym>
、<cite>
、<code>
、<dfn>
、<em>
、<kbd>
、<strong>
、<samp>
、<var>
、<bdo>
、<br>
、 <img>
、<iframe>
、<map>
、<object>
、<q>
、<script>
、<sub>
、<sup>
、<button>
、<input>
、<label>
、<select>
、<textarea>
。
块级元素
块级元素对应的CSS
样式设置为display: block;
。
特点
- 独占一行。
- 封闭后自动换行。
- 默认宽度为
100%
。
- 可以指定宽度和高度。
- 内外边距对于四个方向有效。
示例
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
div{
width: 100px; /* 不指定则默认宽度100% */
height: 100px; /* 可以指定高度 */
color: #333;
background: #eee;
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 10px 20px; /* margin的设置在四个方向都有效 */
}
</style>
常见块级元素
<div>
、<address>
、<article>
、<aside>
、<audio>
、<blockquote>
、<canvas>
、<dd>
、<dl>
、<fieldset>
、<figcaption>
、<figure>
、<footer>
、<form>
、<h1>~<h6>
、<header>
、<hgroup>
、<hr>
、<noscript>
、<ol>
、<output>
、<p>
、<pre>
、<section>
、<table>
、<tfoot>
、<ul>
、<video>
。
行内块级元素
行内块级元素对应的CSS
样式设置为display: inline-block;
。
特点
- 可以指定宽度和高度。
- 内外边距对于四个方向有效。
- 元素排在一行,但是会有空白缝隙。
示例
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
input{
width: 100px; /* 可以指定宽度 */
height: 100px; /* 可以指定高度 */
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 100px 20px; /* margin的设置在四个方向都有效 */
}
</style>
常见行内块级元素
<input>
、<img>
、<button>
、<iframe>
、<textarea>
、<select>
。
代码示例
<!DOCTYPE html>
<html>
<head>
<title>行内元素与块级元素</title>
<style type="text/css">
div{
width: 100px; /* 不指定则默认宽度100% */
height: 100px; /* 可以指定高度 */
color: #333;
background: #eee;
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 10px 20px; /* margin的设置在四个方向都有效 */
}
span{
width: 1000px; /* 无法指定宽度 */
height: 1000px; /* 无法指定高度 */
color: #333;
background: #eee;
padding: 100px 20px; /* padding对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响 */
margin: 100px 20px; /* margin水平方向有效,垂直方向无效 */
}
input{
width: 100px; /* 可以指定宽度 */
height: 100px; /* 可以指定高度 */
padding: 10px 20px; /* padding的设置在四个方向都有效 */
margin: 100px 20px; /* margin的设置在四个方向都有效 */
}
</style>
</head>
<body>
<section>
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
</section>
<section >
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
</section>
<section >
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
</section>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://blog.csdn.net/zhanglir333/article/details/79178370
https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/