H5基础-5

一、浮动：是一种布局属性，主要用于实现一行多列效果

        语法：float:left丨right丨none;

        作用：1.让元素靠在父元素的左边/右边（实现一行多列效果）

                   2.实现图文环绕效果

        注：浮动会让元素脱离文档流

二、盒子模型

        概念：是一种思维模型，主要用于实现页面布局效果。由尺寸、内外边距、边框组成

        1.尺寸

                width: *px丨*%;---设置宽度

                height: *px丨*%---设置高度

        如果设置%，代表的是其父元素的宽度或者高度的百分比

        2.边框

                border:边框的粗度 边框的线型 边框的颜色；

                线型：solid---实线 dashed---虚线

                border-方向的英文：*px solid 颜色；

3.内边距：盒子边框和它的内容之间的间隔

                padding:*px;

        说明：padding的值可以是1-4个，用空格隔开,对应规则是上右下左，如果有缺省，取对边

                padding-方向的英文：*px;

        注：padding会撑大盒子，如果有设置指定宽高，记得修改

4.外边距：盒子边框和他之外的元素之间的间隔

                margin:*px;

        属性值可以是1-4个，对应规则同padding

                margin-方向的英文：*px;

        注：单个和复合一起使用时，复合在前，单个在后

5.小结

        A.外边距的粘连问题（父随子动）

        解决方法：

                a.用内边距实现（记得修改高度）

                b.给父元素添加透明色的上边框（透明色：transparent）

                c.给父元素设置overflow:hidden;

        B.外边距的塌陷问题(兄弟元素)

        解决方案：给其中一个兄弟设置足够的间隔

        C.清除元素默认的内外边距的差异

        解决方案：

                *{margin:0; padding:0;}

        D.盒子在水平方向上自动居中：margin:0 auto;