CSS页面布局与排版

1.CSS盒子模型由内容、边框(border)，padding(内边距),margin（外边距）

（1）border边框

属性：
    border-color：指定颜色
            格式：
                border-color:red green;  /* 上下颜色 red，左右颜色green */
                
    border-width:指定粗细程度
        格式：
            border-width: 1px 2px 3px;  /* 上边框1px,左右边框 2px,下边框3px */
    border-style:指定样式
            参数：
                none：无边框
                hidden：隐藏边框
                dotted：点状边框
                dashed：虚线边框
                solid：实线边框
                double：双边框
                groove：3D凹槽边框
                ridge：3D凸槽边框
                inset：3D凹边边框
                outset：3D凸边边框
   同时设置 边框，颜色，宽度(位置任意)
        border：2px green dashed;
   边框四边名称
        border-left：左
        border-right：右
        border-button：下
        border-top：上
   设置边框的一种属性
        border-left-width：2px;
   设置圆角
        border-radius:创建圆角边框
   添加阴影
        box-shadow：水平偏移量 垂直偏移量 模糊值 尺寸 颜色 类型；
            类型参数：
                outset：外部阴影
                inset：内部阴影
   例：
        box-shadow: 5px 3px 2px #ccc inset;

(2)内容

width：宽度
height：高度
    overflow：处理超出内容
        参数：
            auto：自动
            hidden：隐藏
            scroll：强制滚动条
            visible:超出显示
    overflow-x：定义水平方向
    overflow-y：定义垂直方向

（3）padding（内边距）

padding：控制内容与边框的距离

内边距四个方向名称
        padding-left：左
        padding-right：右
        padding-button：下
        padding-top：上
        padding：上 右 下 左
        padding：上 左右 下
        padding： 上下 左右
        padding：上下左右 四个方向

（4）margin（外边距）

margin与padding 规则类似 margin可以为负数，margin：为负数通常使子元素从父元素分离出来。

*{                /*    通用样式 */
    margin:0;
    padding:0
}

（5）块级元素(block)：在父级元素会换行，同级会顺序排列

（6）行内元素（inline）：水平排列 ，直到最右端才自动换行