目录
1.DIV图层
图层是设计网页时用于定位元素或者布局的一种技术，它可以将图层里包含的内容;置到浏览器的任意位置，其包含的内容有文字、图像、动画甚至是图层。在一个网页文件中可以使用多个图层，图层可以嵌套、重叠，图层布局比表格的布局更加灵活。
1.1.DIV定义
1.基本语法
<div id="" class="" style="“>块包含的内容</div>
2.语法说明
| 属性 | 说明 |
|---|---|
| id | 规定元素的唯一id |
| class | 规定元素的类名 |
| style | 规定元素的行内样式 |
style 属性:设置图层的样式，未定义前通过浏览器查看不到效果。图层 style 属性的取值可以由多个“属性/属性值”对构成。其中主要属性有:
- position 属性一一定义图层的定位方式，有 static、fixed、relative、absolute 四个属性值。常用 relative 和 absolute。若指定为 static 时，div 遵循 HTML 规则;若指定为 relative 时，可以用 top、left 来设置 div 在页面中的偏移,但是此时不可使用层叠:若指定为 absolute 时，可以用 top、left 对 div 进行绝对定位;若指定为 fixed 时，在IE7以上与 FireFox 中 div 的位置相对于屏幕固定不变，在IE6 中没有效果。
- left、top 属性一一定义图层左上角位置 (左边距和上边距)。
- width、height 属性一一定义图层的宽度和高度。
- float 属性一一设置图层的浮动位置，可以向左、向右浮动或不浮动。
- clear 属性一一清除图层内浮动,与浮动属性是一对作用相反的属性。可以清除向左向右、左右两边浮动或允许浮动。
- z-index 属性一一设置图层的层叠的上、下层关系，设置此属性以实现多个图层层叠的效果。z-index 值越大，图层的位置越高。子层始终位于父层之上。
在HTML中，<div>元素可以使用style属性来直接应用CSS样式。这个style属性包含了CSS属性和它们的值，使用分号来分隔不同的样式声明。以下是一些基本的CSS属性，它们的可能的值及说明：
| CSS属性 | 取值范围/示例 | 说明 |
|---|---|---|
color |
red、#FF0000、rgb(255,0,0) |
设置文本颜色。 |
background |
blue、#0000FF、url(image.jpg) |
设置背景颜色或图像。 |
width |
100px、50% |
设置元素的宽度。 |
height |
100px、50% |
设置元素的高度。 |
border |
1px solid black |
设置元素的边框宽度、样式和颜色。 |
padding |
10px |
设置元素内容与边框之间的空白。 |
margin |
20px |
设置元素与其他元素之间的空隙。 |
font-size |
16px、1em |
设置字体大小。 |
font-family |
Arial, sans-serif |
设置字体族。 |
text-align |
left、right、center |
设置文本对齐。 |
display |
block、inline、none |
设置元素的显示方式。 |
position |
static、relative、absolute |
设置元素的定位方式。 |
top、right、bottom、left |
100px、10% |
配合position，设置元素的定位。 |
overflow |
visible、hidden、scroll |
设置当内容溢出元素框时所发生的事情。 |
float |
left、right、none |
允许浮动元素在左边右边及不浮动 |
z-index |
auto、数字 |
表示子图层会按照父层的属性显示|无单位的整数或复数 |
clear |
left、right、both、none |
分别表示清除左、右、左右两边的浮动和允许左右两边有浮动 |
举一个<div>元素使用style属性的实例：
<div style="width: 200px; height: 100px; background-color: lightblue; border: 1px solid black; margin: 10px;">
这是一个带有内联样式的div元素。
</div>
在这个例子里，<div>元素被赋予了宽度（width: 200px;）、高度（height: 100px;）、背景颜色（background-color: lightblue;）、边框（border: 1px solid black;）和外边距（margin: 10px;）。
记住，内联样式（inline style）是直接应用在HTML元素上的，它们的优先级通常高于嵌入式（embedded）和外部链接（external）的样式表，除非遇到了使用!important声明的样式规则。为了保持CSS的可维护性和可读性，建议尽可能使用外部链接或者嵌入式的样式表来写CSS，而不是内联样式。
1.2.DIV应用
div标记通常设置id或class属性来引用定义的样式,把文档分割为独立的、不同的部分，对文档进行布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV</title>
<style type="text/css">
.inline_div{
display: inline;}
#div1{
background-color: green;
width: 300px;height: 100px;float: left;}
#div3{
background-color: yellow;color: black;
font-size: 200%;clear: both;}
</style>
</head>
<body>
<div id="" class="" style="">块包含的内容</div>
<div id="div1" class="inline_div">这是div1</div>
<div class="inline_div"">这是div2</div>
<div id="div3">这是div3</div>
</body>
</html>
运行样式
2.图层嵌套与层叠
在图层中不仅可以包含文字、图像、动画等内容，还可以包含其他的图层，称为图层的嵌套。图层和图层之间可以不相交，也可以重叠，这就给页面布局带来了很大的灵活性，所以在设计网页时应该首先设计好页面的结构，理清图层与图层之间的关系。
2.1.Div嵌套
多个div既可以单独使用，也可以相互包含，嵌套使用。一方面可以将页面分割成不同的块，块与块之间没有包含关系；一方面又可以把功能相近的块组织到一个更大的块中，便于整体控制，即图层嵌套。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套</title>
<style type="text/css">
.inline_div{
display: inline-block;}
#wrap{
width: 450px;height: 250px;border: 2px solid black;}
#d1,#d2{
height: 100px;width: 40%;background-color: green;
margin: 20px;}
#d2{
background-color: yellow;}
#d3{
height: 100px;width: 90%;border: 2px solid black;
background-color: #66ff33;color: #0033ff; margin: 0 auto;}
</style>
</head>
<body>
<div id="wrap">
<div id="d1" class="inline_div">div1</div>
<div id="d2" class="inline_div">div2</div>
<div id="d3">div3</div>
</div>
</body>
</html>
运行样式
2.2.DIV层叠
多个div除了可以相互嵌套外，还可以层叠。div层叠必须首先将position属性设置为absolute，然后利用z-index控制层叠关系。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div层叠</title>
<style type="text/css">
body {
margin: 0;
/*边界*/
}
div {
position: absolute;
/*定位方式为绝对定位*/
width: 200px;
height: 200px;
}
#d1 {
background-color: black;
color: white;
z-index: 0;
/*值最小，该图层在最下面*/
}
#d2 {
background-color: red;
top: 25px;
left: 50px;
z-index: 1;
/*中间*/
}
#d3 {
background-color: yellow;
top: 50px;
left: 100px;
z-index: 2;
/*最下方*/
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</body>
</html>
样式展示
3.div标记与span标记
在使用 CSS 排版的页面中,div 标记和span标记是两个常用的标记。利用这两个标记加上 CSS 对其样式的控制，可以很方便地实现各种效果。
3.1.span 标记的使用
div标记是区块(block-level) 容器标记，可以容纳段落、标题、表格、图像等各种 HTMI元素。只需对div标记进行样式控制，就可以对div内包含的各种元素进行样式控制。div标记包含的元素会自动换行。
span标记是行内标记，也是行内元素 (inline element)，同样可以包含 HTML 的各种元素，只不过其元素会在一行内显示。在它前后不会自动换行span标记没有结构上的意义，纯粹是应用样式，当其他行内元素都不适合时，就可以使用span元素。
基本语法
<span id="样式名称” class="样式名称">...</span>
语法说明
如果不给 span 标记应用样式，那么 span 标记包含的元素不会有任何视觉上的变化,只有应用样式后，才会有效果。
3.2.div与span标记的区别
div和span标记默认情况下都没有对标记内的内容进行格式化或染，只有使用CSS来定义相应的样式时才会显示出不同。
- 是否是块标记。
div标记是块标记，一般包含较大范围，在区域的前后会自动换行;而span标记是行内标记，一般包含范围较窄，通常在一行内，在区域外不会自动换行。 - 是否可以互相包含。一般来说，
div标记可以包含span标记，但span标记不可以包含div标记。
但是块标记和行标记不是绝对的,通过定义 CSS 的display属性可以相互转化，display属性的取值如表。
| 属性值 | 说明 |
|---|---|
| none | 此元素不会被显示。 |
| inline | 将对象设置为行内元素，在行内显示。 |
| block | 将对象设置为块级元素，以块状显示，自动换行。 |
| inline-block | 将对象设置为行内块标记。 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span</title>
<style type="text/css">
div {
background-color: #f6f6f6;
color: 000000;
height: 2em;
margin: 2px;
/*边界*/
}
.inline_disp {
display: inline;
}
/*改变div显示方式*/
.block_disp {
display: block;
/*改变span显示方式*/
height: 4em;
background-color: rgb(200, 200, 200);
margin: 2px;
}
</style>
</head>
<body>
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<span id="s1">这是span1</span>
<span id="s2">这是span2</span>
<div id="d3" class="inline_disp">这是div3</div>
<div id="d4" class="inline_disp">这是div4</div>
<span id="s3" class="block_disp">这是span3，在使用CSS排版页面中，div标记和span标记是两个常用标记。
利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果</span>
<span id="s4" class="block_disp">这是span4，在使用CSS排版页面中，div标记和span标记是两个常用标记。
利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果</span>
</body>
</html>
样式展示
