CSS——盒模型与浮动

一. 盒模型

1.网页中的每一个标签都可以看做为盒模型，每个盒子都是有内容，内外边距和边框组成。

2.属性：

        ① width：数字+px; 盒子的宽

        ② height：数字+px;  盒子的高

        ③ border：线型；  盒子边框

        取值：solid 实线，dashed 虚线，dotted 点线。

        其他写法：border-left/right/top/bottom  单方向设置边框

        ④ padding: 数字+px;  内边距

        ⑤ margin: 数字+px;   外边距

*注意：内外边距的四个值，顺序为上有下左，如果没有赋值，那就取对面的值。

---

二.外边距塌陷问题

1.  垂直布局的块级元素，上下相邻的margin值不叠加，只取两个值中最大的那个值。

2.塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素也往下移

    解决方法：

        ①  给父元素设置 border-top或padding-top，分隔子元素的margin-top

        ②  给父元素设置overflow：hidden；

        ③  转为行内块元素

        ④  设置浮动

3. 行内元素垂直方向上的margin和padding设置无效

    解决方案：设置行间距  line-height：；

---

三. 浮动

1. 浮动的作用： 前期浮动时实现图文环绕效果的，现在用于页面布局。

2. 属性和值 ：

        float：left；左浮动

        float：right；右浮动

3.浮动的特点：

        ① 脱离标准流，覆盖在标准流的上面；

        ② 浮动找浮动，两个盒子一起浮动，参考对象为上一个浮动的盒子；

        ③ 一行可以设置多个盒子，可设置宽高。

4.浮动的影响：如果父盒子不设置宽高，那么浮动的子盒子将撑不起来父盒子。