资讯频道 → Web前端
阅读更多

6顶
1踩

Web前端

转载新闻 前端工程师必看：十大CSS技巧

2014-01-06 13:31 by 见习编辑 tuhaihe 评论(2) 有16912人浏览
css firebug firefox jquery
这里总结的CSS技巧，对前端工程师有很大的帮助，虽然这些技巧都很基本，但如果你或你的团队还不太了解或还没开始使用，可以参考下面文章介绍的内容。

1. 用 firebug 或 console 来调试

在 Firefox 还没有推出 Developer Tools 时，大家一定是用 Firebug 来调试，2006 年 Firebug 第一版 release 出来，让 web 开发者可以更快速的了解网站调试，也可以通过 Firebug 来了解网站的性能。但是现今，Firefox 推出了自家 Developer Tools，而Chrome 也是有很多好用的 技巧 及强大的 Workspace，对 Workspace 不熟悉的，可以参考原文作者文章：Coding on workspace of Chrome Developer tools。

2. Float 或 Inline-Block css



先来看看范例1，中间有三个 column，分别用 float: left 方式来排列： 
<div class="wrapper">
    <div class="column">test</div>
    <div class="column">test</div>
    <div class="column">test</div>
</div>

CSS 写法： 
.wrapper {
    width: 400px;
    min-height: 50px;
    background-color: red;
}
 
.column {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: 20px;
}

会发现背景红色 .wrapper 区块被砍了一半，原因就是没使用 clear: both，正确解法请看范例2，如果不是用此解法，也可以将 float 取代成 display: inline-block，解法请看范例3。上述两种解法是最常见的，终极解法可以通过 pseudo-class :after 来解决此问题。

3. 用 CSS animation 取代 Javascript

原文作者写了一篇 CSS3 Transitions to replace JavaScript animations 文章，就是要告诉前端工程师尽可能将原本使用的 jQuery animation 取代成 CSS 作法，原因在于 CSS animation 的性能远大于 JavaScript Native Language 性能，请参考http://www.cssanimate.com/ 网站。

4. Form 表单请使用 Label input



上面的例子，只要点选 Name 或 Email 会发现浏览器光标自然会移动到 text input 字段上，设置方式很简单，只要将 label 的 for attribute 设置为 input id 即可： 
<label for="username">Name:</label><input type="text" id="username" />
<label for="email">Email:</label><input type="text" id="email" />

5. 性能：Spiriting everything

每个网站一定会有很多小 icon 图，不管是直接使用在 html 或者是写在 CSS 内，在网络传输的时候，如果 10 张 icon 就会建立 10 条 connection，然而 css_spite 就是解决了此问题，将所有的小图集结成一张大图，通过 css 设置来减少网络连接数，网络上很多工具来达成此目的，像是 CSS Sprite Generator，如果熟悉 Compass 工具，可以直接使用 Spriting with Compass： 
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
 
.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

6. 不要直接修改 image width 和 height 属性

这点其实蛮重要的，现在网站架构的瓶颈，说实在的 80% 以上都是在读取图片文件，有时候 UI 设计师切出一张大图，前端工程师拿去使用，结果图文件很大，工程师就直接通过 css width height 修改图片大小，这样看起来是没问题，但是网站就开始很慢，使用者开始不爽，网站自然就不会有人继续用。正确方式就是将 image resize 成各种版本，可以直接参考这篇 Tools for image optimization：

7. 使用 max width 和 height 来调整 image 比例

这招其实还蛮好用的，我们先来看看例子：



我们看到这张图本来的比例大小为宽 228 高 320，但是经过下面 CSS 语法 
img {
    width: 228px;
    height: 228px;
}

图片就变成上述的例子，但是如果我们把 CSS 改成底下呢： 
img {
    max-width: 228px;
    max-height: 228px;
}

出来的结果就是：



8. 善用 :before 和 :after

在前面有提到 float: left 后要加上一个 element clear: both 现在我们可以通过 :after 来解决这问题（示例地址）： 



.wrapper:after {
    content: ' ';
    clear:both;
    display:block;
}

9. 减少 CSS 程序代码

这部份就是减少不必要的程序代码 
.class {
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
}

可以写成 
.class {
    margin:5px 10px 15px 20px;
}

CSS color 部分 #RRGGBB 可以写成 #RGB

10. 使用 SASS 或 Compass

团队内尚未使用 SASS 或 Compass 吗？个人建议尽快使用这两套工具，还不熟悉这两套工具，建议将底下幻灯片看完：

原文： KidsIL Blog / 编译：wu-boy
  • 大小: 7.9 KB
  • 大小: 9.2 KB
  • 大小: 65.8 KB
  • 大小: 24.7 KB
  • 大小: 7.2 KB
