当我们进行CSS+DIV的方式来重构我们的
html页面时，通常会发现一些是网站标准(或称“WEB标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式
的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错
误。本文列举了一些常见的错误：
1.检查HTML元素(如:<ul>、<div>)、属性(如:class=”")是否有拼写错误、是否忘记结束标记
(如:<br />)
因为Xhtml 语法比较严格，诸如Firefox
之类的浏览器如果检查发现Xhtml里面有语法错误，那页面是不能正常显示的。即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的
验证功能检查一下有无错误。
2. 检查CSS
是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS
来检查 CSS
的拼写错误。CleanCSS
本
是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的着名的bug，倘若不知
道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定
元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性
(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、
列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
另外的技巧：
1）input 文字 垂直居中，
<span>文字：</span><input name="n1" type="text" style="vertical-align:middle;" />
分享到：
相关推荐
【CSS与Div+CSS简介】 CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式信息（如颜色、字体、布局等）从内容中分离出来，使网页设计更加结构化...
在选项卡中，每个选项卡和对应的面板（显示内容的地方）通常都是由div元素构建的。 3. **CSS**：CSS（层叠样式表）用于定义网页的布局和样式。在这个项目中，CSS将用于设置选项卡的外观，包括字体、颜色、边框、...
网站内容丰富多彩，不仅包括了各式各样的美食介绍，还有甜品蛋糕、地方特色小吃文化、餐饮文化等多个维度的内容，力求让浏览者能够全方位地了解美食世界。 #### 二、网站描述 该项目中的美食主题网站设计得非常...
- **CSS选择器与属性**: CSS提供了丰富的选择器和属性，可以精确地控制每个DIV元素的样式。例如，使用`.header`来选择顶部导航栏，通过`background-color`设置其背景颜色，`width: 100%`使其充满整个屏幕宽度等。 ...
### CSS编写中的关键注意事项 #### 一、使用CSS缩写 在CSS开发过程中，合理运用缩写能够有效减小文件体积并提升代码可读性。常见的缩写方式包括： - **颜色值缩写**：例如将`#aabbcc`简化为`#abc`。 - **零值省略...
其中要注意的地方： 【遮罩层的大小】1、用JS判断你的显示器分辨率，获取长与宽两个参数，将这两个参数赋给第二层的Div，作为他的长与宽的像素值，这样的话，无论在多大或多小的显示器上，都可以显示同样的效果 2、...
您是否还为花几个小时，甚至几天对网页效果图进行...特别注意：本软件快速切片有一定的规范，请按操作手册进行切片，如有不清楚的地方，请和客服人员联系！ 本软件的切片基本规则：在大框里切小框，一层一层地深入。
PS切片工具的位置和使用方法（以下以PS CS5为例）：PS切片工具其使用方法很简单，只要选中切片工具，然后在自己相要切的地方点击左键进行拖放，即可看到如图中看到的切片箭头所指向的黄色切片上，要将切片导出，则...
当我们把文字、图像或其他内容放入`<DIV>`中时，它可以被称为“DIV block”、“DIV element”、“CSS-layer”或者简称“layer”。这里所说的“layer”指的是包含在`<DIV>`内的HTML内容。 #### 二、基本用法 ##### ...
本文将详细介绍CSS命名规则以及一些需要注意的地方。 #### 二、常见元素命名 1. **头部（Header）**：通常用于网站的顶部区域，包含网站的logo、导航等。 2. **内容（Content/Container）**：指网页的主要内容区域...
"Js+css3宝丽来风格的相册图片幻灯片展示代码"这一标题揭示了我们要讨论的核心技术：JavaScript（简称Js）和CSS3，以及它们如何结合来实现一个宝丽来风格的图片相册幻灯片。宝丽来风格是一种复古的照片效果，模仿了...
HTML5作为现代网页的标准，其`<canvas>`元素或者`<div>`元素结合CSS3的3D变换，可以实现数字翻转的效果。每个数字可能会被分为两部分（上半部分和下半部分），通过改变它们的角度和位置来模拟翻转。同时，HTML5的...
这个属性指示浏览器不要在任何地方换行，即所有内容都在同一行内显示，直到内容结束或者遇到一个br元素。这使得列表项在容器宽度不足时自动换行到下一行。 在CSS中，`white-space`属性用于设置元素内空白字符的处理...
首先，通过`.show()`方法显示div，然后利用CSS的`margin`属性和`window.innerWidth`与`window.innerHeight`来计算居中的位置： ```javascript $(document).ready(function() { $("#popup").on("click", function()...
在实际项目中，开发者可能会将这样的CSS3库封装成可复用的组件，方便在多个地方使用。在压缩包文件`201706231552`中，可能包含了实现这一效果的具体代码文件，如CSS、HTML和示例图片。为了应用到自己的网站，只需...
要使文本在容器内部自动换行，可以使用以下CSS样式： ```css div { word-wrap: break-word; /* 允许单词内部换行 */ word-break: normal; /* 遵循标准的单词断裂规则 */ } ``` 这个设置使得长单词（如英文...
这个特效为网页增加了动态交互性和视觉吸引力，适用于个人网站、产品展示或任何需要吸引用户注意力的地方。以下是关于这个特效及CSS3相关知识点的详细说明： 1. CSS3选择器：CSS3引入了新的选择器，如类选择器（....
首先，要显示滚动条，我们需要在`div`元素上设置`overflow`属性。在示例代码中，`.scroll`类的`overflow`属性被设置为`auto`，这意味着当内容超出容器的宽度或高度时，浏览器会自动显示滚动条。如果只想显示竖直滚动...