爱站程序员基地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（内联盒子）。
