分类目录归档:CSS

都搞CSS3去了

让网站打开速度更快 加快域名dns解析

什么是TTL
TTL是IP协议包中的一个值,它告诉网络,数据包在网络中的时间是否太长而应被丢弃。有很多原因使包在一定时间内不能被传递到目的地。解决方法就是在一段时间后丢弃这个包,然后给发送者一个报文,由发送者决定是否要重发。TTL的初值通常是系统缺省值,是包头中的8位的域。TTL的最初设想是确定一个时间范围,超过此时间就把包丢弃。由于每个路由器都至少要把TTL域减一,TTL通常表示包在被丢弃前最多能经过的路由器个数。当记数到0时,路由器决定丢弃该包,并发送一个ICMP报文给最初的发送者。
其他不再赘述,发挥二的性格,我们直奔主题。
用户打开网站的整个流程中,DNS解析时第一环,当用户输入域名并敲回车后,windows系统调用DNS client,寻找到用户配置或者自动分配的DNS IP,之后就开始整个解析过程。
DNS解析,变快有意义吗?
有,呵呵,很多小型网站,DNS解析时间都接近0.5s,甚至我见过一个网站,需要1.2s才可以解析出结果的。这是个非常令人吃惊的数据,因为对于一般网站打开时间超过8s用户即将放弃访问,而对于电子商务网站,4s就是用户忍耐极限。而一般经过优化的小型网站,DNS解析时间都可以控制在200MS左右,而带宽在100M左右的网站,经过优化,DNS解析时间可以控制在50-100ms。
如何优化呢?
首先利用好TTL,因为要尽量多的让用户直接从运营商的DNS缓存中拿到A记录,这样才能保证最快,但是也要保证,当你的服务器出问题时,需要尽快的切换,所以,这个TTL设置也是有一些情况需要综合研究的。
1、 你肯定清楚,自己的服务器有没有多台或者备份。如无备份,那服务器宕机时,你只能生抗,所以,TTL时间对于你来说是越长越好,因为TTL短的目的是服务器发生问题时,可以及时切换,这个对于没有备份的网站基本利用不上。所以,你的TTL设置就是越长越好,当然了,也不能无限长,一般设置TTL 3600即可。
2、 如有备份或者多台服务器,会发生由于服务器宕机需要及时做切换,TTL时间越短,切换越及时,但是TTL时间越短,也就意味着运营商DNS经常缓存不住,一般用户,设置为TTL 600即可,如果对及时切换,要求特别苛刻的网站,设置TTL 120即可。
其次寻找足够热的域名解析商。很多网站,都是自己做一个域名解析服务器,看着自己掌控方便了,但是大错特错,因为你的域名解析服务器,基本上都不被缓存,每次从根服务器询问一圈,绕了大半个地球,才给出最后的结果,那自然会效果很差。所以,要寻找足够热的域名解析商。什么叫热,就是被访问的次数特别多。足够热的话,域名解析服务器的A记录基本上会被各地运营商的DNS一直缓存着。如何判断域名解析商够不够热呢?其实,也很简单,看看这个域名解析商的客户够不够多,他们客户网站够不够热门,访问的人够不够多。
也给大家推荐一个更好的方法,就是找CDN厂商做域名解析。因为CDN厂商服务的客户,有很多是很热很大用户群很多的,所以,这些CDN厂商的域名解析服务器,服务效果那是岗岗的好。
最后是进阶技巧—巧用CNAME。不少网站拥有者,在同样的一个或多个服务器上运营很多小网站;或者自己运营一个网站,但是拆分了很多个二级域名。针对这些情况,严重需要善用CNAME,把所有的这些小网站的域名或者二级域名,cname到一个自己定义的统一域名。然后设置这个cname对应的TTL时间足够长。这样的话,保证网站的第一次解析,可以直接从运营商的DNS缓存中拿到,也就是直接拿到cname后的记录。然后,第二个cname记录,再设置一个相对合理的TTL值。通过这样,变相加热了第二级域名,通过加热的第二级和缓存时间足够长的第一级,最大化的优化DNS解析时间。该技巧,一定要确保,最后A记录得到的IP,可以服务这些原始域名。
例子:
www.abc.com. 7200 IN CNAME hot.abc.com.
hot.abc.com. 600 IN A 127.0.0.1
什么叫拆分域名?
很多网站,在搭建网站的时候,只是申请和购买了一个域名,然后所有内容:图片、js、css、html、php等等,都放在一个域名下。
而拆分域名,指的就是根据不同的应用,而将域名拆分出来。
拆分域名有什么好处?
使用IE6和IE7内核的浏览器,针对同个域名,只会同时发起2个连接。
使用IE8内核的浏览器,针对同个域名,可以同时发起6个连接。
很重要吗?
非常重要,请看图示。
使用IE6打开一个所有内容均在同个域名下的网站

