CSS一些常见的技巧分享

1. 检查HTML元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错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等。

时间: 2024-10-06 22:28:24

CSS一些常见的技巧分享的相关文章

CSS技巧分享:如何用css制作横排二级下拉菜单

原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&

用JS动态设置CSS样式常见方法小结(推荐)_javascript技巧

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

详解CSS的规范及技巧

CSS在网页设计中经常使用,有很多朋友还是会写CSS,但是写出来的都不规范,不需要的css样式,可以简介的样式很多很多.     本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充. 一.使用css缩写     使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就

php简单压缩css样式示例_php技巧

本文实例讲述了php简单压缩css样式的方法.分享给大家供大家参考,具体如下: $css = ''; //找css目录 $root = $_SERVER['DOCUMENT_ROOT'].'/css/'; //directory where the css lives $files = explode(',',$_SERVER['QUERY_STRING']); if(sizeof($files)) { foreach($files as $file) { $css.= (is_file($ro

CSS的优化与技巧

css|技巧|优化 使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述.二.明确定义单位,除非值为0忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格.三.区分大小写当在X

网站建设网页设计小技巧分享

网站建设网页设计小技巧分享.在网站建设的过程中我们会遇到很多问题,我们也会去解决各类问题.无论是网站设计还是代码编写.今天针对网站建设过程中我们会遇到的一些小问题,并给出一些简单的解决办法. Ie6不支持Png格式下的透明.效果图如下: 应用解析:有不少人都会对LOGO进行透明处理以融入head部分的渐变背景. 解决方案:采用JS代码实现或CSS滤镜功能,当然问题也存在部分,导致图片质成像量不高. 小技巧1:将透明的LOGO用高于IE6的浏览器打开网页,然后采用FF的PearlCrescentP

word怎样转换成pdf技巧分享

word怎样转换成pdf技巧分享 现在大家的电脑上经常会准备一款pdf文件阅读工具,用来方便pdf文件内容的浏览,而在工作的时候,大家经常需要将各种办公文件制作成pdf文档,就比如将word文件转换成pdf,可是word怎样转换成pdf呢? 对于文件转换问题,小编有非常丰富的经验,这里小编就为大家介绍两种word文件转换成pdf文件方法,希望大家能够轻松解决文件转换问题,加快工作效率. (一)在线版word转换成pdf方法 图片1 迅捷在线PDF转换器是国内首个支持多文件格式转换的转换平台,支持

切图技巧分享—圆角背景色

原文:切图技巧分享-圆角背景色 一.设计稿 要实现下面这样一个效果,本文重点说的是下面"自动续费,可随时取消"这部分的实现. 我把问题简化一下,变成了 二.解决问题的思路 1.p标签加背景色 一般,很容易想到用p标签实现,代码如下: <style type="text/css"> .box { width: 154px; height: 90px; float: left; border: 1px solid #bfbfbf; border-radius

CSS writing-mode 的特别技巧

本文讲的是CSS writing-mode 的特别技巧, 最近在 Opera inspector 中编辑 CSS 时,我第一次注意到有一个名为 writing-mode 的 css 属性.经过一番搜索,发现它是用于垂直排版的语言,比如中文或者日文.然而,有趣的是如果我们把它用在英语中,可以很方便的创建垂直文本. writing-mode 属性定义了文字在文文字块中垂直或者水平方向,参考MDN. 默认的书写模式 支持这一属性的浏览器默认将这一属性设置为 horizontal-tb .这将作用于水平