盒子模型&浮动

1.盒子模型

1.概念

是一种思维模型，主要用于界面布局。

由尺寸大小+内边距+外边距+边框 组成

2.尺寸

设置宽度

width：*px |*%

设置高度

height:*px |*%

如果是百分比，代表的是父元素的百分比

例：

    <style>
        .wrap{
            /* 设置宽度 */
            width: 400px;
            /* 设置高度 */
            height: 400px;
            /* 设置背景颜色 */
            background: aquamarine;
        }
        .box{
            /* 设置宽度 -父元素宽度的百分比 */
            width: 50%;
            /* 设置高度 */
            height: 50%;
            background: pink;
        }
    </style>

3.边框

border：粗细、线型、颜色；

1.设置四边边框

border：*px  线型 颜色；

2.border—方向（top botton left right）:粗细、线型、颜色；

1.设置上边边框

border-top：*px  线型 颜色；

2.设置下边边框

border-bottom:*px  线型 颜色；

3.设置左边边框

border-left:*px  线型 颜色；

4.设置右边边框

border-right：*px  线型 颜色；

4.内边距（填充）

盒子边框和它里边的内容之间的间隔

1.设置四边的内边距

   padding: *px;

padding内边距的属性值可以是1-4个，多个值用空格隔开。

对应规则是：上出发、顺时针、有缺省，取对边。

paqdding不可以为负值

padding会撑大盒子

2.设置左边的内边距

​

padding-left: *px

3.设置右边的内边距

 padding-right: *px;

4.设置上边的内边距

padding-top: *px;

5.设置下边的内边距

padding-bottom:*px;

注意：padding会撑大盒子哦如果要保持盒子大小不变，记得修改宽/高哦！

5.外边距

盒子边框和之外的元素之间的间隔。

1.设置四边的外边距

margin: *px;

margin内边距的属性值可以是1-4个，多个值用空格隔开。

对应规则是：上出发、顺时针、有缺省，取对边。

margin可以为负值。

2.设置左边的外边距

​

margin-left: *px

3.设置右边的外边距

margin-right: *px;

4.设置上边的外边距

margin-top: *px;

5.设置下边的外边距

margin-bottom:*px;

6.margin的问题

1.粘连问题-父随子动—垂直方向

1.使用padding实现间隔【注意高度哦！】

2.给父元素添加一个透明的上边框

border：1px solid transparent；

3.给父元素设置

overflow：hidden;

[将父元素搞到另一个世界了-所有儿子/父亲搞到另一个世界的方式都可以解决该问题哦]

2.塌陷问题----垂直方向

在一个元素身上设置足够的间隔；

7.细节说明

1.将所有元素的内外边距去掉(初始化)

*{     margin: 0;
       padding: 0;
}    

2.盒子水平居中

margin:0 auto;

盒子垂直居中需要计算，然后用内外边距做

3.注意：行级元素不能设置垂直方向的内外边距和尺寸哦！

2浮动

是一个布局属性，主要用于实现一行多列效果。

语法：

float:left|right|none;

注意：float：left是让元素排列在父元素的左边。

浮动会让元素脱离文档流