使用IE8打开一个所有内容均在同个域名下的网站

我们看到的是,在IE6的情况下,请求第7个元素,需要0.7s,而在IE8的情况下,0.277就开始请求第7个元素。
由此可以看到,并发连接更多的时候,网页打开速度会更快。

由以上数据可以看到,多个域名,不管是在IE6和IE8的情况下,拆分域名,都会使网站的打开速度变快。
现实中也是如此,新浪、淘宝等大型网站,他们无一不是在拆分域名。
另外,要纠正一个IT人的误区。因为IT人一般都热衷技术,很多人的操作系统等版本都很新,用的都是IE8甚至以上的浏览器。但是整个中国,到目前为止,使用IE6和IE7的用户,仍然非常另IT人震惊的80%左右。所以,拆分域名,基本上可以缩减你20%以上的打开速度。
一个简单的操作,就能带来巨大的效果提升,何乐不为?
当然了,肯定会有人问,拆分域名,那不就会导致域名热度不够,DNS缓存不住的问题吗?这个问题,请看我上一篇博文,已经给出了答案。
按照什么原则拆分域名呢?
个数多少合适?
一般50M以下网页类网站,域名保持在4、5个即可,过多后范围会导致你的维护和使用变得复杂。
100-500M以下网页类网站,域名保持在8-10个左右。
1G以上的网页类网站,域名无所谓个数,保持10个以上,具体个数根据自己的业务和管理特点随心制定。
什么内容放到同个域名下?
页面类:html、htm等
样式类:js、css等
图片类:jpg、png、gif等
动态类:php、asp等
这样的分配方式,将来有利于你进一步优化你的网站,并且在你需要寻找加速工具时,也可以针对性的选择不同的加速方式。

打印机现黄色感叹号,提示unknown device

问题:USB打印机连接电脑变成unknown devide
解决方法:禁用设备管理器的USB2 Enhanced Host Controller。
 
注解:USB2 Enhanced Host Controller
全称因主板不同而异,如: Intel(R) 7 Series/C216 Chipset Family USB Enhanced Host Controller – 1E26
这是 intel主板 的 南桥的USB驱动 ,每个都不一样, 对应不同的主板南桥型号 从后面的 1E26 1E27 等等的编号
 
另: 有可能是计算机静电引发。启用“SiS PCI to USB Enhanced Host Controller”设备,关机后对计算机进行静电释放,重新启动计算机,连接在计算机上的打印机和U盘很快被识别;
追注:计算机静电释放的正确方法:拔除主机上所有的连线(包括电源线,鼠标键盘线,显示器数据线,网线,外接设备连线等),按主机电源开关3-5次,每次按住开关一秒钟,中间间隔1-2秒。
 
 

PS快捷键大全

