[CSS]CSS中使用span和div遇到的問題
一. span和div的區別
1.span是行級元素，div是塊級元素
2.span佔用的寬度是內容的寬度，而div默認是一行。
因此通常在頁面中，只有一行或不到一行文字用span，元素佔據多行時用div。html
二. 問題
下圖是但願獲得的效果
spa
div在兩個span的下方，可是若是這麼寫，htm
div和span的位置重疊，由於對span元素設置了float屬性，從而致使浮動塌陷，解決辦法是將span元素的高度計算進去，可是由於span元素是行級元素，沒法設置高度，因此須要其餘解決辦法。圖片
三. 解決辦法
1. 設置div高度
這樣就能夠了。文檔
2. 設置div屬性display
將div設置爲display: inline-block，使其既具備block元素的特性，能夠設置寬度和高度，同時也具備inline元素的不換行的特性。
可是這是對第二個span元素設置的float: right屬性不生效，由於display: inline-block會使元素按行依次排列，因此第二個span元素的float: right不生效，要想達到想要的效果，能夠經過設置margin-left來實現。it
3. 設置div屬性overflow
將div設置爲overflow: hidden，使其造成BFC，可使div高度自動計算，從而和下面的div不會發生重疊。io
4. 設置content屬性position
將content設置爲position: absolute，因此content會去找第一個position屬性不爲static的父元素，即html<body>，因而就會相對於html<body>向下移動30px。class
這種方法雖然也能夠解決問題，可是也會帶來新的問題，由於position: absolute會致使content元素脫離文檔流，若是在content元素下面還有其餘元素，那麼其餘元素位置可能會和content元素重疊。
例如，float
因此又發生了一樣的問題，這種方法不推薦。方法
四. 總結
對於span和div都用時，同時span元素設置float屬性時，仍是對span外加div使其變成塊級元素並設置高度，纔不會使其後面的元素受到影響。
- 1. HTML中的div 和 span的用法。
- 2. easypoi的使用和遇到的問題
- 3. react中使用antd遇到的問題
- 4. BTrace使用中遇到的問題
- 5. ViewPager使用中遇到的問題
- 6. hbase_使用中遇到的問題（RetriesExhaustedException）
- 7. hbase_使用中遇到的問題（CallTimeoutException）
- 8. springmvc 使用中遇到的問題
- 9. webpack使用中遇到的問題
- 10. springboot中使用@Transcational遇到的問題
- 更多相關文章...
- • 在Spring中使用Redis - Redis教程
- • Redis中使用Lua語言 - Redis教程
- • C# 中 foreach 遍歷的用法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。