1.Html區塊元素 HTML可以通過<div>和<span>將元素組合起來 大多數HTML元素被定義為塊級元素或內聯元素, 而塊級元素在瀏覽器顯示時,通常會以新行來開始(或結束)。如:<h1>,<p>,<ul>,<table> 內聯元素在顯示時通常不會以新行開始。如:<b>,<td>,<a>,<i ...
1.Html區塊元素
HTML可以通過<div>和<span>將元素組合起來
大多數HTML元素被定義為塊級元素或內聯元素,
而塊級元素在瀏覽器顯示時,通常會以新行來開始(或結束)。如:<h1>,<p>,<ul>,<table>
內聯元素在顯示時通常不會以新行開始。如:<b>,<td>,<a>,<img>
2.<div>元素
HTML <div> 元素是塊級元素,它是可用於組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
預設情況下,瀏覽器通常會在<div>元素前後放置一個換行符。(可以通過css改變這種情況
1.設置float
設置float:left樣式讓div對象靠左,這樣div會失去本身的寬度樣式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>無標題文檔</title> 6 <style> 7 div{ float:left} 8 </style> 9 </head> 10 <body> 11 <div>第一個div盒子</div> 12 <div>第二個div盒子</div> 13 </body> 14 </html>
2.設置display樣式
設置display:inline樣式讓div失去預設100%獨占一行的寬度
display:inline(讓對象併排顯示)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>div併排實例 www.dvicss5.com</title> 6 <style> 7 div{ display:inline} 8 </style> 9 </head> 10 <body> 11 <div>第一個div盒子</div> 12 <div>第二個div盒子</div> 13 </body> 14 </html>
)
2.1屬性
屬性 | 值 | 描述 |
align |
left right center justify |
html5中不支持 |
3.<span>元素
<span>元素是內聯元素,可以作為文本的容器,沒有特定的含義。當與CSS一起使用時,<span>元素可以用於為部分文本設置樣式屬性。
3.1說明
<span> 用於對文檔中的行內元素進行組合。
<span> 標簽沒有固定的格式表現。當對它應用樣式時,它才會產生視覺上的變化。如果不對 <span> 應用樣式,那麼 <span> 元素中的文本與其他文本不會任何視覺上的差異。
<span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。