css007 margin padding border
1、理解盒模型（盒模型：就是把一些东西，包括html各种标签都包含在一个
看不见的盒子里）
1/在web浏览器中任何标签都是一个盒子，内容的周围环绕着装饰盒子的不同属性
Pad ding：内容和其框线之间的距离
Margin：一个标签和另一个标签之间的距离
Border：盒子周边的直线
Background-color：填充边框内部空间的间隔
2、用margin和padding控制空间 （margin控制盒子外部和其他元素之间的空间；
padding控制盒子里面内容到盒子的距离，在一般浏览器都会有默认的行距或者各种缩进距离。一般要用margin和padding清零。Margin和padding后面可以跟1到4个值，如果是两个值的话，分别代表上下 和 左右。一般的顺序是：上右下左（顺序一定不能搞乱了）。可以指定方向，比如margin-top）
1、margin和padding都是在内容的周围添加空间。
2、边距冲突：当margin-bottom 遇到（冲突）下面一个元素的margin-top时，浏览器是应用他们之间比较大的那个（只应用一个，不是两个相加）
3、可以用margin的负值消除不必要的空隙（margin是比较少数可以用负值的一个css属性。Padding一定要用正值）
4、行内盒子，块级盒子及其其他显示设置：css有两种不同的盒子：块级盒子（block box） 行内盒子（inline box）
5、Display属性可以改变盒子的属性：display：block/inline/inline-block;
3、添加边框（border属性。例如：border：1px solid #fff；代表画一个1像素，
颜色为黑色的边框。Border的上下左右和margin、padding用法一样在实践1中的吧PDF转变成html中有多处用到border来代替<div>标签，这样可以省掉一些代码开销和时间开销。比如友情链接的绿色边框线的叠加。页脚浅绿色图层的叠加）
1、Border 属性的块级设置方法：border：1px solid #fff；
2、单独格式化各条边框：例如：border-top：1px solid red；
3、可以用none隐藏某一条边框：如
border：1px solid red；
border-top：none； （两条代码代表画一个没有顶的边框）
4、还可以对每条边框定义颜色，宽度，样式：（可以对一个盒子设置两条下边框吗？有没有办法让后面设置的css样式不覆盖前面设置的样式？？）
如：border-width：20px；
border-style：double；
border-color：red；
可以对边框设置不同的颜色：如
border：2px dashed
border-color：red yellow blue black；
4、设置背景色（background-color）
background-color：red；/#f00; /rgb(255,0,0);
5、创建圆角（单词忘了怎么写了。。）
Border-radius:20px;(后面跟的值如果是四个代表的位置（从左上顺时针）)
6、添加阴影（text-shadow，上一个章节刚刚学到的，例如：
text-shadow：5px 9px 2px #fff；其中第一个值代表水平方向：正值在右。第二个值代表垂直方向，正值在下 。第三个值代表模糊度，值越大越模糊，第四个值 代表颜色。）（问题：第三个值可以是负的吗？）
（上一节是文本的，这一节是盒子的）
border-shadow后面跟的值和上一节中的text-shadow用法一样
有两个可选的值：inset （嵌入式阴影） spead（外部阴影）
border：inset 3px 4px 5px red;
7、确定高度和宽度 （height 和 width 不是继承的属性，但是后面的值可以填上inherit 代表继承父类的宽高。一般border的使用都会配合宽高，这样才能画出一个正常的 形状出来）
1、box-sizing属性跳帧盒子的宽度
box-sizing：content-box；/padding-box;/border-box;
2、用overflow属性控制溢出文本
Overflow：visible；/scroll;/auto;/hidden;
3、宽度的最小化和最大化
max-width
max-height
min-width
min-width
8、用浮动元素包围内容（float：left/right; 浮动是的样式更加多样，在浮动后
记得清除浮动，不然会影响接下来的html内容，啥问题都会出现，可怕了，实践1的那个pdf转化为html中，就是没有清楚浮动，一堆问题调了好久。清除浮动：可以 在浮动结束后写：overfloat：hidden；也可以在接下来的内容中写:clear:left/right/both;）
1、背景和边框是不能浮动的。。。
2、clear：none；完全关闭清楚属性
注：蓝色为看目录是自己根据之前知识表达出来的，黑色为看书后补充或者修改。红色为看完该知识点后产生的问题。