CSS块级盒子和内联盒子
CSS块级盒子和内联盒子
块级盒子（Block box）
块级盒子：
- 每个盒子都会换行。
- 宽（width）和高（height）属性可以发挥作用，未设置宽的情况下可以扩展并占据父容器的横向空间。
- 外边距（margin）、边框（border）和内边距（padding）会将其他元素从当前盒子周围推开。
HTML代码：
<DOCTYPE html>
<html>
<head>
<title>块级盒子</title>
<link rel="stylesheet" href="styles/块级盒子.css">
</head>
<body>
<div class="div">
<p class="box">块级盒子</p>
</div>
</body>
</html>
CSS代码：
.box::before{
content: "块级盒子";
display: block;
width: 100px;/*不设置宽则会占据父容器的横向空间*/
height: 100px;
background-color: red;
border: 1px solid black;}
.div{
width: 200px;
height: 500px;
background-color: blue;}
内联盒子
内联盒子：
- 盒子不会产生换行。
- 宽（width）和高（height）属性不会起作用。
- 外边距（margin）、边框（border）和内边距（padding）会被应用但是不会推开其他元素。
HTML代码：
<!DOCTYPE html> <html> <head> <title>内联盒子</title> <link rel="stylesheet" href="styles/内联盒子.css"> </head> <body> <p>瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西<span>span</span><span>span2</span> 瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦 瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦瓦达西瓦</p> </body> </html>
CSS代码：
span{
/*<span>、<a>、<em>、<strong>默认处于inline状态*/
background-color: brown;
margin: 20px;
padding: 10px;
border: 2px dotted blue;
height: 100px;/*宽度和高度会被省略*/}
通过对盒子的display属性来设置盒子的外部显示类型：block（块级盒子）、inline（内联盒子）。
