开头
今天我们来谈一谈盒子模型。之前一直没有涉及这个话题是因为我自己认为盒子模型一直是不太好说的，就是可以理解，但拿出来与大家讨论说的话感觉是有一些困难的，但是，今天还是决定来探讨一下，毕竟这算是CSS中一个重要的模块知识。
认识盒子模型
盒子模型（Box Model），这个名字就可以看出，顾名思义嘛，像个盒子一样的模型。盒子模型它很重要。HTML中的每一个元素都可以看作是一个盒子，可以具备这四个属性：内容（content）--元素的内容width/height；内边距（padding）--元素和内容之间的间距；边框（border）--元素自己的边框；外边距（margin）--元素和其它元素之间的间距。盒子模型的四边：因为盒子有四边，所以margin/padding/border都包括top/right/bottom/left四个边。
盒子模型属性
盒子模型会涉及到那些常见的属性呢？下面来简单介绍一下：
内容width/height
设置内容的时候是通过宽度和高度来设置的，但是需要注意的是：对于行内级非替换元素来说，设置宽高是无效的！
内边距padding
padding属性用于设置盒子的内边距，通常用于设置边框和内容之间的间距；padding包括四个方向： padding-top：上内边距；padding-right：右内边距；padding-bottom：下内边距；padding-left：左内边距；然后padding单独编写是一个缩写属性，顺序是padding-top、padding-right、padding-bottom、padding-left用空格隔开。
边框/圆角border
border用于设置盒子的边框；边框相对于content/padding/margin来说特殊一些：边框具备宽度width；边框也具备样式style；边框还具备颜色color；可设为四个边的简写属性border-width、border-color、border-style；当然，还有一个总缩写为：border： 10px solid red；（其中顺序可以换，但是solid不可以省！）还有个常见的属性border-radius，CSS属性border-radius允许来设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
外边距margin
margin属性用于设置盒子的外边距，通常用于元素和元素之间的间距；同样margin包括四个方向：margin-top：上外边距；margin-right：右外边距； margin-bottom：下外边距；margin-left：左外边距。margin单独编写是他们的缩写属性。需注意：margin上下有折叠，而左右没有。
盒子和文字阴影
盒子阴影——box-shadow，而文字阴影——text-shadow。具体的效果大家可以上网上寻找一下样例，这里我就不过多叙述了。
box-sizing
CSS中的box-sizing属性定义了应该如何计算一个元素的总宽度和总高度。其中content-box是默认值。而border-box告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。注意：border-box不包含margin。
结尾
今天的盒子模型探讨就到这里啦！
