HTML——css--盒子模型与布局
盒子：
html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别
而这种现象则被称为盒子模型
盒子模型种类
1.块级盒子（标签、元素）：div ul li h1~h6
独占一行，对宽度高度支持
2.内联级盒子：span a
不独占一行，对宽度高度不支持
3.内联块级盒子：img input
不独占一行，对宽度高度支持
4.弹性盒子：
不论父级能不能放下子元素，子元素始终横向布局
盒子模型分区
内容区：
width:200px;
height:100px;
填充区：
padding:50px;
padding:50px,20px;上下，左右
padding:50px,20px，10px;上，左右，下
padding:50px,20px，10px，100px;上，左,右，下
单独一边设置:
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
边框区：
组成：
border-style:边框样式
border-color:边框的颜色
border-width:边框宽度
例：
1.分开写
border-color: black;
border-style: dashed;
border-width: 5px;
2.合着写
border:solid 10px blue;//不用区分顺序，也可以加 -方向 来设置一条边
外边距：//调整元素和元素之间的间距
margin: 50px;
margin:50px,20px;上下，左右
margin:50px,20px，10px;上，左右，下
margin:50px,20px，10px，100px;上，左,右，下
水平方向上可以用 auto 来居中
注意：如果两个相邻元素都设置了间距，不是累加计算，而是按照大的走
例子：
.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF