DIV盒子浮动、内外边距

浮动属性的使用

    1.作用:可以元素在网页中的位置(如果盒子默认是上下排列的可以改为水平的)

    2.属性:float 使xx漂浮/浮动

    3.属性值:left、right、none(默认值,不浮动)

    4.浮动的特点

        - 浮动只能控制元素在水平方向上移动

        - 浮动会使元素脱离文档流,初始位置不存在,破坏正常的网页布局

        - 浮动停止漂浮的条件

            - 碰到父级的包含框就会停止浮动

            - 碰到前面一个含有浮动属性的元素也会停止浮动

        - 当子级元素比父级元素宽度多的时候,最后一个子级元素往下移动直至找到足够的空间

    5.拓展

        - 文档流(普通流、普通层):正常的网页布局,从左到右 从上到下

        - 浮动流(浮动层):会存在于当前文档流的上方,从上帝视角看不见

注意：浮动的元素只能盖住盒子，不能盖住文字，当给盒子或图片设置浮动时，文字会环绕着图片或盒子显示。

外边距margin的使用

    1.margin的作用:主要是用来设置"同级"元素之间的位置间距

    2.属性值的写法:可以使用数值加单位px(网页中最常用的单位像素)

    3.外边距margin的属性值个数

        - margin一个属性值:上下左右

        - margin两个属性值:上下 左右

        - margin三个属性值:上 左右 下

        - margin四个属性值:上 右 下 左

    4.属性值的方向设置(顺时针)

        - margin-top

        - margin-right

        - margin-bottom

        - margin-left

    5.关于外边距的固定搭配使用

        - *{margin:0padding:0}

        - 版心选择器{margin:0 auto}

    6.margin常见的bug问题

        - 当父级元素下面只有一个子级元素的时候 给子级元素设置margin-top会错误解析到父级元素

            - 子级元素设置浮动

            - 给父级元素设置边框属性

            - 给父级元素设置文本溢出属性(布局的99%bug)

        - 有上下两个盒子 分别设置margin-top/bottom 会错误解析之间的最大值

盒模型中内边距padding的使用方法

    1.内边距作用:主要设置父级与子级元素之间的位置间距

    2.padding的属性值:数值和单位(像素px)

    3.padding的设置位置

        - 添加在父级元素上(所有的子级元素间距都是一样的):会撑大当前盒子的宽高大小,为了不破坏初始布局,需要在盒子宽高上减去相应的padding值

        - 添加在子级元素上(控制的是每一个子级元素的间距):

    4.内边距padding的属性值个数

        - padding一个属性值:上下左右

        - padding两个属性值:上下 左右

        - padding三个属性值:上 左右 下

        - padding四个属性值:上 右 下 左

    5.属性值的方向设置(顺时针)

        - padding-top

        - padding-right

        - padding-bottom

        - padding-left

    6.关于内外边距设置负值的问题?

        - 内边距 不可以

        - 外边距 可以

这篇好文章是转载于：学新通技术网