行内元素和块级元素
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/