一、工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取)
矩形、椭圆选框工具 【M】
移动工具 【V】
套索、多边形套索、磁性套索 【L】
魔棒工具 【W】
裁剪工具 【C】
切片工具、切片选择工具 【K】
喷枪工具 【J】
画笔工具、铅笔工具 【B】
像皮图章、图案图章 【S】
历史画笔工具、艺术历史画笔 【Y】
像皮擦、背景擦除、魔术像皮擦 【E】
渐变工具、油漆桶工具 【G】
模糊、锐化、涂抹工具 【R】
减淡、加深、海棉工具 【O】
路径选择工具、直接选取工具 【A】
文字工具 【T】
钢笔、自由钢笔 【P】
矩形、圆边矩形、椭圆、多边形、直线 【U】
写字板、声音注释 【N】
吸管、颜色取样器、度量工具 【I】
抓手工具 【H】
缩放工具 【Z】
默认前景色和背景色 【D】
切换前景色和背景色 【X】
切换标准模式和快速蒙板模式 【Q】
标准屏幕模式、带有菜单栏的全屏模式、全屏模式 【F】
跳到ImageReady3.0中 【Ctrl】+【Shift】+【M】
临时使用移动工具 【Ctrl】
临时使用吸色工具 【Alt】
临时使用抓手工具 【空格】
快速输入工具选项(当前工具选项面板中至少有一个可调节数字) 【0】至【9】
循环选择画笔 【[】或【]】
建立新渐变(在”渐变编辑器”中) 【Ctrl】+【N】
二、文件操作
新建图形文件 【Ctrl】+【N】
打开已有的图像 【Ctrl】+【O】
打开为… 【Ctrl】+【Alt】+【O】
关闭当前图像 【Ctrl】+【W】
保存当前图像 【Ctrl】+【S】
另存为… 【Ctrl】+【Shift】+【S】
存储为网页用图形 【Ctrl】+【Alt】+【Shift】+【S】
页面设置 【Ctrl】+【Shift】+【P】
打印预览 【Ctrl】+【Alt】+【P】
打印 【Ctrl】+【P】
退出Photoshop 【Ctrl】+【Q】
三、编辑操作
还原/重做前一步操作 【Ctrl】+【Z】
一步一步向前还原 【Ctrl】+【Alt】+【Z】
一步一步向后重做 【Ctrl】+【Shift】+【Z】
淡入/淡出 【Ctrl】+【Shift】+【F】
剪切选取的图像或路径 【Ctrl】+【X】或【F2】
拷贝选取的图像或路径 【Ctrl】+【C】
合并拷贝 【Ctrl】+【Shift】+【C】
将剪贴板的内容粘到当前图形中 【Ctrl】+【V】或【F4】
将剪贴板的内容粘到选框中 【Ctrl】+【Shift】+【V】
自由变换 【Ctrl】+【T】
应用自由变换(在自由变换模式下) 【Enter】
从中心或对称点开始变换 (在自由变换模式下) 【Alt】
限制(在自由变换模式下) 【Shift】
扭曲(在自由变换模式下) 【Ctrl】
取消变形(在自由变换模式下) 【Esc】
自由变换复制的象素数据 【Ctrl】+【Shift】+【T】
再次变换复制的象素数据并建立一个副本 【Ctrl】+【Shift】+【Alt】+【T】
删除选框中的图案或选取的路径 【DEL】
用背景色填充所选区域或整个图层 【Ctrl】+【BackSpace】或【Ctrl】+【Del】
用前景色填充所选区域或整个图层 【Alt】+【BackSpace】或【Alt】+【Del】
弹出“填充”对话框 【Shift】+【BackSpace】
从历史记录中填充 【Alt】+【Ctrl】+【Backspace】
打开“颜色设置”对话框 【Ctrl】+【Shift】+【K】
打开“预先调整管理器”对话框 【Alt】+【E】放开后按【M】
预设画笔(在“预先调整管理器”对话框中) 【Ctrl】+【1】
预设颜色样式(在“预先调整管理器”对话框中) 【Ctrl】+【2】
预设渐变填充(在“预先调整管理器”对话框中) 【Ctrl】+【3】
预设图层效果(在“预先调整管理器”对话框中) 【Ctrl】+【4】
预设图案填充(在“预先调整管理器”对话框中) 【Ctrl】+【5】
预设轮廓线(在“预先调整管理器”对话框中) 【Ctrl】+【6】
预设定制矢量图形(在“预先调整管理器”对话框中) 【Ctrl】+【7】
打开“预置”对话框 【Ctrl】+【K】
显示最后一次显示的“预置”对话框 【Alt】+【Ctrl】+【K】
设置“常规”选项(在预置对话框中) 【Ctrl】+【1】
设置“存储文件”(在预置对话框中) 【Ctrl】+【2】
设置“显示和光标”(在预置对话框中) 【Ctrl】+【3】
设置“透明区域与色域”(在预置对话框中) 【Ctrl】+【4】
设置“单位与标尺”(在预置对话框中) 【Ctrl】+【5】
设置“参考线与网格”(在预置对话框中) 【Ctrl】+【6】
设置“增效工具与暂存盘”(在预置对话框中) 【Ctrl】+【7】
设置“内存与图像高速缓存”(在预置对话框中) 【Ctrl】+【8】
四、图像调整
调整色阶 【Ctrl】+【L】
自动调整色阶 【Ctrl】+【Shift】+【L】
自动调整对比度 【Ctrl】+【Alt】+【Shift】+【L】
打开曲线调整对话框 【Ctrl】+【M】
在所选通道的曲线上添加新的点(‘曲线’对话框中) 在图象中【Ctrl】加点按
在复合曲线以外的所有曲线上添加新的点(‘曲线’对话框中) 【Ctrl】+【Shift】加点按
移动所选点(‘曲线’对话框中) 【↑】/【↓】/【←】/【→】
以10点为增幅移动所选点以10点为增幅(‘曲线’对话框中) 【Shift】+【箭头】
选择多个控制点(‘曲线’对话框中) 【Shift】加点按
前移控制点(‘曲线’对话框中) 【Ctrl】+【Tab】
后移控制点(‘曲线’对话框中) 【Ctrl】+【Shift】+【Tab】
添加新的点(‘曲线’对话框中) 点按网格
删除点(‘曲线’对话框中) 【Ctrl】加点按点
取消选择所选通道上的所有点(‘曲线’对话框中) 【Ctrl】+【D】
使曲线网格更精细或更粗糙(‘曲线’对话框中) 【Alt】加点按网格
选择彩色通道(‘曲线’对话框中) 【Ctrl】+【~】
选择单色通道(‘曲线’对话框中) 【Ctrl】+【数字】
打开“色彩平衡”对话框 【Ctrl】+【B】
打开“色相/饱和度”对话框 【Ctrl】+【U】
全图调整(在色相/饱和度”对话框中) 【Ctrl】+【~】
只调整红色(在色相/饱和度”对话框中) 【Ctrl】+【1】
只调整黄色(在色相/饱和度”对话框中) 【Ctrl】+【2】
只调整绿色(在色相/饱和度”对话框中) 【Ctrl】+【3】
只调整青色(在色相/饱和度”对话框中) 【Ctrl】+【4】
只调整蓝色(在色相/饱和度”对话框中) 【Ctrl】+【5】
只调整洋红(在色相/饱和度”对话框中) 【Ctrl】+【6】
去色 【Ctrl】+【Shift】+【U】
反相 【Ctrl】+【I】
打开“抽取(Extract)”对话框 【Ctrl】+【Alt】+【X】
边缘增亮工具(在“抽取”对话框中) 【B】
填充工具(在“抽取”对话框中) 【G】
擦除工具(在“抽取”对话框中) 【E】
清除工具(在“抽取”对话框中) 【C】
边缘修饰工具(在“抽取”对话框中) 【T】
缩放工具(在“抽取”对话框中) 【Z】
抓手工具(在“抽取”对话框中) 【H】
改变显示模式(在“抽取”对话框中) 【F】
加大画笔大小(在“抽取”对话框中) 【]】
减小画笔大小(在“抽取”对话框中) 【[】
完全删除增亮线(在“抽取”对话框中) 【Alt】+【BackSpace】
增亮整个抽取对像(在“抽取”对话框中) 【Ctrl】+【BackSpace】
打开“液化(Liquify)”对话框 【Ctrl】+【Shift】+【X】
扭曲工具(在“液化”对话框中) 【W】
顺时针转动工具(在“液化”对话框中) 【R】
逆时针转动工具(在“液化”对话框中) 【L】
缩拢工具(在“液化”对话框中) 【P】
扩张工具(在“液化”对话框中) 【B】
反射工具(在“液化”对话框中) 【M】
重构工具(在“液化”对话框中) 【E】
冻结工具(在“液化”对话框中) 【F】
解冻工具(在“液化”对话框中) 【T】
应用“液化”效果并退回Photoshop主界面(在“液化”对话框中) 【Enter】
放弃“液化”效果并退回Photoshop主界面(在“液化”对话框中) 【ESC】
五、图层操作
从对话框新建一个图层 【Ctrl】+【Shift】+【N】
以默认选项建立一个新的图层 【Ctrl】+【Alt】+【Shift】+【N】
通过拷贝建立一个图层(无对话框) 【Ctrl】+【J】
从对话框建立一个通过拷贝的图层 【Ctrl】+【Alt】+【J】
通过剪切建立一个图层(无对话框) 【Ctrl】+【Shift】+【J】
从对话框建立一个通过剪切的图层 【Ctrl】+【Shift】+【Alt】+【J】
与前一图层编组 【Ctrl】+【G】
取消编组 【Ctrl】+【Shift】+【G】
将当前层下移一层 【Ctrl】+【[】
将当前层上移一层 【Ctrl】+【]】
将当前层移到最下面 【Ctrl】+【Shift】+【[】
将当前层移到最上面 【Ctrl】+【Shift】+【]】
激活下一个图层 【Alt】+【[】
激活上一个图层 【Alt】+【]】
激活底部图层 【Shift】+【Alt】+【[】
激活顶部图层 【Shift】+【Alt】+【]】
向下合并或合并联接图层 【Ctrl】+【E】
合并可见图层 【Ctrl】+【Shift】+【E】
盖印或盖印联接图层 【Ctrl】+【Alt】+【E】
盖印可见图层 【Ctrl】+【Alt】+【Shift】+【E】
调整当前图层的透明度(当前工具为无数字参数的,如移动工具) 【0】至【9】
保留当前图层的透明区域(开关) 【/】
使用预定义效果(在”效果”对话框中) 【Ctrl】+【1】
混合选项(在”效果”对话框中) 【Ctrl】+【2】
投影选项(在”效果”对话框中) 【Ctrl】+【3】
内部阴影(在”效果”对话框中) 【Ctrl】+【4】
外发光(在”效果”对话框中) 【Ctrl】+【5】
内发光(在”效果”对话框中) 【Ctrl】+【6】
斜面和浮雕(在”效果”对话框中) 【Ctrl】+【7】
轮廓(在”效果”对话框中) 【Ctrl】+【8】
材质(在”效果”对话框中) 【Ctrl】+【9】
六、图层混合模式
循环选择混合模式 【Shift】+【-】或【+】
正常Normal 【Shift】+【Alt】+【N】
溶解Dissolve 【Shift】+【Alt】+【I】
正片叠底Multiply 【Shift】+【Alt】+【M】
屏幕Screen 【Shift】+【Alt】+【S】
叠加Overlay 【Shift】+【Alt】+【O】
柔光Soft Light 【Shift】+【Alt】+【F】
强光Hard Light 【Shift】+【Alt】+【H】
颜色减淡Color Dodge 【Shift】+【Alt】+【D】
颜色加深Color Burn 【Shift】+【Alt】+【B】
变暗Darken 【Shift】+【Alt】+【K】
变亮Lighten 【Shift】+【Alt】+【G】
差值Difference 【Shift】+【Alt】+【E】
排除Exclusion 【Shift】+【Alt】+【X】
色相Hue 【Shift】+【Alt】+【U】
饱和度Saturation 【Shift】+【Alt】+【T】
颜色Color 【Shift】+【Alt】+【C】
光度Luminosity 【Shift】+【Alt】+【Y】
去色 海棉工具+【Shift】+【Alt】+【J】
加色 海棉工具+【Shift】+【Alt】+【A】
七、选择功能
全部选取 【Ctrl】+【A】
取消选择 【Ctrl】+【D】
重新选择 【Ctrl】+【Shift】+【D】
羽化选择 【Ctrl】+【Alt】+【D】
反向选择 【Ctrl】+【Shift】+【I】
载入选区 【Ctrl】+点按图层、路径、通道面板中的缩约图
滤镜
按上次的参数再做一次上次的滤镜 【Ctrl】+【F】
退去上次所做滤镜的效果 【Ctrl】+【Shift】+【F】
重复上次所做的滤镜(可调参数) 【Ctrl】+【Alt】+【F】
选择工具(在“3D变化”滤镜中) 【V】
直接选择工具(在“3D变化”滤镜中) 【A】
立方体工具(在“3D变化”滤镜中) 【M】
球体工具(在“3D变化”滤镜中) 【N】
柱体工具(在“3D变化”滤镜中) 【C】
添加锚点工具(在“3D变化”滤镜中) 【+】
减少锚点工具(在“3D变化”滤镜中) 【-】
轨迹球(在“3D变化”滤镜中) 【R】
全景相机工具(在“3D变化”滤镜中) 【E】
移动视图(在“3D变化”滤镜中) 【H】
缩放视图(在“3D变化”滤镜中) 【Z】
应用三维变形并退回到Photoshop主界面(在“3D变化”滤镜中) 【Enter】
放弃三维变形并退回到Photoshop主界面(在“3D变化”滤镜中) 【Esc】
八、视图操作
选择彩色通道 【Ctrl】+【~】
选择单色通道 【Ctrl】+【数字】
选择快速蒙板 【Ctrl】+【】
始终在视窗显示复合通道 【~】
以CMYK方式预览(开关) 【Ctrl】+【Y】
打开/关闭色域警告 【Ctrl】+【Shift】+【Y】
放大视图 【Ctrl】+【+】
缩小视图 【Ctrl】+【-】
满画布显示 【Ctrl】+【0】
实际象素显示 【Ctrl】+【Alt】+【0】
向上卷动一屏 【PageUp】
向下卷动一屏 【PageDown】
向左卷动一屏 【Ctrl】+【PageUp】
向右卷动一屏 【Ctrl】+【PageDown】
向上卷动10 个单位 【Shift】+【PageUp】
向下卷动10 个单位 【Shift】+【PageDown】
向左卷动10 个单位 【Shift】+【Ctrl】+【PageUp】
向右卷动10 个单位 【Shift】+【Ctrl】+【PageDown】
将视图移到左上角 【Home】
将视图移到右下角 【End】
显示/隐藏选择区域 【Ctrl】+【H】
显示/隐藏路径 【Ctrl】+【Shift】+【H】
显示/隐藏标尺 【Ctrl】+【R】
捕捉 【Ctrl】+【;】
锁定参考线 【Ctrl】+【Alt】+【;】
显示/隐藏“颜色”面板 【F6】
显示/隐藏“图层”面板 【F7】
显示/隐藏“信息”面板 【F8】
显示/隐藏“动作”面板 【F9】
显示/隐藏所有命令面板 【TAB】
显示或隐藏工具箱以外的所有调板 【Shift】+【TAB】
文字处理(在字体编辑模式中)
显示/隐藏“字符”面板 【Ctrl】+【T】
显示/隐藏“段落”面板 【Ctrl】+【M】
左对齐或顶对齐 【Ctrl】+【Shift】+【L】
中对齐 【Ctrl】+【Shift】+【C】
右对齐或底对齐 【Ctrl】+【Shift】+【R】
左/右选择 1 个字符 【Shift】+【←】/【→】
下/上选择 1 行 【Shift】+【↑】/【↓】
选择所有字符 【Ctrl】+【A】
显示/隐藏字体选取底纹 【Ctrl】+【H】
选择从插入点到鼠标点按点的字符 【Shift】加点按
左/右移动 1 个字符 【←】/【→】
下/上移动 1 行 【↑】/【↓】
左/右移动1个字 【Ctrl】+【←】/【→】
将所选文本的文字大小减小2 点象素 【Ctrl】+【Shift】+【<】
将所选文本的文字大小增大2 点象素 【Ctrl】+【Shift】+【>】
将所选文本的文字大小减小10 点象素 【Ctrl】+【Alt】+【Shift】+【<】
将所选文本的文字大小增大10 点象素 【Ctrl】+【Alt】+【Shift】+【>】
将行距减小2点象素 【Alt】+【↓】
将行距增大2点象素 【Alt】+【↑】
将基线位移减小2点象素 【Shift】+【Alt】+【↓】
将基线位移增加2点象素 【Shift】+【Alt】+【↑】
将字距微调或字距调整减小20/1000ems 【Alt】+【←】
将字距微调或字距调整增加20/1000ems 【Alt】+【→】
将字距微调或字距调整减小100/1000ems 【Ctrl】+【Alt】+【←】
将字距微调或字距调整增加100/1000ems 【Ctrl】+【Alt】+【→】

html块级元素和内联元素区别详解

块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素):
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用:
利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个:
display:block — 显示为块级元素
display:inline — 显示为内联元素
dipslay:inline-block — 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
我们常将

    元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

