边框详讲---CSS必备的盒子模型知识！
盒子模型
盒子模型的四个部分：内容区、边框，内边距，外边距；前三者共同决定盒子可见框的大小。
边框
为元素设置边框
.box1{
width:100px;
height:100px;
background-color red;
/*设置盒子内容区宽高及颜色。*/
border-width:10px;
border-color:yellow;
border-style:solid;
/*设置边框，三个样式缺一不可，缺了就直接不显示边框。*/
}
border-width
使用border-width可以分别指定四个边框的宽度。
指定四个值：按顺时针设置；
指定三个值：分别设置给上 左右 下；
指定两个值：分别设置给上下 左右；
指定一个值：四边全为这个值。
border-width:10px 20px 30px 40px;
/*则上边框为10px，右边框为20px，以此类推*。/
//方便起见，此规则自定义为“4321”。
//题外话：如果你也知道3421...hhh
border-color
原理同4321有：
border-color:red blue green;
/*则上边框为红色，左右边框为蓝色，下边框为绿色。*/
border-style
使用border-style来设置边框样式。
可选值： none 默认值，没有边框；
solid 实线；
dotted 点状；
dashed 虚线；
double 双线；
border-style同4321有：
border-style:solid dotted;``
/*上下边框为实线，左右边框为点状。*/
border 边框的简写形式
通过它可设置四个边框的样式、宽度、颜色（顺序无要求）。
boeder:red solid 10px;
/*这对四个边起作用。*/
border-top border-bottom border-right border-left可单独用来设置四边。
border:red solid 10px;
border-top:yellow solid 20px;
/*除了上边框为黄色实线20px，其余三边均为红色实线10px*。/
border:red solid 10px;
border-top:none;
/*常用的去除不要的边的方法。*/
内边距
内边距指盒子的内容区与盒子边框之间的宽度。
内边距会影响可见框的大小；
元素的背景会延伸到内边距；
即如果给元素添加背景，背景会应用于内容和内边距组成的区域。
可通过padding-top padding-bottom padding-right padding-left来单独设置四边之一。
<style type="text/css">
.box1{
width:100px;
height:100px;
}
.box2{
width:100%; /*创建子元素box2来占满父元素box1的内容区，
height:100%； *注意：不占内边距*/
}
</style>
外边距
外边距指当前盒子与其他盒子之间的距离；
不影响可见框的大小，但影响盒子的位置；
有四个方向的外边距：margin-top margin-bottom margin-right margin-left ；
设置上、左边距时，会改变盒子自身的位置；
设置下、右边距时，则会改变其他盒子的位置；
margin可设置auto；
若只指定左/右外边距的margin为auto，
则会将外边距设置为最大值；
若垂直方向设置为auto，则外边距默认为0；
即垂直方向的盒子会紧挨在一起。
常用的使元素自动在父元素中居中的方法：
将left和right同时设置为auto。
margin 外边距的简写形式
同样符合“4321方向规则”
margin: 0 auto;
/*将上下外边距设置为0，将左右外边距设置为auto，即这也是居中的写法。*/
垂直外边距的重叠
在网页中垂直方向的相邻外边距会发生外边距的重叠。
外边距的重叠指的是兄弟元素之间的相邻外边距会取最大值。
假设盒1和盒2为垂直方向的相邻兄弟元素，
a、给盒1设置底面外边距为100px，给盒2设置顶部外边距为100px。
那么两个盒子之间的效果还是100px。
b、把盒1设置底面外边距为100px，盒2的顶部外边距设置为200px，
那么两个盒子之间的距离就变成了200px(取最大值)。
若父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
即给子元素设置上外边距为100px时，子元素和父元素保持相对位置一起下移100px。
解决途径：
法一：给父元素设置上边框，把父子隔开；
法二：把父元素的内边距设置成 “能使子元素下移到你想要位置 ”的数值。
常用去除浏览器默认样式的代码
*{
margin:0;
padding:0;
}
内联元素的盒模型
内联元素不能设置width和height；
能设置水平方向的内边距，也能设置垂直方向的，
但垂直方向的内边距不会影响页面的布局（不会挤掉，而是覆盖）；
能设置边框，水平、垂直效果同“内边距”；
支持水平方向的外边距，不支持垂直方向的。
display
可通过display样式来修改，将一个内联元素转化为块元素。
可选值：inline 将一个元素作为内敛元素显示；
block 将一个元素作为块元素显示；
inline-block 将一个元素转化为内联元素，使其既有内联元素的特点又有块元素的特点；
既可设置宽高，又不会独占一行。【典型：image】
none：不显示元素，且元素在页面中也不会继续占有位置。
visibility
通过visibility来设置元素的隐藏和显示的状态。
可选值：visible 默认值，元素默认在页面显示；
hidden 元素会隐藏，但在页面中继续占有位置（显示空白）。
overflow
父元素默认将溢出内容在父元素外显示。
通过overflow可设置父元素如何处理溢出内容。
可选值：visible 默认值 不对一处内容处理；
hidden 溢出内容会被修剪，即不显示；
scroll 为父元素添加滚动条，通过滚动条可查看完整内容，
该属性不管内容个是否溢出，都会添加水平和垂直方向的滚动条；
auto 会根据需求自动添加滚动条。
