CSS的浮动属性，盒子

1.浮动总结

    1）什么是浮动：漂浮在页面的某个位置【有固定的位置】

    2）浮动的语法：float：left/right/none 

    3) 浮动的作用：页面排版【让竖着排列的元素可以水平排列】

    4）特点总结：

       a:会让元素脱离标准文档流【正常显示的样式】

       b:宽度不会再继承父元素的宽度了

       c:浮动属于半脱离：只能遮盖背景，不遮盖内容【文字，。。。。】

       d:浮动的参照物为父元素

2.盒子

    1）内容区：设置的宽度和高度就是内容区

     2）边框：border：border-width border-style border-color;

       border-width:4/3/2/1/0[从上面开始，沿顺时针方向取值，当值不够时，执行对面的值，当对面也没有时，它会执行最上面的值]

       当不设置border-width的时候默认为1px【有border-style的时候】

    3）border-style:solid;dotted;dashed[参照border-width]【如果想要有 边框的话必须要设置border-style!!!!!!】

    4) border-color【没有border-color 默认为黑色】

    5）border-方位-style

3.padding,margin使用

   1）padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。

填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。

用法：

     a.用来调整内容在容器中的位置关系

     b.padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

   2)属性值的4种方式：

     四个值：上 右 下 左 {padding:0px 0px 0px 40px;}

     三个值：上 左右 下 {padding:10px 20px 30px ;}

     二个值：上下 左右 {padding:10px 20px ;}

     一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/

说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;

 3) margin的使用方法

边界：margin,在元素外边的空白区域，被称为边距。

margin-left:左边界      margin-right:右边界  margin-top:上边界    margin-bottom:下边界

属性值的4种方式：margin可以给负数

四个值：上 右 下 左      三个值：上 左右 下     二个值：上下 左右

一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/

margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。*/

4.边框

border:边框宽度 边框风格 边框颜色;

边框宽度：border-width:

边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)

  简写：border：30px solid blue; 参数的顺序可以随意调换

单边框设置：上边框  border-top：30px blue solid;  下 border-bottom 左  border-left 右 border-right