题外话:最近整理有关块级元素和内联元素区别的有关知识,网上找了不少相关的文章,发现大家的理解似乎都有误,我自己亲自测试了下,发现了不少的问题:
内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通过这4个属性来控制内联元素的宽度。
内联元素的内部也可以放块级元素标签,而且内部的块级元素标签会撑大外部的内联标签,所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素)
HTML元素嵌套表:
2011030508234661
 

前端之IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

小知识:什么是CSS hack
由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
 
各浏览器CSS hack兼容表:

IE6 IE7 IE8 Firefox Chrome Safari
!important Y Y
_ Y
* Y Y
*+ Y
9 Y Y Y
Y
nth-of-type(1) Y Y

代码示例:
#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red9; /* IE6、IE7、IE8支持 */
color:red; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
整体测试代码示例:
.test{
color:#000000;
color:#0000FF�;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}
其他说明:
1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。
3、还有其他写法,比如:
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:
http://www.w3.org/TR/html4/loose.dtd
5、顺序:Firefox、IE8、IE7、IE6依次排列。
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
二、万能 float 闭合
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.
<style>
/* Clear Fix */
.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
三、其他兼容技巧
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,
正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,
所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id=”box”> <div id=”left”></div> <div id=”right”></div></div>
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。
例:
<div id=”box”>
<p>p对象中的内容</p>
</div>
CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。