一、盒子的类型
1. inline-block
display：inline-block
当需要元素在一行内显示，有需要能给元素设定宽和高就需要inline-block元素。inline元素的长宽无法设定，只能随着内容大小而变化，block元素除非设定css样式，否则不能在一行内显示。
inline/block元素
inline-block
2.list-item
display：list-item
通过list-item可以把多个元素作为列表显示，也可以这是列表样式
.div2{
display: list-item;
list-style: circle;
}
多个div
list-item
二、对盒子容纳不下的内容的显示
overflow：visible / hidden / scroll /
auto / inherit
三、对盒子使用阴影
box-shadow：10px 10px 10px grey
可以通过box-shadow对盒子设置阴影，包含四个参数，
第一个参数为横向上阴影到盒子的距离，
第二的参数为纵向上阴影到盒子的距离，
第三个参数是阴影的模糊程度，
第四个参数是阴影的颜色。
四、指定针对元素的宽度和高度的计算方法
box-sizing:border-box / content-box / inherit
| 值 | 描述 |
|---|---|
| content-box | 宽度和高度不被包括在整个盒子区域当中 |
| border-box | 当前盒子是包含设置的盒子内外边距的 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
HTML：
<div>
<div className="div3"></div>
<div className="div4"></div>
</div>
css：
.div3{
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
background-color: #7ef1d3;
}
.div4{
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 10px;
background-color: #9685BA;
}
同样的width和height，由于box-sizing的不同，最后实际呈现出来的大小也不一样，div4呈现出来的width和height其实是120px。
