初识CSS--常用元素总结(三)-盒模型

1. 元素尺寸：

    width        宽度
    height       高度  
    min-width    最小宽度
    min-height   最小高度
    max-width    最大宽度
    max-height   最大高度

    属性值均为：
            auto      自适应
            数字+px   指定长度
            数字+%    相对于父控件的值

2. 元素内边距：

    padding-top     顶部内边距
    padding-bottom  底部内边距
    padding-left    左侧内边距
    padding-right   右侧内边距
    padding         简写，设置四个内边距，（顺序为：上，左，下，右）

    属性值均为：
        数字+px  指定长度
        数字+%   指定相对于父控件的百分比

3. 元素外边距：

    margin-top      顶部外边距
    margin-bottom   底部外边距
    margin-left     左侧外边距
    margin-right    右侧外边距
    margin          简写，设置四个外边距，（顺序为：上，左，下，右）  

    属性值均为：
        数字+px  指定长度
        数字+%   指定相对于父控件的百分比

4. 溢出处理：

    overflow-x  水平方向
    overflow-y  竖直方向
    overflow    简写，设置两个方向的处理方式（顺序为：水平，竖直）

    属性值为：
        auto     自动的处理溢出内容，产生了溢出则显示滚动条
        hidden   产生溢出时自动隐藏掉溢出内容
        scroll   不管是否溢出，均显示滚动条
        visible  默认值不管是否溢出，均显示内容

5. 元素可见性：

    visibility：
        visible  默认值，元素在页面上可见
        hidden 元素不可见，但会占用空间
        collapse 如果是表格，则会元素不可见，同时隐藏表格的行和列；如果不是表格，效果和hidden一样

6. 元素盒类型：

    分类：块级元素（区块），行内元素（内联），行内-块级元素（内联块）

    1. 块级元素
    所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。比如：<div>、<p>等文档元素。

    2. 行内元素
    所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：<span>、<b>等文本元素。

    3. 行内- 块元素
    所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。

    display属性：
            block         盒子为块级元素
            inline        盒子为行内元素
            inline-block  盒子为行内-块元素
            none          盒子不可见，不占位

7. 元素的浮动：

    float属性可以让元素进行漂浮起来，让开了原本占据的位置，使得后边的元素补上空缺的位置；
    clear属性可以使得元素清除周边的浮动，固定的显示在某一位置，常配套使用。
    float：
        left    浮动元素靠左
        right   浮动元素靠右
        none    禁用浮动属性
    clear：
        none   允许两边都可浮动
        left   禁止左边界浮动
        right  禁止右边界浮动
        both   禁止两边浮动