div+css布局中常用方法汇总.pdf

《div+css布局中常用方法汇总》 在网页设计中，div+css布局是一种常见的页面构建方式，它能够实现灵活的网页布局，并提高网页的可维护性和可访问性。以下是一些div+css布局中常用的技术和技巧： 1. **文本框textarea适应内容高度**：通过设置`textarea { width:300px; overflow-y: visible;}`，可以让textarea的滚动条只在内容过多时出现，高度自动调整以适应内容。 2. **鼠标指针样式**：使用`cursor: pointer;`可以使元素的鼠标指针变为手形，通常用于可点击的元素。 3. **断词控制**：`word-wrap: break-word;`允许单词在必要时换行，而`word-break: keep-all;`则保持单词完整性，不进行断词。 4. **透明度设置**：为了兼容不同浏览器，可以使用`filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;`来设置元素的透明度。 5. **CSS伪类和边框样式**：`first`、`last`、`dashed`、`inner`、`outer`等是CSS中的伪类或边框样式，用于定制元素的特定状态或样式。 6. **解决IE中列表高度显示问题**：在IE6中，可以通过`*html ul li{float:left;height:1%;}`和`*html ul li{height:1%;}`来修复高度显示不正确的问题。 7. **链接hover效果**：在IE6及以下版本，`a:hover`必须包含实际链接内容才会生效。对于`th:hover`，可以使用JavaScript的`.over`来实现类似效果。 8. **阻止元素获取焦点**：`onfocus='this.blur()'`可以在元素获取焦点时立即移除焦点，防止某些不必要的行为。 9. **模拟iframe滚动条**：通过`#content{height:200px; width:300px; overflow:auto;}`可以创建一个具有滚动条的区域。 10. **高度适应问题**：在嵌套元素中，当内层元素使用margin或padding时，可能导致外层元素高度不适应。解决方法包括添加padding，设置`height:0px; overflow:hidden;`，或调整浮动和清除浮动。 11. **命名规范**：编写CSS时，类名和ID名应尽可能简洁，降低权重，减少样式覆盖的复杂性。 12. **浏览器兼容性测试**：在设计过程中，务必考虑不同浏览器（如宽屏浏览器）下的表现。 13. **Flash遮挡问题**：通过设置`wmode="opaque"`可以解决Flash遮挡其他元素的问题，对IE和Firefox分别在`param`和`embed`标签中设置。 14. **图片边距问题**：在IE6中，图片默认有额外边距，设置`display:block`可消除此问题。 15. **代码命名约定**：例如，`search`代表搜索，`drop`表示下拉，`theme`代表主题，`tool/toolbar`表示工具栏，`cor/corner`表示转角或圆角，`layout`表示布局，`searchbox`是搜索框，`dropdownmenu`是下拉菜单，`arr/arrow`表示箭头等。 16. **Firefox特有样式**：针对Firefox，可以使用`lang`属性和`:lang()`选择器来定义特定的样式。 17. **链接与span的区别**：在需要交互效果时，使用`<a>`标签比`<span>`更适合。 18. **最大最小高度和宽度**：`max-height`、`min-height`、`max-width`、`min-width`用于限制元素的高度和宽度范围。 19. **z-index的使用**：在设置层叠顺序时，确保所有涉及的层都设置了z-index，以便浏览器进行比较。 20. **IE6的撑开问题**：使用`overflow:hidden;`可以解决元素因内容过多而撑开的问题，通过负的`margin-bottom`可以调整相邻元素的位置。 21. **调试技巧**：在遇到布局问题时，可以通过添加背景色或边框突出问题，或使用排除法检查HTML结构和CSS样式。 22. **表单元素间距问题**：在Firefox中，`<label>`左浮动后，`<input>`元素可能会偏上。这通常是由于父元素的`text-indent`引起的，将其设为0即可修复。 23. **图片与padding的处理**：避免在图片上设置padding，而应在包裹图片的元素（如`<a>`或`<li>`）上设置。 24. **导航列表样式**：导航列表的样式最好直接应用到`<a>`标签上，而不是`<li>`标签，以保持更好的语义和控制。 25. **语音家族与CSS解析**：`voice-family`属性在IE5和IE6中有不同的解析方式，可以利用这一特性进行浏览器兼容性处理。 以上是div+css布局中的一些常见技巧和解决方案，理解和掌握这些方法能帮助开发者更有效地构建和优化网页布局。在实践中，不断学习和积累经验，才能更好地应对各种布局挑战。