Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证。

  一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果能从刚开始学习书写Css的时候开始就注重Css使用的一些习惯性的要求,那在以后的项目开发中是很有帮助的。搜集了一些资料,也有一些自己的体会,一下是常用的一些Css使用Tips:

  1. 不确信、则验证。实际效果至上,不管自己认为效果是怎样,只有放在浏览器上验证之后才能保证无误。

  2. 测试时,先考虑高级、先进的浏览器,再考虑低级、兼容性差的浏览器。因为我们的代码更多的还是运行在那些优秀的浏览器的优秀的版本之上的,在这些浏览器上完美呈现之后再考虑更多的兼容性,应当是一种比较好的开发策略。

  3. 若用浮动实现布局,确保正确地清除了浮动。我是不喜欢使用浮动的,脱离常规的流,使用太多浮动的话,很容易导致自己都不知道写出来的样式会怎么呈现了。所以如果使用浮动,一定要确保清除。

  4. 不要依赖浏览器默认的字体设置,尽可能的明确设置你要使用到的字体样式。

  5. 为元素应用内边距或外边框来避免外边距重叠。

  6. 避免同时为元素指定明确的内边距/边框值与宽度/高度值。因为,若某元素需要固定的宽/高度,那么既可以用其子元素的外边距来撑大,也可以用其父元素的内边距来约束。

  7. 如果只是通过改变颜色来标注链接的话,你要考虑到那些色盲用户怎么办?所以做好的方法还是遵循给链接加下划线的用户习惯。链接规则的顺序可以通过“LoVe/HAte(爱/恨)”方法来记忆,依次为:link、visited、hover和active。若还要考虑:focus伪类,则该规则为LVHFA。

  8. 避免IE6的“无样式内容瞬间”现象。使用@import语句引入外部样式表,可能会在IE6中出现“无样式内容瞬间”现象,可以通过使用link链接样式表,或者在页面上添加script元素来避免这个问题。HTML文档中几乎可以不用考虑用@import导入样式表的方法,因为这种方法是为了兼容Netscape Navigator 4,而这种浏览器几乎绝迹。

  9. 不要依靠min-width/min-height属性。IE/Win平台上的IE并不支持这两个属性,但它在某些情况下却把width和height属性认为是min-width或min-height属性。因此,借助于一些只为Windows平台上的IE设计的过滤规则,我们用width和height属性也可以实现min-width或min-height的效果。

  10. 为非零值标明单位,这是一个很好的习惯。如果某一天需求修改这个值不是零了,那你还记得它的单位才好。

  11. 一个开发习惯:测试时采用嵌入样式,发布时再改为外部输入。

  12. 指定图片路径时不要用单引号。

  13. 尝试减少百分比值。浏览器计算的舍入误差有时会让50%+50%等于100.1%,导致布局被破坏。这时请尝试略为减少百分比的值,例如将50%改为49.9%。

  14. 使用!important来声明不允许被覆盖的规则,如h3{color:red !important;},但由于IE不支持它,所以现在更多的是作为CSS HACK来使用。

CSS:CSS使用Tips的更多相关文章

  1. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  2. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  3. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  4. 一日一练-CSS CSS中percentage百分值的使用

    子曰:学好百分值,考试考百分 首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计. 定位(Positioning ...

  5. [CSS] css的background及多背景设置

    问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...

  6. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  7. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  8. css -- css选择器

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  9. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  10. css css预处理器

    CSS预处理器(css preprocessor) 1.less: 2.sass: 3.scss: 4.stylus 参考: http://hao.jser.com/archive/2507/ htt ...

随机推荐

  1. com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK assets/com.xx.xx

    完整的Error 信息(关键部分) Error:Execution failed for task ':fanwe_o2o_47_mgxz_dingzhi:transformResourcesWith ...

  2. 一次 Oracle 算出运算溢出问题 排查解决 (并非除数为零!)

    前段时间 出现过这个问题,: 表中有一列为number类型 rec_recordlength (两个时间的间隔长度/秒) 部分数据 统计这个字段就会出现 "算出运算溢出" 错误,很 ...

  3. Java面试(1)-- Java逻辑运算符

    class Demo04{ public static void main(String[] args){ //逻辑运算符 //例1 System.out.println(true | false & ...

  4. WCF学习之旅——第一个WCF示例(二)

    第四步:通过自我寄宿的方式寄宿服务 WCF服务需要依存一个运行着的进程(宿主),服务寄宿就是为服务指定一个宿主的过程.WCF是一个基于消息的通信框架,采用基于终结点(Endpoint)的通信手段. 终 ...

  5. 基于ReactCSSTransitionGroup实现react-router过渡动画

      此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...

  6. 解决升级Win 10 IP 10122后无法调试UAP应用的方法

    可能各位也像老周一样,第一时间升级了Build 10122,但不知道大家有没有发现,当你升级后,写一个UAP应用,要调试运行时,就会出错,错误如下: DEP0730 : 注册应用程序失败,因为目标计算 ...

  7. datatable去重

    两种方法1 数据库直接去除重复select distinct * from 表名去除了重复行distinct 2 对 DataTable直接进行操作DataTable dt=db.GetDt(&quo ...

  8. AngularJS之指令中controller与link(十二)

    前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...

  9. Python深入06 Python的内存管理

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的 ...

  10. 基于讯飞语音API应用开发之——离线词典构建

    最近实习在做一个跟语音相关的项目,就在度娘上搜索了很多关于语音的API,顺藤摸瓜找到了科大讯飞,虽然度娘自家也有语音识别.语义理解这块,但感觉应该不是很好用,毕竟之前用过百度地图的API,有问题也找不 ...