CSS顶级技巧大放送，div+css布局必知

2024-10-23 15:46:15

字体大小使用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{}就证明写的过于详细了。更少的选择器会让你更容易的发现问题。

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

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; } 第二种看起来的确格式化,但是不会在阅读上有任何帮助.写在一行内可以让你更快的找到需要的部分. 以
jQuery技巧大放送学习jquery的朋友可以看下

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

一.系统盘的精简平时我们安装的系统中有很多的组件和服务是不需要的,平时根本就用不到,所以我们可以对XP(2000)的安装盘进行精简,去掉哪些对我们没有用的内容.这里我推荐使用"nlite",这个软件可以对各种2000.XP进行定制安装,最新版本是1.0 b6.安装前需要安装MicroSoft的.NET Framework,软件安装后可以选择简体中文,它提供的功能比较多,有"Service Pack整合"."修补程序包整合"."驱动整合
WindowsXP系统隐藏技巧大放送

在Windows中,操作系统自带的隐藏功能能帮助我们隐藏很多的文件,但是这只是针对文件的隐藏方法,如果我们要隐藏一些Windows XP操作系统的组件应该怎么办呢?现在我们就讲讲Windows XP下如何隐藏更多的隐私文件. 隐藏桌面用注册表隐藏桌面可以防止别人乱修改或者删除桌面图标. 在左编辑框里点法:"HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer",然后在右编辑框里空白处
Windows 功能互补技巧大放送

经常看到有朋友在论坛上诉苦说需要释放内存,其实如果你安装了Windows 2003的话,那么并不需要寻求那些需要注册才能长久使用的第三方内存管理软件.因为Windows 2003已经自带了一个名为Empty.exe的小程序,它可以用来释放某些应用程序在占用大量内存时不能及时释放的那部分资源,与那些第三方软件内存管理软件不同的是, Empty.exe不会强迫系统全部释放资源,而是仅仅释放必要的资源,这样就不会加重硬盘的负担了. Empty.exe的使用相当简单,命令格式如下: Empty.exe
CSS超级技巧大放送合集

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

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着"好东西要与人分享"的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜
升级Windows XP五则技巧超值大放送

电脑已经成为了人们日常生活工作学习的必需了,所以人们也就日渐地离不开它了,对于新手来说,如何使你的电脑用起来更加舒心,让你的电脑更加符合你自己的习惯呢?我们来看看以下技巧: 1.在记事本中自动记录文件的打开时间在记事本中,我们可以记录每次打开某个文本文件的时间,方法为:在该文件的第一行输入".LOG"(注意:必须大写!),然后换行开始正文.这样在每次打开了该文件之后在关闭时会自动在文件后面添加当前打开该文本的时间. 2.快速浏览脱机网页需要脱机浏览某个已经打开过的网页,传统的方式是
Bootstrap精简教程中秋大放送

bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: 用于生产环境的 Bootstrap 编译并压缩后的 CSS.JavaScript 和字体文件.不包含文档和源码文件. Bootstrap 源码 Less.JavaScript 和字体文件的源码,并且带有文档.需要 Less 编译器和一些设置工作. Sass 这是 Boots
瑞星2007正版序列号大放送

瑞星2007正版序列号最新序列号产品序列号:77PUHE-QPV6KB-ME6JS3-KM5200 用户安装ID:W28CYL3L84PR 产品序列号:V6LGRK-FGLDVL-3T49RL-V15200 用户安装ID:W15CF5MCFWRQ 产品序列号:TV3MI2-N6GTCG-LQL8S5-7L5200 用户安装ID:W1QC96MXA8L4 产品序列号:V5V0WL-NGFHWU-DT2VRM-N45200 用户安装ID:W15CV5M3GF6Q 52LDJG-Q9

CSS顶级技巧大放送，div+css布局必知

相关推荐

随机推荐