css浮動學習
阿新 • • 發佈：2018-10-16
wid -h one padding 塊級元素 class charset 20px pen 
以前網頁中的局都是使用浮動來實現的。而浮動在css中是一個挺難理解的概念，這次再鞏固一下，float的具體使用事項。
1.行內元素和塊元素的區別？
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行內元素和塊元素</title> 6 </head> 7 <body> 8 <span>我是行內元素</span>9 <span>我也是行內元素，我不會獨占一行，我所在的這一行是允許其他元素存在的</span> 10 </body> 11 </html>
- 行內元素（img,span）和其他非塊元素在同一行顯示。vs 塊級元素（div，p）獨占一行
- 行內元素設置width無效（具體多寬由內部內容確定）（img除外），height無效(可以設置line-height)，padding和margin都是左右有效，上下無效（也就是說不能通過margin-top和padding-top來改變行高）。 vs 塊級元素默認寬度100% padding和margin都生效
代碼和顯示效果如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行內元素和塊元素</title> 6 </head> 7 <body> 8 9 10 <span style="width: 900px; border:1px solid #000000;padding:20px;margin:20px;"View Code>我是行內元素</span> 11 <span>我也是行內元素，我不會獨占一行，我所在的這一行是允許其他元素存在的</span> 12 <div style="border:1px solid #FF0000;">我是塊元素</div> 13 14 15 </body> 16 </html>
-----
未完待續
css浮動學習