一、盒子模型
1.盒子模型：包含有外边距margin 和内边距padding 边框border和内容
盒宽：margin*2+padding*2+border*2+内容宽width; 盒高：margin*2+padding*2+border*2+内容高heigth
2.margin属性的值：
margin-top margin-right margin-bottom margin-left
3.padding属性的值：与margin的用法也一样
可以单条设置，也可以三个一起设置，4个参数对应4条边
3个参数，中间的对应左右两条边
两个参数，第一个对应上下，第二个对应左右
4.border：盒子的边框，处在内边距和外边距的夹层中，他也可以设置粗细，盒子总体体积也会加上它的粗细度
写法可以单挑边的设置粗细，颜色和类型
如：border-left-style:solid;
border-right-color:blue:
berder-top-width:1px;
等，也可以一起设置：
border: 1px solid red;
圆角边框：
border-raduise:30%;
可以设置边框的圆角度，可以填单位px也可以填百分比，假如为50%时将会出现圆形
同样我们设置边框粗细的时候也可以让它变为一个4种颜色的三角形，曾经百度的一道面试题就是怎样画出一个对话框底下的小三角，就是应用border知识来实现
5.display
块级元素（block） <h1> <div>< p>
内联元素（inline） <a >< span> <img> < strong>
display: inline-block;
6.浮动
flaot的使用，使用flaot属性，然后值为left、right关键是清除浮动产生的影响
我们一般可以用浮动来制作导航栏
关于浮动的两栏布局：
先设置一个浮动元素往右移动，然后设置一个块状元素会自动网上填充，然后让这个块状元素让出浮动元素的位子，就成了两栏布局
margin塌陷bug：垂直方向上的父子块两个margin-top是结合在一起的，取两个中最大的值
解决方法：1给父级顶端border加一条线
2：第二种方法触发bfc渲染机制，触发的4中基本方法：
1. position absolute
2.display line-block
3.float left/right
4.overflow : hidden
这两种方法可以解决margin塌陷的bug
同样处在相邻的上下两个块级元素，共用margin-top,下面的元素设置margin-top没有bug：
解决方案，将这两个放入同一个父级元素，并渲染父级元素，或者只将其中一个放如也行
那么我们来说说float如何处理溢出部分的问题，加入我们设置的父盒子的宽高装不下元素的所有部分，导致元素溢出，我们可以通过overfolw:hidden；溢出部分隐藏的方法来解决
浮动溢出
在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。