在編寫CSS樣式表時(shí),經(jīng)常會(huì)遇到方框不顯示的問(wèn)題。以下列舉一些可能的原因:
/*1. 寬高為0或負(fù)值*/ .box{ width: 0; height: -20px; border: 1px solid red; } /*2. 顯示屬性為none*/ .box{ display: none; border: 1px solid red; } /*3. 文字內(nèi)容超出方框范圍*/ .box{ width: 100px; height: 20px; border: 1px solid red; } /*4. 沒(méi)有給方框設(shè)置背景顏色或邊框顏色*/ .box{ width: 100px; height: 20px; } /*初始化CSS*/ *{ margin: 0; padding: 0; box-sizing: border-box; }
針對(duì)以上問(wèn)題,可以采取以下解決方法:
- 確保寬高不為0或負(fù)值
- 顯示屬性設(shè)置為block或inline-block等可見屬性
- 調(diào)整文字內(nèi)容或設(shè)置overflow:hidden屬性
- 為方框設(shè)置背景顏色或邊框顏色
- 初始化CSS,避免一些瀏覽器默認(rèn)樣式或一些padding和margin值導(dǎo)致方框顯示異常
如果以上方法都無(wú)效,可以檢查其他CSS屬性是否影響到方框的顯示。另外也可以使用瀏覽器開發(fā)者工具進(jìn)行調(diào)試。