css 盒子分类及内联元素和块级元素盒模型设置是否生效问题

元素

概念：html标签就是元素，元素一般有内部盒子和外部盒子

区分：

元素外部盒子内部盒子块级盒子内联级盒子块级盒子内联级盒子

分类：根据外部盒子的不同可以分为内联元素和块级元素;根据内容是否能替换可以分为替换元素和非替换元素。

尺寸：
元素内部尺寸：content+padding
元素尺寸：content+padding+border
元素外部尺寸：content+padding+border+margin
由于css默认的流是水平方向的，所以margin:auto只能改变水平方向的元素内部尺寸，即div的width:auto，100%占据父元素空间时，margin变大了content就会变小（流动性）

内联元素和块级元素特点

纯内联元素（inline）

1. 不能设置,即无法改变盒子尺寸：width、height、margin-top、margin-bottom
2. 可以设置但可能无效果：padding-top、padding-bottom（当距离前面后面元素（或者父元素上下）距离大于等于padding-top或padding-bottom的值时有效果）
3. 背景色跟着content走且不规则。没有行框盒子。
4. padding-left和padding-right是加载最前面和最后面的文字上的。
5. inline-block、block每一行都有一个行框盒子。

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {background: #f00;width: 100px;height: 100px;margin-bottom: 120px;}span{width: 100px;   /*不能设置，即不能改变盒子尺寸*/height: 100px;  /*不能设置*/border: 1px solid;  /*可以设置*/padding: 100px; /*top、bottom可能没效果，left、right可以设置。当距离前面后面元素（或者父元素上下）距离大于等于padding-top或padding-bottom的值时有效果*/margin: 10px;   /*top、bottom不能设置，left、right可以设置*/}</style></head><body><div class=\"div1\"></div><span>a</span></body></html>