4、盒模型及分栏

一、盒的类型
1、盒的基本类型
在CSS中，使用display属性来定义盒的类型。总体上来说，CSS中的盒分为block类型与inline类型

block类型：这种盒模型的组件默认占据一行，允许通过CSS设置高度、宽度、如div、<p>
inline类型：这种盒模型的组件不会占据一行，即使通过CSS设置高度、宽度，也不会起作用，如span、a元素。

注：可以使用display来切换盒模型，它了支持inline和block两种基本盒模型之外，还可以通过指定display为none来隐藏HTML
元素，也可以指定inline-block inline-table list-itm run-in等盒模型。
主要用来：控制多栏布局，使用clear属性强制换行。

inline-block 类型全属于block类型盒的一种（可以设置宽高），但在显示时，它具有inline类型盒的特点（不独占一行）。
同时inline-table（用于table）

注：当显示为inline-block的多个div同属于一个div时，内部的每一个显示为inline-block的div还是会独占一行。

2、为盒设置阴影和倒影
box-shadow :len len [len] [len] color
阴影水平偏移值，可以为负值
垂直偏移值，可以为负值
对象阴影模糊值，不可为负
对象的阴影外延值，不可为负

box-reflect: none| direction offset ? mask-box-image
无倒影
倒影的位置
指定倒影的偏移量
指定遮罩图像