在html頁面中，我們有時(shí)候需要放入一些內(nèi)容，比如文字、表格table、列表ul、圖片img、音頻、視頻等，我們可以把這些內(nèi)容放在div中。然后可以使用css將div元素進(jìn)行修飾，不會(huì)影響其他HTML元素。
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
outline-style: solid;
outline-width: 2px;
}
</style>
</head>
<body style="background: #dddddd">
<div>
你好，div
</div>
<div>
謝謝，我很好
</div>
<div>
</div>
<div>
<ul>
<li>
語文
</li>
<li>
數(shù)學(xué)
</li>
</ul>
</div>
<div>
<a href="www.baidu.com">百度</a>
</div>
<div>
<table>
<tr>
<td>1班</td>
<td>2班</td>
<td>3班</td>
</tr>
<tr>
<td>1班</td>
<td>2班</td>
<td>3班</td>
</tr>
</table>
</div>
<div>
<pre><pre>
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>
</pre></pre>
</div>
<div>
<i> 標(biāo)簽一定要和結(jié)束標(biāo)簽 </i>
</div>
<div>
<form action="form_action.asp" method="get">
<p>
First name:
<input type="text" name="fname" />
</p>
<p>
Last name:
<input type="text" name="lname" />
</p>
<input type="submit" value="Submit" />
</form>
</div>
<div><div>你好，div</div><div>你好，div</div></div>
</body>
</html>
</html>
在html中，分塊級(jí)元素和行級(jí)元素。div屬于塊級(jí)元素。默認(rèn)情況下，這些div是自上而下順序擺放的，每個(gè)div會(huì)開始一個(gè)新行。
div的寬度占據(jù)了整個(gè)瀏覽器的寬度。我們將html標(biāo)簽，放在div中，他們自上而下擺放，有些html標(biāo)簽會(huì)之間會(huì)自動(dòng)加上間隔。
div作為塊級(jí)元素，會(huì)自動(dòng)開辟新行，這是規(guī)范中的固有的，唯一的格式，除此之外，沒有別的默認(rèn)的格式了。
設(shè)置字體格式
顏色
字體
大小
文字樣式：斜體等
小字體：把段落設(shè)置為小型大寫字母字體
文字間距：橫向的文字間距
文字對(duì)齊：
設(shè)置背景色
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
頁面下拉的時(shí)候，背景圖片是否隨滾動(dòng)條滾動(dòng)。
scroll:默認(rèn)值，滾動(dòng)。
fixed:背景圖像固定。
inherit:規(guī)定應(yīng)該從父元素繼承 background-attachment 屬性的設(shè)置
background-repeat : repeat 重復(fù)排列-網(wǎng)頁預(yù)設(shè)
background-repeat : no-repeat 不重復(fù)排列
background-repeat : repeat-x 在x軸重復(fù)排列
background-repeat : repeat-y 在y軸重復(fù)排列
background-position : 90% 90% 背景圖片x與y軸的位置
background-position : center;北京圖片居中
超鏈接
A 所有超連接
A:link 超連接文字格式
A:visited 瀏覽過的連接文字格式
A:active 按下連接的格式
A:hover 鼠標(biāo)移至連接
這是css的樣式，我們可以這樣定義
a:link {
background-color:yellow;
}
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
虛線<textarea style="border:1px dashed pink">
實(shí)線<textarea style="border:1px solid pink">
事件屬性
事件是作為div的一種屬性出現(xiàn)的?；镜氖录傩杂邢铝袔追N
onclick(單擊)
ondblclick(雙擊)
onmousedown(鼠標(biāo)按下)
onmouseup(鼠標(biāo)抬起)
onmousemove(鼠標(biāo)移動(dòng))
onmouseover(鼠標(biāo)在div內(nèi)部)
onmouseout(鼠標(biāo)移出div)
onkeypress(鍵盤按下)
onkeydown(鍵盤按鍵)
onkeyup(按鍵抬起)
div空間控制
定位div：position: absolute; left: 200px; top: 40px;
絕對(duì)定位:H4 { position: absolute; left: 100px; top: 43px }
相對(duì)定位
I {
position:relative;/*位置:相對(duì);*/
left:40px;/*左:40像素;*/
top:10px/*頂部:10像素;*/
}
設(shè)置寬高： width、height
**可視性 **：visibility：visible/hidden/inherit 使要素可以被看見/使要素被隱藏
層次：z-index
顯示div的一部分：clip，只顯示單元的一部分，其余部分做透明處理
clip : rect(top,right.bottom,left) ;
是否顯示滾動(dòng)條：overflow
css盒模型
盒模型是指將網(wǎng)頁上div元素視為長方形的盒子。CSS中，所有頁面元素都包含在一個(gè)矩形框內(nèi)，這個(gè)矩形框就稱為盒子。
1.盒子描述了元素及屬性在頁面布局中所占空間大小，因此盒子可以影響其他元素的位置及大小。
2.盒子模型是由margin（邊界）、border（邊框）、padding（空白）和content（內(nèi)容）幾個(gè)屬性組成。
content（內(nèi)容）：盒子模型中必需的部分，可以是文字、圖片等元素
padding（空白）：也稱頁邊距或補(bǔ)白，用來設(shè)置內(nèi)容和邊框之間的距離
border（邊框）：可以設(shè)置內(nèi)容邊框線的粗細(xì)、顏色和樣式等。
margin（邊界）：外邊距，用來設(shè)置內(nèi)容與內(nèi)容之間的距離
div+css 布局
1、div是塊級(jí)元素，自上而下擺布
2、使用float:left/right屬性可以使div脫離文檔流
3、使用
position: absolute; left: 200px; top: 40px; 進(jìn)行絕對(duì)定位
position:relative;進(jìn)行相對(duì)定位
