display：行内元素和块元素相互转化
首先先说明行元素和块元素的区别：
行元素不独占一行 不能设置高度和宽度 内容有多高有多宽 那么这个行内元素就有多高多宽
常用行内元素 span img input strong small sup
块元素 不管内容有多少 都独占一行 可以设置块元素的高度和宽度
常用块元素 div p dl ul ol h1 table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行元素和块元素的区别</title>
<!--
行元素不独占一行 不能设置高度和宽度 内容有多高有多宽 那么这个行内元素就有多高多宽
常用行内元素 span img input strong small sup
块元素 不管内容有多少 都独占一行 可以设置块元素的高度和宽度
常用块元素 div p dl ul ol h1 table
-->
</head>
<body>
<span style="background-color: #0000FF;">我是一个行内元素</span>
<div style="background-color: #FFA500; height: 50px; width: 600px;">我是一个块元素</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<!--
作者：770267939@qq.com
时间：2020-03-02
描述：display：行内元素和块元素相互转化
inline 把元素转化成行内元素
block 把元素转化成一个块元素
none 设置元素不可见
-->
<div style="display: inline;">盒子1</div>
<div style="display: inline;">盒子2</div>
<div style="display: inline;">盒子3</div>
<span style="display: block;">盒子4</span>
<span style="display: block;">盒子5</span>
<span style="display: block;">盒子6</span>
<span style="display: block;">盒子7</span>
<div style="display: none;">盒子8</div>
</body>
</html>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
