HTML第四课，盒子模型

盒子模型

为了分割页面中不同的盒子，常常需要给元素设置边框效果，在css中边框属性包括边框样式属性
（border-style），边框宽度属性（border-width），边框颜色属性（border-color）c,单侧边框属性
，边框的综合属性。

样式（style）

上边框border-top-style：
下边框 border-bottom-style：
左边框border-left-style：
右边框border-right-style：

宽度（width）

上边框border-top-width：
下边框 border-bottom-width：
左边框border-left-width：
右边框border-right-width：

颜色（color）

上边框border-top-color：
下边框 border-bottom-color：
左边框border-left-color：
右边框border-right-color：

宽度 样式 颜色

上边框border-top：上边框宽度 样式 颜色
下边框 border-bottom： 下边框宽度 样式 颜色
左边框border-left： 左边框宽度 样式 颜色
右边框border-right：右边框宽度 样式 颜色
四边框border：四边边框宽度 样式 颜色

设置边框样式属性

none:没有边框（忽略所有边框的宽度）
solid：单实线
dashed：虚线
dotted：点线
double：双实线

设置格式如下

上边框border-top-style：
下边框 border-bottom-style：
左边框border-left-style：
右边框border-right-style：
border-style：上 右 下 左 （4个）
border-style：上 左右 下（3个）
border-style：上下 左右（2个）
border-style：上下左右（1个）
若是需要设置上边框位虚线，其他变为单实线可以设置为；
p{border-style:dashed solid slid solid;}
或者采用这种方法；
p{border-style:solid;}
p{border-top-style:dashed;}

注 (盒子模型其他属性也是类似于style格式，有固定顺序格式)

（还可使用标签来活用边框设置）

内边距属性（padding）

padding相关属性的取值可为auto自动（默认值），不同单位的数值，相对于父元素（或浏览器）宽度
的百分比%，实际工作中最常用的是像素值px，不允许使用负值。用法与border相同

外边距属性（margin）

与内边距属性相比，不同处是外边距可以使用负值，使相邻元素重叠，在后面的章节中将详细介绍外
边距取负值的情况。当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级
元素水平居中，实际工作中常用这种方式进行网页布局；
.header{ width:960px; margin:0 auto;}
可以使用浮动属性float使图像居左，同时设置图像的右边距和下外边距，使图像和文本之间拉开一定的距离，
实现常见的排版效果

背景属性

设置背景颜色

background-color的默认值为transparent,即背景透明，这时子元素会显示其父元素的背景。
border{background-color: #ccc;}/*设置网页的背景颜色*/

设置背景图像

准备一张背景图像，将图像放在example07.html文件所在的文件夹中，然后更改body元素的CSS代码
body{
background-color：#ccc；/*设置网页的背景颜色*/
background-image：url(img?jianbian.jpg);/*设置网页的背景图像*/

设置背景图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺，可以通过background-repeat属性来控制其他的
repeat：默认
no-repeat:不平铺
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺

设置背景图像固定

如果希望背景图像固定在屏幕上，body元素的css样式代码如下

body{
	background-image:url(img/wdjl.jpg);/*设置网页的背景图像*/
	background-repeat:no-repeat;/*设置背景图像不平铺*/
	background-position:50px 80px;/*用像素值控制背景图像的位置*/
	background-attachment：fixed；/*设置背景图像的位置固定*/
}

综合设置时

background：背景色 url("图像“） 平铺 定位 固定；

在css中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在
元素的水平和垂直方向的坐标，例如上面的right bottom 。background-position属性的默认值为
“0 0”或“top left”
（1）使用不同单位的数值：直接设置图像左上角在元素中的坐标例如background-position：20px 20px
(2)使用预定义的关键字：指定背景图像在元素中的对齐方式
水平方向值：left,center,right
垂直方向值：top,center,bottom

元素的类型与转换

块元素

 <h1>到<h6>,<p>,<div>,<ul>,<ol>,<li>其中<div>标记时最典型的块元素

行内元素

也叫做内联元素或内嵌元素，其特点时：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示
。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，，常见的行内元素有<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<a>,<span>其中<span>是最典型的行内元素