盒模型＋页面布局

盒模型

            margin  外边距
                            
                          1  margin 在元素的外面 
                          2  margin 控制同级元素之间的间距
                          3  margin 如果父元素包裹着子元素 给子元素 一个margin-top  父元素也会跟着下来  （高度塌陷）
                          4  margin 上下间距取最大值 比如 一个子元素margin-bottom：100px；另一个子元素margin-top:50; 但是他们两个之间的距离是100px. 左右不会出现
                          5  margin left/right/top/bottom
                          6  margin   一个值  四周
                                      两个值  上下  左右
                                      三个值  上 左右  下
                                      四个值  上右下左
                          7  margin：0 auto; 可以水平居中

加粗样式 8 margin 不会改变元素的大小
9 margin 可以为负值

          padding  内填充

                          1 padding  在元素的里面
                          2 padding  控制子元素在父元素之间的间距
                          3 padding  加上padding值 需要在原有的宽高上减去padding值
                          4 padding  left/right/top/bottom
                          5 padding   一个值   四周
                                      两个值   上下  左右
                                      三个值   上   左右   下 
                                      四个值    上右下左 
                          6 padding 和背景图没有冲突
                          7 padding  不能设置负值
                          8 如果盒子没有固定的宽高  添加padding是不用减的

页面布局

页面布局的思路

首先

 当我们拿到一个网页 ，我们应该寻找这个页面的版心在哪里 ， 从而确定内容。
规划:
    元素命名：
        id划分外围结构  ->  id选用驼峰式命名法 || 语义化news/case。
        版心的命名      ->  连字符命名法    news-wrap
        内部内容块的命名 ->  下划线       news_left  /  news_right

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

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

其次

 我们应该对页面有一个整体的思路 创建当前页面的样式表，公共区域的页面表，最重要的是重置页面表。
 这是我们规划页面的不可或缺的部分。
 
 我们在敲写代码的时候 可以把相同样式的代码 通过群组选择器进行一个合并 这样不仅可以减少代码量 还有利于
 以后的修改 代码也相对整洁

最后

    我们应该培养整体性的思维 对待一个页面 应该做到心里有数 脑子有路 这样才能更快、更好
    的完成一个页面布局。