盒子模型
CSS中将每一个元素都设置为了一个矩形的盒子,是为了方便页面的布局。（一切皆为框）
基本构成：内容区，内边距，边框，外边距
布局特点
pc端：会为网页设置一个默认宽度，倾向像素单位（px）
移动端：基于视口作为网页宽度，更倾向使用相对单位（% , rem，vh, wh 等）
border
指定了四个值：四个值会分别设置给 上 右 下 左，按照顺时针的方向设置
指定三个值：三个值会分别设置给 上 左右 下
指定两个值：两个值会分别设置给 上下 左右
指定一个值：四边全都是该值
border-width
边框宽度
border-color
边框颜色，
transparent透明边框
border-style
设置边框的样式
可选值：
-
none默认值，没有边框 -
solid实线 -
dotted点状边框 -
dashed虚线 -
double双线
border
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色,而且没有任何的顺序要求
border-top/border-right /border-bottom /border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
border-spacing
在table中设置单元格间距
table{
width: 500px;
margin: 0 auto;
/设置边框/
/border: 1px black solid;/
/*
border-spacing可以用来设置表格边框之间的距离
* */
/*border-spacing: 100px;*/
/*
border-collapse可以用来设置表格的边框合并
当设置border-collapse以后border-spacing自动失效
* */
border-collapse: collapse;
}
border-collapse
当设置border-collapse以后border-spacing自动失效
在table中设置单元格合并
border-image
使用图片边框，必须为元素设置边框宽度和样式
使用图片作为元素的边框。浏览器支持较好，但商业网站应用很少，主要用在个人博客中。
border-image-source
border-image-source: url("img/border.png");
border-image-slice
图像边界向内偏移
此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。
切割图片的顺序 上，右，下，左，数字表示基于图片边框的切割位置
fill默认四个角填充这个图片-
n设置图片切割数值，然后把切割好的图片设置给每个边角当上切割和下切割有重叠或者是错位只会显示上下边框的边框图片（左右切割线同理）
当上下或者是左右切割线没有重叠或者错位是 每个边都或有图边框图片
百分比
border-image-slice: 52 26 26 26;
border-image-slice: fill;
border-image-slice: 26;
border-image-repeat
参数：
-
stretch默认值,四个边个图片被拉伸 -
round填满,四个边的图片重复平铺 ，确保图片完整性。 -
repeat重复,四个边的图片重复平铺
border-image-width
设置图片边框的宽度 --- 不会改变元素大小
与border-width设置效果相同，但是不会导致元素的实际大小改变。（会往里面挤内容区）
border-image-width: 20px;
border-image-outset
向元素外显示图片边框
图片外边框的位置，只能为整数，位移不会改变盒子的大小。
border-image-outset: 50px 30px;
border-image
简写
简写方式：
border-image: <border-image-source>
||<border-image-slice> [/<border-image-width>
|| <border-image-repeat>]
border-radius
设置边框圆角效果。浏览器支持较好，应用非常广泛。
参数：
n设置固定数值-
设置百分比，推荐使用，可以随着元素大小动态调整
border-radius: 50px;
border-radius: 50px 20px;
border-radius: 50px 20px 5px;
border-radius: 50px 20px 5px 80px;/border-radius: 水平半径 / 垂直半径/
border-radius: 200px/100px;
border-radius: 200px 50px/ 100px 5px;
border-radius: 200px 50px 10px / 100px 5px 60px;border-radius: 50%， 如果元素是正方形，显示圆形
box-shadow
让元素显示阴影效果。应用非常广泛，主要用来呈现元素立体效果。
内阴影可以用来实现一些立体效果
参数：
参数1：投影方式 。默认外阴影，inset是内阴影。参数2：X轴偏移量 ，正值，阴影在元素右侧，负值在元素左侧参数3：Y轴偏移量 ，正值，阴影在元素底部，负值在元素顶部。参数4：阴影模糊半径，可选。只能为正值，如果设置为0，阴影不具备模糊效果。参数5：阴影扩展半径。可选。如果取正值，整个阴影都延展扩大，反之取负值，则整个阴影都缩小。-
参数6：阴影颜色，可选box-shadow: inset -30px -30px 100px 0 #000; 可给高度为0的盒子设置一个单纯的阴影效果。 height: 0px; box-shadow: 0 0 20px 1px #333;
解决IE低版本兼容性问题
border-radius：圆角
box-shadow：阴影
border-image：图片边框
引入外部文件
第一步：下载PIE.js项目压缩文档
第二步：解压缩文件。把PIE引入
<!--[if lte IE 8]>
<script type="text/javascript" src="../PIE/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="../PIE/PIE_IE9.js"></script>
<![endif]-->
<style type="text/css">
.box {
box-shadow: 0 0 50px 0 red;
/*引入htc文件，让IE678支持圆角特性*/
behavior: url("plugin/PIE.htc");
}
</style>
第三步：编写CSS3样式
第四步：behavior: url(path/to/pie_files/PIE.htc);
第五步：在IE下查看
outline
元素轮廓
外轮廓不会改变元素盒子大小
语法 [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
outline-color
外轮廓颜色
outline-style
外轮廓样式
可选值：
-
none默认。定义无轮廓。 -
dotted定义点状的轮廓。 -
dashed定义虚线轮廓。 -
solid定义实线轮廓。 -
double定义双线轮廓。双线的宽度等同于 outline-width 的值。 -
groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 -
ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 -
inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。 -
outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。 -
inherit规定应该从父元素继承轮廓样式的设置。
outline-width
外轮廓宽度
outline-offset:
外轮廓偏移量，不会导致盒子大小改变。
resize
设置用户可调整盒子大小属性
注意事项：resize 必须搭配 overflow: auto;
可选参数：
-
none用户不能调整元素宽高。 -
both用户可以调整元素宽高。 -
horizontal用户只能调整元素宽度 -
vertical用户只能调整元素高度 -
inherit默认继承
padding
内边距
margin
外边距
- margin还可以设置为auto，auto一般只设置给水平方向的margin
- 水平方向外边距如果设置为auto，则外边距设置为最大值
- 垂直方向外边距如果设置为auto，则外边距默认就是0
垂直外边距重叠
- 在网页中相邻的垂直方向的外边距会发生外边距的重叠
- 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
- 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
设置负外边距
使用负外边会产生一个元素“悬浮”在另一个元素上面的效果。
注意：被覆盖的元素文本内容不会被覆盖！
使用场景：左侧自适应，右侧固定宽度布局效果为浮动元素（.box）设置右侧外边距为负右侧外边距绝对值等于紧邻兄弟元素的宽度为紧邻兄弟元素设置左浮动
计算函数
width: calc(200px - 1px);
width: calc(200px + 100px);
width: calc(200px / 2);
内联元素盒子模型
padding支持水平方向的内边距，垂直也支持但是垂直内边距不影响布局border支持四个方向边框，但是垂直边框不影响布局margin支持水平，不支持垂直放方向
