|
TOP
DIV+CSS布局中p元素引起的问题
[ 编辑:qiraosky | 时间:2012-03-20 21:35:25
| 浏览:422次 | 来源:德州电脑服务网 | 作者:德州电脑服务网 ]
今天有个网友问我，他的一个页面布局有点问题，没有按照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标签只是一个段落标签，要用也只用来当作一段文字的容器，请不要使用它来参与布局。 风流才子 作品，转帖请保留原文地址链接，谢谢合作！ |
热门文章
|