标准盒模型 W3C模型

1、组成部分

content+padding+border+margin

2、实际宽度

width+padding+border+margin

3、content 内容区域

width:;   元素的宽度  px  %（相对于父元素）
height:;  元素的高度  px  %（相对于父元素）

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

默认情况下，块级元素宽度为100%，行内元素宽度由内容撑开

默认高度都由内容撑开

块级元素可以设置宽高，行内元素设置宽高不生效

4、border 边框

border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双实线,要求边框至少为3px)|none(不显示);
     必须属性  默认边框为黑色 3px
border-color:;  边框的颜色
border-width:;  边框的宽度

简写：border:边框的宽度 边框的样式 边框的颜色;  设置四周的边框
例子：border:1px solid red;

---

• 单边的边框：

    border-top:1px solid red;
        border-top-width:;
        border-top-style:;
        border-top-color:;
    border-bottom:1px solid red;
        border-bottom-width:;
        border-bottom-style:;
        border-bottom-color:;
    border-left:1px solid red;
        border-left-width:;
        border-left-style:;
        border-left-color:;
    border-right:1px solid red;
        border-right-width:;
        border-right-style:;
        border-right-color:;

5、padding 内边距 不能去负值和auto

• 设置内容与边框的距离

    padding:value;  四周
    padding:value value;  上下  左右
    padding:value value value;  上  左右 下
    padding:value value value value;  上  右  下  左

    padding-top:;
    padding-bottom:;
    padding-left:;
    padding-right:;

注意：padding会撑大容器,有背景颜色

6、margin 外边距 可以取正负和auto

• 设置元素之间的距离

    margin:value;  四周
    margin:value value;  上下  左右
    margin:value value value;  上  左右 下
    margin:value value value value;  上  右  下  左

    margin-top:;
    margin-bottom:;
    margin-left:;
    margin-right:;

7.引用

块级元素水平居中：margin:0 auto;

margin注意：

1. 垂直方向上外边距合并问题 当垂直方向上外边距相撞时，取较大值 浮动元素不合并

2. margin-top问题 第一个块级子元素设置margin-top，父元素会一起下来

• 解决：

1. 父元素加overflow:hidden;
2. 父元素或者子元素浮动
3. 父元素加border:1px solid transparent;
4. 父元素加padding-top:1px;