CSS顶级技巧大放送,div+css布局必知_经验交流

字体大小使用px

在一行内声明CSS
对比下面两个:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

h2 {
   font-size:18px;
   border:1px solid blue;
   color:#000;
   background-color:#FFF;
   }

第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。

以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用。一行看起来又爽快又省地方还能让文件更小。

分块书写代码
这样书写代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在。就像下面这样:

#content {float:left;}
   #content p { … }

#sidebar {float:left;}
   #sidebar p { … }

#footer {clear:both;}
   #sidebar p { … }

浏览器支持
只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。

我注意了一下网易新版主页的CSS,其中竟然一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。

包含浮动元素
所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。

理解Overflow
如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。

允许块元素自动填充空白

缩写CSS
很多人都margin-top、margin-right、margin-bottom、margin-left的用上一堆。其实这是最基本的,margin可以直接简写为margin:上 右 下 左值。可以在这里看到CSS缩写的总结。
避免不必要的选择器
把样式的选择器减少到最少。如果你发现自己不停的写ul li {}或者table tr td{}就证明写的过于详细了。更少的选择器会让你更容易的发现问题。

我没有完全翻译,而且其中还有很多我自己的话,呵呵。 

时间: 2024-10-03 21:37:43

CSS顶级技巧大放送,div+css布局必知_经验交流的相关文章

CSS独门技巧大放送

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

CSS的超级技巧大放送

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

网页标准化制作:CSS的超级技巧大放送

css|标准|技巧|网页 在之前贴出的CSS说明中已经说明了#m_blog div.tit是Blog文章标题的代码所以我们只要把添加>图片的代码添加在后面的{}中即可. 添加代码如下: line-height:多少px; 设置标题的高度,其实这里的设置为图片的高度就可以了 text-indent:多少px; 设置标题的文本前面空多少宽度,这里可以填图片的宽度,为了美观起见,可以再多+5.6px,因为图片和标题贴着不好看,这个主要还是看个人感觉和喜好设置了 background:url(图片地址)

css——之三行三列等高布局图文教程_经验交流

http://www.alistapart.com/articles/holygrail这个翻译的页面版权归greengnn所有,转载请注明出处 第一步:创建一个结构 xhtml开始于header, footer, and container <div id="header"></div> <div id="container"></div> <div id="footer"></

XP实用优化技巧大放送

  长期使用Windows XP的休眠功能,你会发现系统很快就会变得不稳定.这时最好按下Ctrl+Alt+Del,在弹出的"Windows任务管理器"窗口中点击"进程"选项卡,找到Explorer.exe文件,然后再点击窗口下方的"结束进程"按钮,不必理会此时Windows XP的反应.接着再切换到"应用程序"选项卡,点击下方的"新任务"按钮.在弹出的"创建新任务"对话框输入:Explo

jQuery技巧大放送

1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

Dreamweaver技巧大放送前六招

dreamweaver|技巧 以目前的情况来说,Dreamweaver 内建的功能可说是越作越多.越作越丰富.齐备.在这里我要向大家介绍的4.0版本中的一些应用小技巧. 1. 让网页页面更有弹性     有些网页开发者称以下要介绍的这种技巧为 liquid,我在这儿则把这种技巧叫做是 stretchy(弹性延伸的技巧).这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此若是窗口过大就不会有空白处.窗口过小边缘就不会跑出上下移动的拉Bar.其实大多数简单的网页会自己随着浏览器窗

Word中插入cad图的技巧大放送

在日常的工作中,大家可能会遇到写说明书之类的事情,像在word文件中插入我们绘制的cad 图,方法大体上有三种,但是它们达到的效果却并不相同,有的显得精致些,有的显得粗糙些,根据我们写作的目的还要进行相应的再处理,这个过程有一些技巧,现在把它写下来,希望能给读者朋友以启发. 比如,我们要在word文件中插入一个cad图,可以利用下面的三种方法来实现: 第一种,利用键盘上的"print screen sysrq"来抓取cad图,再通过系统自带的画图软件做进一步的修剪,去掉cad剪贴图中多

《快播》技巧大放送 不得不知的八个观影技巧

前言:iOS上可以观看在线和线下视频的播放器不在少数,而<快播>一直是最受苹果用户喜欢的播放器之一,但是各位在观影的同时有没有发现快播的几个小技巧呢?今天小编就总结了八大<快播>观影技巧,让<快播>更加便捷地为我们服务. 应用名称:Qvod快播 iPhone版:上架时间:2012年12月10日游戏价格:免费游戏大小:8.5MB一:如何上传电脑中的片源许多用户对于浏览器的使用都是下载会,而上传不会.其实把想看的片子上传到设备中非常简单,只需要每个苹果用户家中电脑都具备的i