今天有個網友問我,他的一個頁面布局有點問題,沒有按照CSS的定義來渲染,才子看了一下他的CSS文件,沒發現哪里有錯誤,結果一看XHTML,發現一個才子以前犯過的一個錯誤,在這里才子解釋一下,希望幫到一些新手!
這個網友,他的布局其實還算正規,雖然沒有用到一些高級技巧來兼容各瀏覽器之間的差異,但還算中規中矩,只有一個地方有問題,那就是在主內容模塊(#main)里,它用到了一個p元素(段落標簽)來做子容器,其實這并沒有什么問題,但p元素里面他又用到了好幾個塊元素(block element),用到了h2和h3標題標簽,還有div元素,導致這個p元素在CSS中定義的內邊距失效,他以為是塊元素浮動(float)的問題,結果用clear: both;清除浮動還是沒用,p元素定義的padding: 10px;沒有生效。
才子告訴他原因了,p元素是個比較特殊的塊元素,它與我們常用來布局的div元素不同,p元素它只能裝內聯元素(inline element),而div元素可以裝任何元素,這估計也是為什么推薦采用div+css布局的原因之一吧。
以上的這個問題才子在這里分享出來,希望新手們要注意了,采用div+css布局就盡量全部用div來排版,p標簽只是一個段落標簽,要用也只用來當作一段文字的容器,請不要使用它來參與布局。
安徽新華電腦學校專業職業規劃師為你提供更多幫助【在線咨詢】
DIV+CSS布局中p元素引起的問題
2009-12-23 15:37:46 作者:aultoale 來源:站長網