CSS盒子模型

什么是盒子模型：

模型是一个及其通用的描述，是一种以矩形对象的布局的方法，这些矩形对象称为盒子。

盒子的组成：

一个盒子由外到内可以分成四个部分：margin(外边距）、border(边框）、padding(内边距）、content（内容）、margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分，而content则是HTML元素的内容。

盒子的大小：

盒子的大小指的是盒子的宽度和高度。盒子的宽度和高度并不是width和height属性，width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按如下计算：
盒子的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距
盒子的高度=内容高度+上填充+下填充+上边框+下边框+上边距+下边距
用带属性的公式表示：

盒子的宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right

盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom

盒子的样式：

要为一个元素设置边框必须指定三个样式：
border-width：边框的宽度
border-color：边框的颜色
border-style：边框样式
使用border-width可以分别指定四个边框的宽度：
如果border-width指定四个值：则四个值分别指定给上右下左 按顺时针方向设置。
如果是三个值，则分别设置给上、左右、下。
如果是两个值，则分别设置给上下、左右。
如果是一个值，则四边全是该值。
边框的颜色、样式依次同上面情况。
除了border-width CSS中还提供了四个border-XXX-width XXX的值可以是：top、right、bottom、left专门用来设置指定的宽度。设置边框的颜色和宽度一样，color也提供四个方向的样式来分别指定颜色。

设置边框的样式：

可选值：
none 默认值 没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线

style也可以分别指定四个边的边框样式，同时也提供border-XXX-style四个样式，分别来设置四个边。

圆角：可以使盒子的样式更加好看

圆角由属性border-radius进行控制，这是一个简写属性，像margin、padding等一样，可以有一个、两个、三个或四个值进行设置，同样也可以对盒子的每一个角的半径进行单独设置。

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-right-radius：右下角

边界半径可以使用px、em等长度单位，也可以使用百分数。

border-radius值的个数以及每个值对应控制的位置：
一个值：设置四个角相同的边界半径
两个值：第一个值设置左上角和右下角，第二个值设置右上角和左下角
三个值：第一个值设置左上角，第二个值设置右上角和左下角，第三个值设置右下角
四个值：第一个值设置左上角，第二个值设置右上角，第三个值设置右下角，第四个值设置左下角

内联元素不能设置width和height，设置没效果。
内联元素可以设置水平方向的内边距，也可以设置垂直方向的内边距，但是不会影响页面的布局，内联元素可以设置边框，但是垂直边框不会影响布局，内联元素支持水平方向的外边框，水平方向相邻的外边框不会重叠而是求和。内联元素不支持垂直外边距。

将一个内联元素变成块元素

通过display样式可以修改元素类型样式

可选值：
inline：可以将一个元素作为内联元素显示
block：可以将一个元素设置成块元素显示
inline-block：将一个元素转换成行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none：不显示元素，并且元素不会在页面中继续占用位置
visibility：可以用来设置元素的隐藏和显示状态
可选值：
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏显示
使用visibility：hidden；隐藏的元素虽然不会在页面中显示，但是他的位置会依然保持。