DIV与SPAN
目录
- 1.DIV图层
-
- 1.1.DIV定义
- 1.2.DIV应用
- 2.图层嵌套与层叠
-
- 2.1.Div嵌套
- 2.2.DIV层叠
- 3.div标记与span标记
-
- 3.1.span 标记的使用
- 3.2.div与span标记的区别
1.DIV图层
图层是设计网页时用于定位元素或者布局的一种技术，它可以将图层里包含的内容;置到浏览器的任意位置，其包含的内容有文字、图像、动画甚至是图层。在一个网页文件中可以使用多个图层，图层可以嵌套、重叠，图层布局比表格的布局更加灵活。
1.1.DIV定义
1.基本语法
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中，元素可以使用style属性来直接应用CSS样式。这个style属性包含了CSS属性和它们的值，使用分号来分隔不同的样式声明。以下是一些基本的CSS属性，它们的可能的值及说明：
CSS属性
取值范围/示例
说明
colorred、#FF0000、rgb(255,0,0)设置文本颜色。
backgroundblue、#0000FF、url(image.jpg)设置背景颜色或图像。
width100px、50%设置元素的宽度。
height100px、50%设置元素的高度。
border1px solid black设置元素的边框宽度、样式和颜色。
padding10px设置元素内容与边框之间的空白。
margin20px设置元素与其他元素之间的空隙。
font-size16px、1em设置字体大小。
font-familyArial, sans-serif设置字体族。
text-alignleft、right、center设置文本对齐。
displayblock、inline、none设置元素的显示方式。
positionstatic、relative、absolute设置元素的定位方式。
top、right、bottom、left100px、10%配合position，设置元素的定位。
overflowvisible、hidden、scroll设置当内容溢出元素框时所发生的事情。
floatleft、right、none允许浮动元素在左边右边及不浮动
z-indexauto、数字表示子图层会按照父层的属性显示|无单位的整数或复数
clearleft、right、both、none分别表示清除左、右、左右两边的浮动和允许左右两边有浮动
举一个元素使用style属性的实例：
<div style="width: 200px; height: 100px; background-color: lightblue; border: 1px solid black; margin: 10px;">
这是一个带有内联样式的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>DIVtitle>
<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">这是div1div>
<div class="inline_div"">这是div2div>
<div id="div3">这是div3div>
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">div1div>
<div id="d2" class="inline_div">div2div>
<div id="d3">div3div>
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">div1div>
<div id="d2">div2div>
<div id="d3">div3div>
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>spantitle>
<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">这是div1div>
<div id="d2">这是div2div>
<span id="s1">这是span1span>
<span id="s2">这是span2span>
<div id="d3" class="inline_disp">这是div3div>
<div id="d4" class="inline_disp">这是div4div>
<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>
样式展示
