H5初学者 css盒模型margin padding用法 及网页制作技巧

css盒模型属性：
 
第一节：padding的用法
        1: padding是长在内容和盒子之间的，在盒子内部。
        2：padding是为了调整 子元素 在 父元素里面位置关系。
        3：padding的特点：padding值会把盒子撑大。
        4：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。
        5：给单一方向设置padding值：
            padding-left/right/top/bottom:;
        6: padding 设置方法：
            padding:1个值      四周
            padding:2个值      上下   左右
            padding:3个值      上     左右    下
            padding:4个值      上右下左

        7: padding不能设置负值
        8: padding不会对背景图造成影响。
        9：如果一个盒子没有设置固定的宽和高，添加padding是不用减的。

第二节：margin
        1: margin长在元素之外的。
        2: margin控制的是 同级元素 之间的位置关系。
        3: margin不会对盒子本身的宽高造成影响。
        4: 给单一方向添加margin值
            margin-left/right/bottom/top:;

        5: margin的设置方法：
            margin:1个值      四周
            margin:2个值      上下   左右
            margin:3个值      上     左右    下
            margin:4个值      上右下左

        6: margin可以设置负值。
        7: margin常出现的BUG:
            a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top  会错误的把margin-top加在父元素上面。
            b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。
             c:左右相邻两个元素之间的margin值，可以叠加。

        8: margin:0 auto;  让当前元素在父元素里面左右居中。

  第三节：计算盒子在网页中真正所占据的空间。

        占有的宽度：width + padding-left/right + border-left/right + margin-left/right

        占有的高度：height+ padding-top/bottom + border-top/bottom + margin-top/bottom

第四节：网页练习
      
        元素命名：
            id划分外围结构  ->  id选用驼峰式命名法 || 语义化news/case。
            版心的命名      ->  连字符命名法    news-wrap
            内部内容块的命名 ->  下划线       news_left  /  news_right

        css外部样式表：
            1：每个页面都需要属于自己的样式表。
            2：一个网站，都拥有公共样式表。
            3：重置样式的样式表。（清除所有默认样式）

    注：如果版心两侧没有颜色平铺，可以直接写版心区域。

         重置样式表内容
    1.把所有标签默认的magin padding 清楚
    2.body部分设置字体样式：微软雅黑 字体大小：16px
    3.列表符号样式清除
    4.b strong 标签的加粗清除
    5. em i 标签的倾斜清除
    6.u a 标签的下划线清除
    7.h1-h6默认的加粗 字号大小清除
    8.input标签聚焦时蓝色边框清除
    注：单行文本上下的误差 通过line-height等于文本字体大小做清除