首頁 > 開發者 > JavaScript
使用float和display:block將內嵌元素轉換成塊元素的不同點，floatblock
使用float和display:block將內嵌元素轉換成塊元素的不同點:
建議:儘可能的手寫代碼，可以有效提高學習效率和深度。
內嵌元素可以轉換成區塊層級元素，常用的方法比如可以為內嵌元素使用float屬性讓內嵌元素浮動起來，或者為內嵌元素添加display:block。雖然兩者都可以讓內嵌元素轉換成區塊層級元素，但是有區別的。代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">a { height: 30px; line-height: 30px; float: left; background-color: #F60;}</style></head><body> <a href="#">螞蟻部落</a></body></html>
以上代碼使用float實現了a元素轉換成區塊層級元素，可以看出寬度是根據內容而定的。再看一段代碼執行個體:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">a { height: 30px; line-height: 30px; display: block; background-color: #F60;}</style></head><body> <a href="#">螞蟻部落</a></body></html>
以上代碼為a元素添加display:block將其轉換為會計元素，但是寬度卻不根據內容而定的，而是預設狀態下為width:100%。
可能兩者之間還有更多的不同點，歡迎大家留言補充。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4615
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
