CSS3盒子相关样式

一、盒子的类型

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：

                

                

            


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。