1.注意对图片设置宽高和转化为块
2.文字超出的设置
3.空白部分用空div来设置
4.做之前考虑重用,重用部分命名不要和内容相关 尽量公共(comWidth area small big img list txt box line)
5.需要复写的地方再加上一个class用后面的class复盖前面的样式
6.多个class的运用 fl fr clearFix
7.h1-h6不会继承父级样式需要设置大小和字体family
8.图片列表左浮动 margin-right时 给最外层DIV固定宽度 overflow:hiden解决掉下来的问题
9.li里可以嵌套DIV
10. 负margin能解决看起来需要定位的问题
11.input里居中用padding来挤 line-height不靠谱
12.超长页面 注释不可少

<--2014 1 13补充-->

13.列表前的图标用<i></i>标签包起来，而不给li加背景，个人理解方便css sprite (可以个i标签宽高)

14 css sprite规划

参考新浪微博

将图标放在一个图片里 从坐到右边的顺序做好分类

15带有中线的HTML结构的写法

书写CSS需要注意的地方的更多相关文章

  1. create-react-app 构建的项目使用 css module 方式来书写 css

    先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...

  2. 展望未来：使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  3. 更愉快的书写CSS

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  4. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  5. 书写Css文件要点

    1. 自定义样式名 实例1:<style type="text/css"> input.ng-invalid{ // .号一定要在对应的元素名后面, 没有空格 colo ...

  6. css中奇怪的地方

    1.border-color      继承内部元素前景色(color:black.可能对元素本身没有效果) 2.border-style:none;//不仅样式没了,border-width也变为0 ...

  7. css需要注意的地方

    如果一个元素设置了postion:abslute;top:20;botoom:20因为设置了top又设置了botoom所以元素会有高度.

  8. 一些css书写的小技巧

    一.css顺序 首先声明,浏览器读取css的方式是从上到下的.我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的 ...

  9. CSS书写规范与理论

    前端体系的变化可谓是日新月异,短短一年时间,从理论.框架.构建工具.甚至开发语言都发生非常大的变化. 随着新项目就即将启动,我抽时间回顾了一下以往项目的前端架构,零零散散产生了许多想法,尽量一一记录下 ...

随机推荐

  1. 打造万能的ListView GridView 适配器

    转载:http://blog.csdn.net/lmj623565791/article/details/38902805/ 通用的ViewHolder 首先分析下ViewHolder的作用,通过co ...

  2. Microsoft Visual Studio Web 创作组件安装失败的解决方法

    在网上查一下说是Office2007的问题.我把Office2007卸载了还是不行. 然后用Windows Install Clean Up工具清理,还是不行. 郁闷了.然后在安装包中的下面路径下找到 ...

  3. 组建自动化工具Ant

    组建自动化工具Ant Ant可以帮助我们自动化的完成项目的构建 下面是维基百科对Ant的介绍:http://zh.wikipedia.org/wiki/Apache_Ant Apache Ant,是一 ...

  4. 软件推荐列表（Recommand Software）

    1.Nutstore(https://jianguoyun.com/) Nutstore是一款云端同步软件.类似的有微软的OneDrive(旧名SkyDrive).Google Cloud Drive ...

  5. [转]32位和64位系统区别及int字节数

    一)64位系统和32位有什么区别? 1.64bit CPU拥有更大的寻址能力,最大支持到16GB内存,而32bit只支持4G内存 2.64位CPU一次可提取64位数据,比32位提高了一倍,理论上性能会 ...

  6. Map/Reduce中Join查询实现

    张表,分别较data.txt和info.txt,字段之间以/t划分. data.txt内容如下: 201001    1003    abc 201002    1005    def 201003  ...

  7. 创建被访问的swf文件

    首先创建一个fla文件,名字叫movie.fla,在该文件库中放一个mc, 并将其拖放到舞台上,然后 命名为test_mc, 然后在库中给该mc绑定一个类,类名随意. 创建访问swf文件的swf文件 ...

  8. erlang 常用函数

    os:getpid() 获得erl.exe的进程表示符 application:start(appname,    Type), Type == permanent 表示一个应用死了,其它应用全部死掉 ...

  9. IE浏览器 json异常

    当使用json数据结构时,如果对象数组最后一个元素后面依然跟一个“,”,在非IE浏览器下运行正常,但是,在IE浏览器上,则会报错. 如果使用for循环遍历对象数组时,由于后面多了一个分割符" ...

  10. Jtemplates 基本语法

    jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据集时发愁了. 首先送上jTtemplates的官网地址:http://jtemplates.tpy ...