盒模型
.box{
/*
width\height 默认规定内容区域大小
内容区域放置文字或子标签
max-width : 800px;最大宽度是800px（0-800），会随设备增大而增大，但最大800px。
min-width : 800px;最小宽度是800px（800-无限大），会随设备缩小而缩小，但最小800px。
max-height: 300px;最大高度是300px（0-300），会随内容（文字或子标签）增大而增大，但最大300px。
min-height: 800px;最小高度是300px（300-无限大），会随内容（文字或子标签）缩小而缩小，但最小300px。
*/
width: 200px;
height: 200px;
background-color: violet;
/*
padding 内边距
内边距规定内容到边框的距离
一个值：四个边内编辑
两个值：上下，左右
三个值：上，左右，下
四个值：上，右，下，左（顺时针）
*/
padding: 20px 30px 40px 50px;
}
/*
边框
边框宽度 border-width
边框样式 border-style
solid 实线
dashed 虚线
double 双线
dotted 点状线
边框颜色 border-color
*/
/*
box-shadow 可以设置多个阴影
1、水平位置 必需
2、垂直位置 必需
3、模糊距离
4、阴影尺寸
5、阴影的颜色 默认黑色
6、阴影的内外部 默认外部 内部inset
*/
box-shadow: -1px -1px 5px white,1px 1px 5px black;
.box{
width: 200px;
height: 200px;
background-color: red;
/*
resize 调整盒子大小 必须配合overflw属性使用，不为默认的visible
none 默认
horizontal 可以调整宽度
vertical 可以调整高度
both 宽高都可以调整
*/
resize: both;
overflow: hidden;
}
.box{
/* 默认情况宽高指的是内容区域 */
width: 200px;
height: 200px;
background-color: blue;
/*
content-box 内容区域
border-box 内容，内边距，边框总和
*/
box-sizing: border-box;
}
/*
外边距塌陷问题
解决：
1、给父标签加边框或内边距
2、给父标签加溢出隐藏（overflow:hidden;）
*/
盒子隐藏：
display：none；不占位置
visibility：hidden；占用位置