Day9

1·margin（和相邻元素的距离）

    margin有四个值依次从现、按顺时针方向分别为 上 右 下 左

    特点：（1）垂直方向相邻元素上下边距只取最大值

         （2）在子元素中添加垂直方向的距离时，需给父元素添加overflow：hidden属性

    margin写一个值时候为上下左右的值；  两个 上下  左右值； 三个 上 左右 下；四个 上 下 左 右

2·盒子模型

   border本身是一个复合样式包含：边框的宽度；颜色；样式。

   border-top/bottom/left/right   上 下 左 右边框 

   border会增大元素的内容空间

   padding文本内容和元素的距离四个值按顺时针方向依次为上 右 下 左

   div在浏览器中居中只需添加属性  margin：0 auto；即可

   div在比他更大的div里居中需要在小div中设定相应的margin值

 （1）列表浮动float：left；

  （2）盒子

   盒子阴影：box-shadow 10px 10px 10px 10px red 

           5个值依次为x轴方向的偏移  y轴方向的偏移 模糊距离 模糊范围 阴影的颜色

   （3）标准流

    <1>块级元素从上往下依次显示，宽度和容器等宽；

    <2>行级元素从左往右排，宽度不够才换行；

3·浮动入门

1·浮动盒子的宽度不会自动伸张展，宽度以内容的margin·padding属性为准
2·标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受到浮动盒子的宽度影响
3·可以设置clear属性使标准流中其他盒子不受之前盒子的影响<#/.id/class/:after{ clear:both}>
    4·父级盒子中所有盒子都采用浮动形式，若父级盒子不未指定高度则父级盒子的高度为0，
因为所有盒子都是浮动已脱离标准流。解决办法增加一个标准流盒子

清除浮动带来的影响的办法：
        1·在含有浮动的元素后面，添加一个无关的元素，让添加的无关元素去清除浮动--clear：both
            缺点：添加里一个无关元素，代码阅读手影响
        2·只需在含有浮动的父元素里添加overflow：hidden
            缺点：一旦包含非浮动元素，也=页面显示不正常
        3·通过伪类来实现   在需要清除浮动的父元素里   添加一个清除浮动的伪类

                            content：""

                            display:block;

                            clear;both;