css(续集)

框模型（盒子模型）

width属性：设置元素的宽度（定义元素内容区的宽度 ）

值	描述
auto	默认值。浏览器可计算出实际的宽度。
length	使用 px等单位定义宽度。
%	定义基于包含块（父元素）宽度的百分比宽度。

height属性：设置元素的高度（定义元素内容区的高度 ）

值	描述
auto	默认值。浏览器可计算出实际的高度。
length	使用 px等单位定义高度。
%	定义基于包含块（父元素）高度的百分比宽度。

width属性：指的是内部元素所占据的宽度，不包括边框、padding和margin

元素占据宽度=width+border（2）+padding（2）+margin（2） 

边框：三种属性（线型、宽度、颜色）        

 四个方向（上边框、右边框、下边框、左边框）

边框（第一类属性设置方式）

border-style : none | hidden | dotted | dashed | solid | double |groove |ridge | inset | outset

border-style 的值可以是一个，两个，三个或者四个。分别解释为上下左右四个方向的边框的线型，具体规则如下：

1）border-style:dashed dotted dashed solid;    上  右 下 左

2）border-style:dashed solid dashed;   上  （左、右）  下

3）border-style:dotted solid;   （上、下）（左右）

4）border-style:dotted； （所有） 

border-width : medium | thin | thick | length

border-width的值可以是一个，两个，三个或者四个。分别解释为上下左右四个方向的边框的宽度，具体规则如下

1）border-width:1px 2px 3px 4px;     上、右、下、左  

 2）border-width:1px 2px 3px;           上（左右）下      

 3）border-width:1px 2px;                  （上下）（左右）      

 4）border-width:1px;                         （所有）

border-color：color 说明：border-width的值可以是一个，两个，三个或者四个。分别解释为上下左右四个方向的边框的颜色，具体规则如下：

1）border-color:red blue black yellow;上、右、下、左

 2）border-color:red black yellow;上（左右）下

 3）border-color:red yellow;（上下）（左右）

  4）border-color:red;（所有） 

border-top：color  width  style（三个值无顺序要求）

border-right：color  width  style（三个值无顺序要求）

border-bottom：color  width  style（三个值无顺序要求）

border-left：color  width  style（三个值无顺序要求）

border：color width style（三个值无顺序要求）

border : border-width || border-style || border-color       border会影响所有边框，类似还有以下用法。 例：border：1px   red  solid； 注意：线形是必须的。

padding：元素内容与元素边框之间的距离 语法： padding : length

例： div { padding: 20px 35px 24px 35px; }

        div { padding: 10% 10% 10% 10%; }

1）padding-top  ：单独控制上内边距

2）padding-right ：单独控制右内边距

3）padding-bottom ：单独控制下内边距

4）padding-left ：单独控制左内边距

margin—某元素与其其他元素之间的距离

1） margin-top：单独控制上外边距

2）margin-right：单独控制右外边距

3）margin-bottom：单独控制下外边距

4）margin-left：单独控制左外边距

margin和padding大家可以对比来记住

今天的分享到此结束，明天会更新css最后的一些内容，然后我会跟大家一起做一些css的练习