认识盒子模型

盒子模型：比如手机盒子，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型
盒子模型的相关属性
边框属性
1.设置边框样式（border-style)
none:没有边框即忽略所有边框的宽度（默认值）
solid:边框为单实线
dashed:边框为虚线
dotted:边框为点线
double：边框为双实线
可以对盒子模型的单边进行设置，也可以综合设置4条边的样式：
border-top-style:上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border-style：上边框样式 右边框样式 下边框样式 左边框样式
border-style：上边框样式 左右边框样式 下边框样式
border-style：上下边框样式 左右边框样式
border-style：上下左右边框样式

p{ border-style:dashed solid solid solid;}
或综合设置4条边
p{ border-style：solid；}
p{ border-top-style:dashed:}

2.设置边框宽度（border-width）
border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border-width：上边框宽度[有边框宽度 下边框宽度 左边框宽度]

p{
    border-width：1px;
    border-top-width:3px;
    }

3.设置边框颜色（border-color）
border-top-color：上边框颜色
border-right-color:右边框颜色
border-bottom-color：下边框颜色
border-left-color：左边框颜色
border-color：上边框颜色 [右边框颜色 下边框颜色 左边框颜色]
设置段落的边框样式为实线，上边框灰色，左右框红色

p{
     border-style:solid;
     border-color:#CCC #FF0000
     }

4.综合设置边框
border-top：上边框宽度 样式 颜色
border-right：右边框宽度 样式 颜色
border-bottom：下边框宽度 样式 颜色
border-left：左边框宽度 样式 颜色
border：四边宽度 样式 颜色

p{ border-top:2px solid #CCC;}
或
p{
border-top-style:solid;
border-top-width:2px;
border-top-color:#CCC;
}

内边距属性
padding是复合属性
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding：上内边距[右内边距 下内边距 左内边距]

img{
padding：80px;
padding-bottom:0;
}

外边框属性
margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距 [右外边距 下外边距 左外边距]

.head{width：96px;margin:0 auto；}

背景属性
1.设置背景颜色
网页元素的背景颜色使用background-color属性来设置
默认值transparent为透明
2.设置背景图像
通过background-imagine属性实现

body{
         background-color：#CCC；
         background-image:url(img/jianbian.jpg);
         }

3.设置背景图像平铺
默认情况下，背景图像会向水平和竖直两个方向平铺。
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat:不平铺（图像位于元素的左上角，只显示一次）
repeat-x:只沿水平方向平铺
repeat-y:只沿竖直方向平铺

body{
        background-color：#CCC；
        background-image：url(img/jianbian.jpg);
        background-repeat:repeat-x;
        }

4.设置背景图像的位置

body{
          background-image:url(img/wdj.jpg);
          background-repeat:no-repeat;
          background-position:right bottom:
          }

background-position属性的取值：
（1）使用不同单位（最常用的是像素px）的数值：直接设置图像的左上角在元素中的坐标，例如“background-position：20px 20px”。
(2）使用预设定义的关键字：指定背景图像在元素中的对齐方式。
水平方向值：left center right
垂直方向值：top center bottom
两个关键字的顺序任意，若只有一个值则另一个值默认为center。
（3）使用百分比：按背景图像的颜色和元素的指定点对齐
0% 0%：表示图像左上角与元素的左上角对齐
50% 50%：表示图像50%50%中心点与元素50%50%的中心对齐
20%30%：表示图像的20%30%的点与元素20%30%的点对齐
100%100%：表示图像右下角与元素的右下角对齐，而不是图像充满元素
5.设置背景图像固定
scroll：图像随页面元素一起滚动（默认值）
fixed：图像固定在屏幕上，不随页面元素滚动

body{
         background-image：url(img/widj.jpg);
         background-repeat:no-repeat;
         background-position:50px 80px;
         background-attachment:fixed;
         }

5.综合设置元素的背景

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

盒子的宽与高
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
元素的类型与转换
元素的类型
1.块元素
每个块元素通常都会独自占据一整行或多整行，常见的有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>,<div>标记是最典型的元素。
2.行内元素：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。常见的行内元素有<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,,<a>,<span>等，最常见。
<div>与<span>标记
1.<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素。也就是说，大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
它非常强大，通过id、class等属性配合，然后使用CSS设置样式，可以替代大多数的块级文本标记。
2.<span>标记
为行内元素，<span>与</span>之间只能包含文本和各种行内标记，如加粗标记<strong>、倾斜标记<em>等，<span>中还可以嵌套多层<span>。
<span>标记可以嵌套在<div>标记中，成为它的子元素，但反过来则不成立。
元素的转换
网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元素的类型进行转换。
display常见属性：
inline:此元素将显示行内元素（行内元素默认的display属性值）
block：此元素只显示为块元素（块元素默认的display属性值）
inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
例子：


块元素垂直外边距的合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素的垂直外边距的合并（也称外边距塌陷）。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距是0，也会发生合并。