CSS的浮动属性和盒子模型

      一，css浮动属性

            1，浮动

                   float:left             元素靠左边浮动

                   float:right           元素靠右边浮动

                   float:none          元素不浮动

                     浮动的作用

                    （1）定义网页中其他文本如何环绕该元素显示

                    （2） 让竖着的东西横着来

                               例如： 

                                                                                                                     

 注：当一个元素不再在文档流中占据空间，而是漂浮在文档流的上方的时候叫做脱离文档流

        （1）、浮动会脱离网页文档，与其他不浮动的元素发生重叠

        （2）、但是不会与文字发生重叠，文字会环绕浮动元素显示

2，css的清除浮动

     clear

       clear：none；         允许有浮动对象

       clear：right；          不允许右边有浮动对象

       clear：left；            不允许左边有浮动对象

       clear：both；          不允许有浮动对象

    注：清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

二，css的盒子模型

     1盒子模型的组成

              盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

     例如：

                   

2，padding属性

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

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

用法：

1）用来调整内容在容器中的位置关系

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

           属性值的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,在元素外边的空白区域，被称为边距。

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

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

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

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

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

   

           margin相关问题以及解决方法：

                 1、margin-top的解析

                      现象：默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。

                      解决方法：A、给最近的父元素添加border-top

                                        B、给父元素添加overflow:hidden;（溢出隐藏)

 4，border属性

           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