<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline_and_block</title>
</head>
<body>
<!--
之所以叫行元素，是因为如果不指定width，那么元素就会占据一整行的宽度，并且就算设置了宽高还是会
占据一整行的空间
-->
<div style="background: black;height: 100px"></div>
<div style="background: red;height: 100px;width: 100px"></div>
<div style="background: green;height: 100px;"></div>
<br/>
<!--行元素设置宽度只是设置它的内容，实际它的宽度还是一行，注意这里的行是相对于父元素来说的-->
<div style="width: 200px;height: 200px;background-color: black;text-align: center;">
<div style="width: 50px;height: 50px;background-color: red;">
</div>
</div>
<br/>
<!--当设置为inline-block后设置宽高才是设置元素本身大小-->
<div style="width: 200px;height: 200px;background-color: black;text-align: center;">
<div style="width: 50px;height: 50px;background-color: red;display: inline-block;"></div>
</div>
<!--对于行内元素来说，设置宽高无效，只能包裹内容，行内元素只会占据自身内容空间，不会进行换行-->
<span>A</span>
<span style="width: 100px;height: 100px;background-color: red">B</span>
<!--inline_block就是将元素设置为可以设置宽高的行内元素-->
<span style="width: 100px;height: 100px;background-color: red;display: inline-block;">B</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display_inline_block</title>
</head>
<body>
<!--display: inline-block;表示该元素为行内元素，并且支持行元素的宽高属性-->
<div style="background-color: black;width: 300px;height: 300px">
<div style="background-color: red;width: 100px;height: 100px;display: inline-block;"></div>
<div style="background-color: blue;width: 100px;height: 100px;display: inline-block;"></div>
</div>
<br/>
<!--注意行内元素之间如果出现换行就会解析渲染为一个空格-->
<div style="background-color: black;width: 300px;height: 300px;">
<font style="background-color: red;vertical-align: middle;">A</font>
<font style="background-color: green;vertical-align: middle;">B</font>
<div style="background-color: red;width: 100px;height: 100px;display: inline-block;vertical-align: middle;"></div>
<div style="background-color: blue;width: 100px;height: 100px;display: inline-block;vertical-align: middle;"></div>
</div>
<!--去除空格的最好方式就是不空格-->
<div style="background-color: black;width: 300px;height: 300px;">
<font style="background-color: red;vertical-align: middle;">A</font>
<font style="background-color: green;vertical-align: middle;">B</font>
<div style="background-color: red;width: 100px;height: 100px;display: inline-block;vertical-align: middle;"></div><div style="background-color: blue;width: 100px;height: 100px;display: inline-block;vertical-align: middle;"></div>
</div>
</body>
</html>
网友评论