031_div和span
1. html標(biāo)簽按照元素種類可以分為塊級元素(display: block); 行內(nèi)元素(display: inline)和行內(nèi)塊元素(display: inline-block)三種。
2. 塊級元素
2.1. 塊元素指的是占據(jù)全部可用寬度的元素, 并且在其前后都會換行。塊級元素一般可嵌套塊級元素、行內(nèi)塊元素或行內(nèi)元素。最常用的塊級元素是div。
2.2. 默認(rèn)特點:
2.2.1. 獨占一行, 通常會以新行來開始和結(jié)束。
2.2.2. 可以設(shè)置width, height, margin, padding等屬性。
2.2.3. 占據(jù)全部可用寬度, 默認(rèn)值為100%。
3. 行內(nèi)元素
3.1. 行內(nèi)元素通常不會以新行開始, 顯示在一行, 寬度隨內(nèi)容變化, 當(dāng)?shù)竭_父元素寬度時換下一行顯示。內(nèi)聯(lián)元素只能容納文本或其他行內(nèi)元素。最常用的行內(nèi)元素是span。
3.2. 默認(rèn)特點:
3.2.1. 排在一行, 寬度隨內(nèi)容變化。
3.2.2. 設(shè)置width, height無效(可以設(shè)置line-height指定高度)。
3.2.3. margin水平方向有效, 垂直方向無效。
3.2.4. padding水平方向有效, 垂直方向有特殊效果(不是邊距效果), 具體表現(xiàn): 不影響位置, 影響視覺。
4.?行內(nèi)塊元素
4.1. 行內(nèi)塊既有行內(nèi)元素的一些特性又有塊級元素的一些特性。
4.2. 默認(rèn)特點:
4.2.1. 多個元素排在一行。
4.2.2. 可以設(shè)置width, height, margin, padding等屬性。
5. <div>元素
5.1. <div>元素是塊級元素, 它是可用于組合其他html元素的容器。
5.2. <div>元素沒有特定的含義。實際上, 換行是<div>固有的唯一格式表現(xiàn)。
5.3. 如果用id或class來標(biāo)記<div>, 那么該標(biāo)簽的作用會變得更加有效。
5.4. <div>元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用<table>元素進行文檔布局不是表格的正確用法。<table>元素的作用是顯示表格化的數(shù)據(jù)。
5.5. <div>元素常用作布局工具, 因為能夠輕松地通過CSS對其進行定位。
5.6. 使用<div>元素的html布局
5.6.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>div 布局</title><style type="text/css">#header {background-color: black;color: white;text-align: center;height: 100px;}#header h1 {margin: 0;line-height: 100px;}#nav {line-height: 30px;background-color: #eeeeee;height: 300px;width: 100px;float: left;padding: 5px; margin: 0px; }#section {width: 350px;float: left;padding: 10px; }#footer {background-color: black;color: white;clear: both;text-align: center;padding: 5px; }</style></head><body><div id="header"><h1>City Gallery</h1></div><div id="nav">London<br />Paris<br />Tokyo<br /></div><div id="section"><h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Copyright ? W3Schools.com</div></body> </html>5.6.2. 效果圖
6. <span>元素
6.1. <span>元素是內(nèi)聯(lián)元素, 可用作文本的容器。用來組合文檔中的行內(nèi)元素。
6.2. <span>元素也沒有特定的含義。
6.3. 當(dāng)與CSS一同使用時, <span>元素可用于為部分文本設(shè)置樣式屬性。
7. 早期沒有div的時候都是使用table布局
7.1.?代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>table 布局</title><style type="text/css">#header {background-color: black;color: white;text-align: center;width: 100%;height: 100px;}#nav {height: 300px;width: 100px;float: left;background-color: #eeeeee;text-align: left;line-height: 30px;}#nav td {vertical-align: top;}#section {width: 350px;float: left;}span {display: inline-block;margin: 12px 0;}#footer {background-color: black;color: white;clear: both;text-align: center;padding: 5px; width: 100%; }</style></head><body><table id="header"><tr><td><h1>City Gallery</h1></td></tr></table><table id="nav"><tr><td>London<br />Paris<br />Tokyo</td></tr></table><table id="section"><tr><td><h2>London</h2></td></tr><tr><td>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</td></tr><tr><td><span>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</span></td></tr></table><table id="footer"><tr><td>Copyright ? W3Schools.com</td></tr></table></body> </html>7.2.?效果圖?
總結(jié)
以上是生活随笔為你收集整理的031_div和span的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 024_html列表
- 下一篇： 037_Unicode对照表三