CSS盒属性

一、边界：margin（相邻盒子/元素对之间的距离）      

取值：top right bottom left        根据格式规定的方向为四个方向设置边界距离

例：margin：5px 10px 15px 20px;     上边界5px ,右边界10px，下边界15px，左边界20px

       margin:5px 10px;                         上边界5像素，右边界10像素，下边界5像素，左边界10像素

       margin：5px;                                四个方向的边界均为5像素。

*{margin：0；}去掉浏览器周围自带的8px距离。*通配选择器，让页面所有的元素边界均为0。

        例：通栏效果的顶部top栏。

margin:0 auto;块级元素在父元素内部水平居中。

二、填充：padding。

1、取值：padding-top:设置顶部填充的距离。                padding-right：设置右侧填充的距离。

           padding-bottom：设置底部填充的距离。       padding-left：设置左侧填充的距离。

           padding：top right bottom left;    //表示四个方向需要填充的具体数值。

2、加入padding的容器，宽高会被撑大。

        例：

                .box{

                               width:200px; height: 150px;

                               background-color: #3385ff;

                               color:#ffffff;

                              padding:20px;

                        }

box原尺寸为200px*150px，由于添加了padding，所以四个方向均添加了20px的填充大小。导致box的宽度变为200+20+20=240px，高度变为150+20+20=190px。

若仍然希望box的实际尺寸恢复为原始尺寸，则按照下列公式计算width和height属性的取值：

          （1）容器的width属性取值 = 原始宽度 - 左填充 - 右填充。

          （2）容器的height属性取值 = 原始高度 - 上填充 - 下填充。

                即CSS代码变为：

                  .box{

                            width:160px; height:110px;

                            background-color: #3385ff;

                            color:#ffffff;

                            padding:20px;

                        }

3、使用box-sizing属性改变页面的布局模式：

        取值：content-box（默认值）：内容盒。产生的填充和边框均在内容。

                   border-box (边框盒)：边框在内容内。

                                          （当使用padding时最好将box-sizing属性的取值设为border-box。）

4、去掉无序列表为列表项预留的40px距离：例：

        ul{

               list-style-type:none;                //去掉无序列表前的序号

               padding-left:0;                        //去掉无序列表为列表项预留的40像素距离。

           }

三、边框：border

        1、边框粗细：border-top-width设置顶部边框粗细；border-right-width设置右侧边框粗细

                                border-bottom-width设置底部边框粗细；border-left-width设置左侧边框粗细

                                border-width:top right bottom width;(上右下左边框具体数值)

        2、边框颜色：（同上）border-color：top right bottom left;

        3、边框样式：（同上）border-style:top right bottom left;

                                              none没有边框。 solid实现边框        dashed虚线边框

                                              dotted点线边框   double双线边框     groove凹槽边框

                                              ridge脊状边框     inset突出边框         outset凹陷边框

        4、整体设置边框外观：取值格式border：style width color

                                                      例：border：solid 5px #ff5857;

        5、容器的圆角效果：border-radius：设置容器四个圆角的半径，没有涉及到的角度，按照它对角的取值设置圆角半径，如果只设置一个角，则四个角取值相同。

                例：border-radius：10px;

四、浮动属性：float

        功能：设置元素的浮动，解决块级元素无法在一行显示。

        取值：float：left;(左浮动)                         float：right；（右浮动）

       条件：1、 将一个块级元素设置为左浮动，它会带动它下面的块级元素，将这个下面的块级元素拉扯到与本元素同行的位置。但是下面的块级元素将被这个上面的块级元素覆盖。

                2、解决覆盖问题：将被拉扯上去的块级元素同时也设置左浮动。

                3、被拉扯上去的块级元素若不希望与其他块级元素在同一行，如何解决：将被拉扯上去的块级元素设置清除浮动。

     clear清除浮动    1、功能：将元素两侧的浮动拉扯效果清除掉。

                                2、取值：left，清除左浮动。right，清除右浮动。both，同时清除左右浮动。

五、将内联元素转换为块级元素：

    例：a{display:block;                    //将内敛元素a转换为块级元素

        width:150px;height:40px;}   //将转换好的内联元素设置宽度高度（内联元素本身没有宽高）