元素分类浮动border，margin，padding，盒子模型，标准盒子和怪异盒子

1.元素的分类 块级元素：独占整行，可以设置宽高block：p,ul.li.h1-h6.div.form.table. 行级元素：有多宽占多宽，不可以设宽高inline:i.b.span.a 行内块元素： 有多宽占多宽，可以设宽高。inline-block【img input button 】 display可改变元素类型 盒子模型：当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border

2.浮动 语法： float:left 或者 right;

作用：1.让元素横着排列，实现一行多列效果
      2.设置文字环绕方式

注意：浮动会让元素脱离文档流

3.盒子模型 概念：是一种思维模型，宽高+内边距+外边距+边框，主要用于页面布局。 1.尺寸 设置宽度： width: *px 或者 *%; 设置高度： height:*px 或者 *%;

2.内边距:内容和盒子边缘之间的间隔
    设置指定方向的内边距   【padding-方向：*px;】
        padding-top:上方向
        padding-bottom:下方向
        padding-left:左方向
        padding-right:右方向
    一次性设置多个方向：  padding:*px;  
        值可以是1-4个：从上方向出发，顺时针对应，有缺省取对边。
    
    注意：内边距会撑大盒子。

3.外边距：盒子a与盒子b之间的间隔
    设置指定方向的外边距  margin-方向：*px;
    一次性设置多个方向：  margin：*px;  对应规则同padding

4.边框
    设置单个方向的边框   border-方向：*px solid 颜色;
    设置4个方向的边框    border：*px solid 颜色;

    solid实线  dashed虚线

盒子模型相关的细节说明：
    1.给所有元素清除内外边距
        *{
            margin:0;
            padding:0;
        }
    
    2.可内可外，优先内。
    3. 盒子水平居中，使用margin：0 auto;



       

400*100 grey色的背景色
上下左右的内边距分别为10 20 30 40






浮动
    1.语法：
        float:left | right | none;
    2.作用：
        1.让元素横着排列，实现一行多列效果
        2.实现文字环绕
    3.注意：浮动会让元素脱离文档流。
盒子模型
    概念：是一种思维模型，主要用于实现布局
    组成： 宽高+内边距+外边距+边框

    1.宽高
        宽度 width:*px; | *%;
        高度 height:*px | *%;

        方向的英文： top   bottom left  right
    
    2.内边距：padding
        单个 :  padding-方向：*px;
        复合：  padding:*px ; 
    3.外边距: margin
            单个 :  margin-方向：*px;
            复合：  margin:*px ; 
    4.边框:border
        单个： border-方向：粗细 solid 颜色；
        复合： border：粗细 solid 颜色；
    
    应用：
        1.去除元素默认的内外边距
            *{
                margin:0;
                padding:0;
            }
        2.盒子水平居中，使用margin：0  auto;
        3.可内可外，优先内。