在html頁(yè)面中友多，我們有時(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>
語(yǔ)文
</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ì)開(kāi)始一個(gè)新行镶摘。
div的寬度占據(jù)了整個(gè)瀏覽器的寬度。我們將html標(biāo)簽岳守，放在div中凄敢，他們自上而下擺放，有些html標(biāo)簽會(huì)之間會(huì)自動(dòng)加上間隔湿痢。
div作為塊級(jí)元素涝缝，會(huì)自動(dòng)開(kāi)辟新行，這是規(guī)范中的固有的譬重，唯一的格式拒逮，除此之外，沒(méi)有別的默認(rèn)的格式了臀规。
設(shè)置字體格式
顏色
字體
大小
文字樣式：斜體等
小字體：把段落設(shè)置為小型大寫(xiě)字母字體
文字間距：橫向的文字間距
文字對(duì)齊：
設(shè)置背景色
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
頁(yè)面下拉的時(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è)預(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 瀏覽過(guò)的連接文字格式
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)的恩袱。基本的事件屬性有下列幾種
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 使要素可以被看見(jiàn)/使要素被隱藏
層次：z-index
顯示div的一部分：clip畔塔，只顯示單元的一部分，其余部分做透明處理
clip : rect(top,right.bottom,left) ;
是否顯示滾動(dòng)條：overflow
css盒模型
盒模型是指將網(wǎng)頁(yè)上div元素視為長(zhǎng)方形的盒子。CSS中澈吨，所有頁(yè)面元素都包含在一個(gè)矩形框內(nèi)把敢，這個(gè)矩形框就稱為盒子。
1.盒子描述了元素及屬性在頁(yè)面布局中所占空間大小棚辽，因此盒子可以影響其他元素的位置及大小技竟。
2.盒子模型是由margin（邊界）、border（邊框）屈藐、padding（空白）和content（內(nèi)容）幾個(gè)屬性組成榔组。
content（內(nèi)容）：盒子模型中必需的部分，可以是文字联逻、圖片等元素
padding（空白）：也稱頁(yè)邊距或補(bǔ)白搓扯，用來(lái)設(shè)置內(nèi)容和邊框之間的距離
border（邊框）：可以設(shè)置內(nèi)容邊框線的粗細(xì)、顏色和樣式等包归。
margin（邊界）：外邊距锨推，用來(lái)設(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ì)定位
