第六章 盒子模型
1.什么是盒子模型:
CSS中盒子模型的概念就是,CSS将网页中所有元素都看成一个个盒子。
2.盒子模型的边框、内边距和外边距属性:
盒子模型的属性 | 图示 | |
边框 | border | |
内边距 | Padding | |
外边距 | margin | |
高 | height | |
宽 | width |
3.盒子模型层次关系:
①首先是盒子的主要标识:边框(border)位于盒子的第一层 | |
②其次是元素内容(content)、内边距(padding)两者位于第二层 | |
③再次是背景图(background-image)位于第三层 | |
④背景色(background-color)位于第四层 | |
⑤最后是整个盒子的外边距(margin) |
4.边框的3个属性(颜色color、粗细width、样式style)
border-color(边框颜色)属性设置方法 | ||
属性 | 说明 | 示例 |
border-top-color | 上边框颜色 | border-top-color:#369; |
border-right-color | 右边框颜色 | border-right-color:#369; |
border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
border-left-color | 左边框颜色 | border-left-color:#efcd56; |
border-color
| 四个边框为同一颜色 | border-color:#eeff34; |
上、下边框颜色:#369 左、右边框颜色:#000 | border-color:#369 #000; | |
上边框颜色:#369左、右边框颜色:#000 下边框颜色:#f00 | border-color:#369 #000 #f00; | |
上、右、下、左边框颜色: #369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
注意:使用border-color属性同时设置4条边框的颜色时,设置顺序是按顺时针方向:上、右、 下、左。
border-width(边框粗细)属性设置方法 (它的值的:thin:设置细的边框 medium:默认值,设置中等边框。 Thick:设置粗边框 和像素值px) | ||
属性 | 说明 | 示例 |
border-top-width | 设置上边框的粗细为5px | border-top-width:5px; |
border-right- width | 设置右边框的粗细为10px | border-right-width:10px; |
border-bottom- width | 设置下边框的粗细为8px | border-bottom-width:8px; |
border-left- width | 设置左边框的粗细为22px | border-left-width:22px; |
border- width
| 设置4个边框的粗细为5px | border-width:5px; |
上、下边框的粗细为:20px 左、右边框的粗细为:2px | border-width:20px 2px; | |
上边框的粗细为:5px左、右边框的粗细为:1px下边框的粗细为:6px | border-width:5px 1px 6px; | |
上、右、下、左边框的粗细为: 1px 3px 5px 2px | border-width:1px 3px 5px 2px; |
border-style(边框样式)属性设置方法 | ||
属性 | 说明 | 示例 |
border-top-style | 设置上边框为实线 | border-top-style:solid; |
border-right-style | 设置右边框为实线 | border-right- style: solid; |
border-bottom-style | 设置下边框为实线 | border-bottom- style: solid; |
border-left-style | 设置左边框为实线 | border-left- style: solid; |
border-style
| 设置4个边框为实线 | border- style: solid; |
上、下边框为实线 左、右边框为点线 | border- style:solid dotted; | |
上边框为实线,左、右边框为点线,下边框为虚线。 | border- style:solid dotted dashed; | |
上、右、下、左边框为: 实线,点线,虚线,双线 | border- style:solid dotted dashed double |
border属性简写:
border-color ,border-width ,border-style顺序没有限制,但通常顺序为:粗细、颜色和样式
例:border-bottom:9px , #F00 , dashed;
5.外边距属性设置:
margin(外边距)属性设置方法 | ||
属性 | 说明 | 示例 |
margin-top | 设置上外边距 | margin-top:1px; |
margin -right | 设置右外边距 | margin -right: 2px; |
margin -bottom | 设置下外边距 | margin -bottom: 2px; |
margin -left | 设置左外边距 | margin -left: 1px; |
margin
| 设置上下左右外边距分别是3px 5px 7px 4px | margin:3px 5px 7px 4px; |
上、下外边距 3px 左、右外边距 5px | margin: 3px 5px; | |
上外边距3px,左、右外边距4px, 下外边距7px。 | margin: 3px 5px 7px; | |
上、右、下、左外边距均为8px: | margin: 8px; |
6.内边距属性设置:
padding(内边距)属性设置方法 | ||
属性 | 说明 | 示例 |
padding-top | 设置上外边距 | padding -top:1px; |
padding -right | 设置右外边距 | padding -right: 2px; |
padding -bottom | 设置下外边距 | padding -bottom: 2px; |
padding -left | 设置左外边距 | padding -left: 1px; |
padding | 设置上下左右外边距分别是3px 5px 7px 4px | padding:3px 5px 7px 4px; |
上、下外边距 3px 左、右外边距 5px | padding: 3px 5px; | |
上外边距3px,左、右外边距8px, 下外边距10px。 | padding: 3px 8px 10px; | |
上、右、下、左外边距均为10px: | padding:10px; |
7.盒子模型的尺寸:
盒子模型总尺寸:border+width+padding+margin+内容宽度 |
8.村准文档流:
标准文档流由块级元素和内联元素组成。
标准文档流 | |||
①块级元素 | 自动换行 | 例如:<ul></ul><p></p><h1>~<h6><div> | |
②内联元素 | 不自动换行 | 例如:<span><a></a><img/><strong> | |
Display的属性 | |||
block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 | ||
inline | 内联元素的默认值,元素会被显示为内联元素,该元素前后没有换行。 | ||
none | 设置元素不会被显示 | ||
例: