框模型(盒子模型)
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的练习