盒模型（盒子边框，内边距，外边距，清楚元素的默认内外边距，嵌套块元素垂直外边距的合并，content宽度和高度，盒子阴影，css3盒模型）

css'是三个大模块：盒子模型 浮动 定位 其余的都是细节  要求学的非常精通
             将html看成一个矩形的盒子，每个矩形都由元素的内容 内边距 边框和外边距组成

看透网页布局的本质：
             如何把里面的文字  图片 按照ui给的图片用块嵌套起来

盒子边框：border-style：solid（实线）dashed（虚线）dotted（点线）double（双实线）none（不显示边框，默认值）

表格的细线边框

内边距：
           padding属性用于设置内边距 是指边框与内容之间的距离
           padding-top 上内边距left左right右bottom下

外边距：
           margin属性用于设置外边框 设置外边距会在元素之间留有空白
           margin-top（left，right，bottom）

外边距实现盒子居中（margin：auto）：
           必须是块级元素
           盒子必须指定了宽度

清楚元素的默认内外边距：
           * {padding: 0; /*清除内外边距*/
               margin: 0; /*清除外边距*/}

嵌套块元素垂直外边距的合并：
           overflow：hidden

盒子阴影

语法格式 :box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影

content（内容）：
           Element（元素）空间高度=content height+padding+boder
           空间宽度跟上一样的原理

css3盒模型：
           content-box（正常盒子）
           border-box（弹性盒子，怪异盒子）
（列如：.q {
                    box-sizing: border-box;
                    width: 600px;
                    height: 600px;
                    background-color: aqua;
                    padding: 200px 100px;
                   }
              .w {
                    width: 200px;
                    height: 200px;
                    background-color: red;
                 }）

浮动（float）：浮动最早是用来控制图片 以便到达其他元素(特别是文字)实现"环绕"图片的效果
           css的定位机制：普通流（标准流），浮动流，定位流

     浮动（float）：脱离标准流