css盒模型

　　css盒模型学习总结——逆战班　　

 

css盒模型：

        是网页布局的基石！盒模型，从里到外包括：

            内容区      ->  鸡蛋

            内填充（补白）  ->  泡沫

            盒子边框（可选）    -> 快递盒子 

            外边框  ->  盒子外部的距离

 

    padding的用法：

        1：padding是长在内容和盒子之间的，在盒子内部。

        2：padding是为了调整子元素在父元素里面的位置关系。

        3：padding的特点：padding值会把盒子撑大。

        4：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。

        5：给单一方向设置padding值：

            padding-left/right/top/bottom:;

        6:padding   设置方法：

            padding:1个值           四周

            padding：2个值          上下    左右

            padding：3个值          上  左右    下

            padding：4个值          上右下左

 

        7：padding不能设置负值

        8：padding不会对背景图造成影响

        9：如果一个盒子没有设置固定的宽和高，添加padding是不用减的

 margin的用法:

        1：margin长在元素之外的。

        2：margin控制的是同级元素之间的关系

        3：margin不会对盒子本身的宽高造成影响

        4：给单一方向添加margin值

            margin-left/right/top/bottom

 

        5:margin的设置方法：

            margin：1个值           四周

            margin：2个值          上下    左右

            margin：3个值          上  左右    下

            margin：4个值          上右下左

 

        6：margin可以设置负值。

        7：margin常出现的BUG：

            a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。

            b：上下相邻的两个元素之间的margin值，不会叠加，按照最大值去设置。

        8：margin:0 auto;   让当前元素在父元素里面左右居中

　　

　　文本溢出问题：

1:空白空间的处理

        white-space:;

            pre

            pre-wrap

            pre-line

            inherit     继承

            nowrap      不让文本溢出

    2：溢出属性（控制内容溢出时候的显示方式）：

        overflow属性：

            auto        当内容超出的时候有滚动条，没有超出的时候，没有

            scroll      添加滚动条

            hidden      溢出隐藏

            inherit     继承

        拓展：

            overflow-x:hidden 横向隐藏

            overflow-y:hidden 丛向隐藏

    3:text-overflow:ellipsis/clip

        ellipsis            省略号显示

        clip                没有省略号

    控制文本,溢出   省略号显示:

        1:white-space:nowrap;           不换行

        2:overflow:hidden;      溢出的内容隐藏.

        3:text-overflow:ellipsis        溢出的内容省略号显示

        4:容器要有宽度!!!!