第三章：CSS基础---盒模型、margin补充、溢出属性、单行文本溢出显示省略号、隐藏属性、宽度自适应(自己变化)、高度自适应(自己变化)、高度塌陷

<1..扩展>

            img引入的图片会自带底部大约3px的留白

            img{display:block}

<2..盒模型>

    （1） 内容区(content)

                    a. 宽高所形成的区域为内容区的大小

                    b. 放内容的区域

    （2） 内填充/内边距 (padding)

                 padding值的设置

                           padding:数值px; 四周

                           padding:数值px 数值px; 上下 左右

                           padding:数值px 数值px  数值px; 上 左右 下

                           padding:数值px 数值px  数值px 数字px; 顺时针

                 padding的单方向

                           padding-方向(left/top/right/bottom):数值px;

        padding特点

                           1. padding会撑大盒子,如果不想被撑大的话,需要在原来的宽高的基础上减去对应方向的padding值

                           2. padding不能设置负数

                           3. padding对内联元素左右正常,上下显示不正常,对块和内联块都正常

                           4. 用来调整内容区的位置

    （3）边框(border)

    （4）外边距 margin

       margin值的设置和padding一样的

       margin特点

                           1. margin不会撑大盒子

                           2. margin可以设置负数,会产生重叠

                           3. margin对内联元素上下不生效,对块和内联块都正常

                           4. margin调整盒子和盒子之间距离

                           5. margin:auto; auto:自动 自动居中,只能实现水平居中

<3..margin补充>

       上边距和左边距的时候 动的是自己

       下边距和右边距的时候 动的别人

                           1. margin的重叠: 给上面的元素加下外边距，给下面的元素添加一个上外边距，边距会产生重叠，重叠之后以最大值显示,左右会相加

                           2. margin的传递: 给元素里面的第一个子元素设置上外边距的时候,会错误的把边距传递到父元素身上,只传递上边距

                               a. 用padding替代

                               b. 给父元素添加一个不为0的边框

                               c. 给父元素或者该元素设置浮动

                               d. 给父元素加oveflow:hidden;(溢出隐藏)

<4..溢出属性>

        overflow/overflow-x/overflow-y

                            visible 溢出正常显示,默认值

                           hidden 溢出隐藏(一刀切)

                            scroll 溢出滚动

                           auto 自动 溢出显示滚动条，不溢出不显示

<5..单行文本溢出显示省略号>

        lorem自动生成文本

                            div{

                            width:数值;

                            white-space:nowrap; 不换行

                            overflow-x:hidden; 溢出隐藏

                            text-overflow:ellipsis;文本溢出的部分用省略号替代

                            }

       可以在标签身上添加title属性,做提示信息

<6..隐藏属性>

        1. display:none; 隐藏元素 不占位置

        2. visibility:hidden; 隐藏元素 占位置

        3. opacity:0-1;  0:完全透明 1:不透明 默认值1 透明度 0: 可以隐藏,占位置 色和内容都透明

        4. rgba(0-255,0-255,0-255,0-1) 只透明色,不透明内容

<7..宽度自适应(自己变化)>

        px 固定像素

        块级元素

                           1. 不设置宽,宽跟随父元素的内容区的宽

                            2. 宽度设置百分数 % 参考父元素

        使用场景

                            1. 通栏, 一般不设置宽 或者 设置宽度为100% 让和body一样宽

                            2. 带文字的小板块，可以不设置宽

        内联元素

                            1. 宽度由内容决定

        内联块

                            1. 如果不设置宽度的话，宽度由内容决定

                            2. 设置宽度,显示的就是该宽度

        浮动对内联元素的影响

                            1. 浮动会让内联元素变块

        浮动对块级元素的影响

                            1. 当块级元素不设置宽且加浮动的时候,宽度由内容撑开

                            2. 如果设置了宽的话，按照设置的显示

包含块(父元素)的宽(内容区) = 子元素的 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

<8..高度自适应(自己变化)>

        1. 高度不设置,由内容撑开

        2. 高度设置百分数 % 都参考父元素

    应用场景

        1. 里面内容的多少不确定,可以不设置高

        2. 里面带文本的小板块可以不设置高

<9..高度塌陷>

    条件

        (1)父元素高度不设置 (2)子元素浮动

    解决方法

        1. 给父元素加高

        2. 给父元素加 overflow:hidden;(触发BFC)

            优点: 简单粗暴

            缺点: 可能会隐藏掉显示在该元素外面的内容

        3. 

                a.在浮动元素的后面添加一个块级元素

                b. 给该块级元素添加clear属性

                - 必须是块级元素,因为clear只对块生效

                - 块级元素加到浮动元素后面

                缺点: 造成代码冗余(多余)