HTML第六章

第六章 盒子模型

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-5px;
border-right- width	设置右边框的粗细为10px	border-right-10px;
border-bottom- width	设置下边框的粗细为8px	border-bottom-8px;
border-left- width	设置左边框的粗细为22px	border-left-22px;
border- width	设置4个边框的粗细为5px	border-5px;
	上、下边框的粗细为：20px 左、右边框的粗细为：2px	border-20px 2px;
	上边框的粗细为：5px左、右边框的粗细为：1px下边框的粗细为：6px	border-5px 1px 6px;
	上、右、下、左边框的粗细为： 1px 3px 5px 2px	border-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		设置元素不会被显示

 

例：