CSS盒模型之属性总结

一、width 和 height

width 属性指定了元素内容区的宽度
height 属性指定了元素内容区的高度。
取值：

长度单位（px值）
百分比
    参照的是其包含块的宽度/高度
auto
    浏览器将会为指定的元素计算并选择一个宽度.

语法

    width: 200px; height: 200px;
            初始值 auto
            是否是继承属性 否

注意：
块级元素width为auto：
当前元素width = 包含块width - 当前元素padding,border,margin之和。

二、 min-width 和 max-width

min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
max-width 属性用来给元素设置最大宽度值。定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.。
取值：与width一致 没有auto。有none
取值为null时，代表元素未设置最大最小值
语法：

    max-width：none
    min-width：none
        初始值：none
        是否是继承属性 否

三、 padding

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
padding本质上是padding-bottom,padding-left,padding-right,padding-top的简写属性。
取值：

长度单位（px）
百分比
    参照于包含块的width

语法：

padding: 1em 3px 30px 5px
        初始值 
            padding-bottom: 0
            padding-left: 0
            padding-right: 0
            padding-top: 0
是否是继承属性 否

注意：
指定一个值时 ，该值指定四个边的内边距；
指定两个值时 ，第一个值指定上下两边的内边距 第二个指定左右两边的内边距；
指定三个值时 ，第一个指定上边的内边距.第二个指定左右两边 第三个指定下边；
指定四个值时分别为上 右 下 左（顺时针顺序）；

四、border

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。
1、 border-width
border-width属性用来决定盒子边框的宽度。border-width本身也是border-top-width,border-right-width,border-bottom-width,border-left-width的简写属性。
取值：

关键字
    thin    ,medium ,thick  
    长度单位（px值）

语法：

border-width: 5px;
    初始值：
        border-top-width: medium
        border-right-width: medium
        border-bottom-width: medium
        border-left-width: medium
    是否是继承属性 否

2、 border-style
border-style用来设定元素所有边框的样式。是 border-top-style
border-right-style,border-bottom-style,border-left-style的简写属性，
取值：

语法：

border-style: dashed;
    初始值：
        border-top-style: none
        border-right-style: none
        border-bottom-style: none
        border-left-style: none
    是否是继承属性 否

3、border-color
CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color
是否是继承属性 否

五、margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数
取值：

长度单位（px）
百分比
    参照于包含块的width
auto:元素的水平居中

语法：

margin: 1em 3px 30px 5px
    初始值 
        margin-bottom: 0
        margin-left: 0
        margin-right: 0
        margin-top: 0
  是否是继承属性   否

注意：
指定一个值时 该值指定四个边的内边距；
指定两个值时 ，第一个值指定上下两边的内边距 第二个指定左右两边的内边距；
指定三个值时 ，第一个指定上边的内边距.第二个指定左右两边 第三个指定下边；
指定四个值时分别为上 右 下 左（顺时针顺序）；