6
顶
1
踩
评论 共 2 条 请登录后发表评论
2 楼 codeboy_wang 2014-01-08 16:16
1 楼 LAST 2014-01-08 13:44
  • [*][*]
    " target="_blank">" />" target="_blank">" wmode="" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="200">
    • [/list]

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • web前端开发工程师必会12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧，一般人我可不告诉他哦。 　使用 :not() 在菜单上应用/取消应用边框 　给body添加行高 　所有一切都垂直居中 　逗号分隔的列表 　使用负的 nth-child 选择项目 　对图标使用SVG 　优化显示文本 ...

  • 前端工程师必备的css3动画技巧(附源码)

    本文是笔者之前文章用css3实现惊艳面试官的背景即背景动画（高级附源码）的续篇也是介绍css3技巧的文章，因为css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。...

  • 每个前端工程师都应该懂的前端性能优化总结：

    文章目录采用css雪碧图（css sprite/css图片精灵）技术在项目中，我们最好把css或者js文件进行合并或者压缩，尤其是在移动端开发的时候，如果css或者j s内容不是很多，我们可以采用内嵌式，以此减少http的请求次数，...

  • 前端工程师分享几个CSS技巧

    转自：http://www.pinlue.com/article/2020/07/1012/0511007194002.html

  • 前端开发工程师css样式进阶指南

    原因，解决方法是什么，常用 hack 的技巧 ？ png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8. 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一 IE 下,可以...

  • frontend-engineer-interviews:准备前端工程师面试的技巧

    准备前端工程师面试的技巧 数据结构与算法 图形（WIP） Java脚本 HTML，CSS和JS 您必须能够执行任何操作，而不必依赖任何特定的库 设计 倒计时 拖放 自动完成 星空小工具 进度条 轮播滚动 工具提示 模态 移动元素 ...

  • CSS高级技巧:网页布局

    上一篇CSS教程 文章：CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用...

  • 前端工程师的成长之路：技术探索与职业发展

    前端工程师的成长之路是一个不断学习、探索和挑战的过程。通过打造稳固的技术基础，持续学习和探索新技术，培养良好的沟通和团队合作能力，以及持续发展和职业规划，我们可以在前端工程师的职业生涯中不断成长和迈向...

  • Web前端工程师修炼之道

    资源名称：Web前端工程师修炼之道内容简介：你是否也曾想过自己创建网页，但却苦于没有经验？那么从现在开始学习吧！本书由浅入深地讲解了Web设计的一些重要概念、基本原理，以及HTML、CSS和Javaｓｃｒｉｐｔ的具体...

  • Kali与编程：WEB前端开发工程师成长之路

    一、学完本课程，您将掌握： 掌握WEB前端开发技巧 掌握HTML\CSS\JS开发技巧 &nbsp; &nbsp; &nbsp; 二、适合人群： 1.零基础大学生&nbsp; 2.前端开发的学员 三、学习计划： 建议每天抽出2小时学习，多敲多打多练，...

  • 后端工程师必学的前端 css 知识

    后端工程师虽然大部分工作都是跟服务器缓存数据库打交道，但有时也需要写一些前端代码。 有些公司的OAM后台基本是由后端工程师承包的，所以前端基础知识是必须要掌握的；就算开发中不直接写前段代码，了解前端知识...

  • 资深前端开发工程师分享：关于前端学习路线的一些建议

    对于刚开始学习前端的伙伴俩说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇...

  • 5个技巧助你成为 CSS 大神

    作为一名前端工程师，经常在写完 HTML 以后，才觉得真正的噩梦要开始了，啊，写 CSS 的时候，面对满屏乱飞的组件，真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有...

  • 使用浏览器调试前端的必备技巧

    关于Console中的技巧： 1、 DOM操作 chrome会帮你buffer 5个你查看过的DOM对象，你可以直接在Console中用 $0, $1, $2, $3, $4来访问。 可以使用像jQuery那样的语法来获得DOM对象，如： $("#mydiv")。 ...

  • 零基础入门前端工程师必备书籍推荐

    零基础自学前端的过程中看书是必不可少的，多看书能帮助你打牢基础、稳固根基，有很多人问我前端工程师需要看一些什么书?尤其是零基础自学前端的新手，今天我就整理了一份书单推荐给大家。 1、《Web前端开发最佳实践...

  • HTML及CSS基础入门：web前端基础，看这一篇就够了

    这是一篇十分值得收藏的web前端基础文章，希望对看到的读者有所帮助。 web入门HTTP基础HTML文本标签1.块标签和内联标签2.标题标签3.段落标签4.内联标签`&lt;strong&gt;`5.内联标签`&lt;span&gt;`6.图片标签img插入...

  • css亮黄色_写给前端工程师的色彩常识：色彩三属性及其在CSS中的应用

    关注前端达人，与你共同进步大家好，本篇文章，笔者将给大家聊聊关于设计方面的一些常识，你也许会很奇怪的问，前端工程师有必要了解设计相关的常识吗？那我的答案就是十分有必要。因为我们这个工作岗位做的产品直接...

  • 高性能网站建设指南：前端工程师技能精髓

    全书内容丰富，主要包括减少HTTP请求、EdgeComputing技术、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭...

  • 前端工程师进阶指南

    前端工程师是当前和未来的重要职业之一，需要不断学习和提高自身技能，以应对不断变化的市场需求。无论是从基础知识的巩固和提高、深度技术的学习、团队协作和项目管理的能力、职业发展和学习规划等方面，前端工程师...

  • 基于GEC6818五子棋游戏GEC6818_Gomoku.zip

    五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

Global site tag (gtag.js) - Google Analytics