html块级元素的盒子模型

盒子模型概念图：

CSS中的盒子模型属性：

一、边框属性
1.上边框：
border-top-style:样式值;
border-top-width:宽度值;
border-top-color:颜色值;

border-top:宽度 样式 颜色;

2.右边框：
border-right-style
border-right-width
border-right-color

border-right

3.左边框
border-left-width
border-left-style
border-left-color

border-left

4.下边框
border-bottom-width
border-bottom-style
border-bottom-color

border-bottom

5.四个值是顺时针的顺序，三个值 上/左右/下，两个值 上下/左右，一个值为四边
边框样式综合：
border-style:上边框 [右边框 下边框 左边框];
边框宽度综合：
border-width
边框颜色综合
border-color

6.边框综合：
border:四边宽度 四边样式 四边颜色;

7.取值方面：
宽度：数值，常用单位px
颜色：预定义值，#十六进制，rgb(r,g,b,)，rgb(r%,g%,b%)，transparent 透明色

样式：
none：没有边框
solid：单实线
dashed：虚线
dotted：点线
double：双实线

二、内边距
padding-top
padding-bottom
padding-left
padding-right
padding:上内边距 [右内边距 下内边距 左内边距];

三、外边距
margin-top
margin-bottom
margin-left
margin-right

margin:上外边距 [右外边距 下外边距 左外边距];

四、背景（元素内容）
1.背景颜色
background-color
2.背景图像
background-image:url(URL);
3.背景图像平铺
background-repeat
repeat：沿水平和垂直方向平铺
no-repeat：不平铺
repeat-x：沿水平方向平铺
repeat-y：沿垂直方向平铺
4.设置背景图像位置
前提：background-repeat:no-repeat;
background-position：属性值为两个，中间用空格隔开，定义水平和垂直方向的坐标

使用不同单位（常用为px）的数值：以图象左上角为移动点 以元素的左上角为坐标点，如：background-position:20px 20px;

使用预定义的关键字：
水平方向：left，center，right
垂直方向：top，center，bottom
若只有center一个值，则水平和垂直方向都去center

使用百分比：背景图像与元素的指定点对齐
0% 0%：表示图像的左上角与元素的左上角对齐
20% 30%：图像20% 30%的点与元素20% 30%的点对齐
50% 50%：图像50% 50%的点与元素50% 50%的中心点对齐
100% 100%：图像的右下角与元素的右下角对齐
5.背景图像固定
background-attachment
scroll：图像随页面一起滚动
fixed：图像固定在屏幕

6.综合设置背景：
background:背景色 url(“背景图像” 平铺 定位 固定);

元素的类型与转换

页面元素分为块级元素和行级元素
块级元素：
块级元素有着盒子模型的结构，而且独占一行
块级元素有：

<div></div>
<hn></hn>
<p></p>
<ul></ul>
<ol></ol>
<li></li>

行级元素：
不独占一行，所占空间由元素内容（字体大小，图像尺寸）决定，不能设置宽高，对齐
行内元素有：

<span></span>
<a></a>
<strong></strong>
<b></b>
<del></del>

元素转换：
display
inline：转换为行内元素
block：转换为块级元素
inline-block：转换为行内块元素，可以设置宽高，但不独占一行
none：元素被隐藏，不显示，不占用页面空间，相当于元素不存在