5.9心得
1、margin属性值所指方向
Hazlewood：显然，XML在结构化表述数据上更好。XML
文档中包含更多的信息，类型在XML文档中表述会更有
效。XML非常适合数据交换，但易用性方面却使用开发
者犹豫了。JSON用肉眼就可以检查。XML在设计上更复
杂。JSON是非常简单的语法。谈到语言设计，JSON只构
建了一小部分的核心元素，而且一切都源于这一小部分
元素。因为它的简单性，它很容易操作，也很容易理解
。与XML相比，JSON并不是很适合机器消化信息。从这
点来看，XML就会做的更好。
margin属性可以决定很多HTML元素的宽高度,因而在布
局方面也能够有很重要的作用
2、双标签、单标签有哪些
双标签：
<html><head><title><body><table><tr><td><span><
p><form><h1><h2><h3><h4><h5><h6><object><style>
<b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>
3、相对长度em怎么用
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
所以我们在写em的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位
；
3. 重新计算那些被放大的字体的em数值。避免字体大
小的重复声明。
rem是CSS3新增的一个相对单位（root em，根em），这
个单位引起了广泛关注。这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对
大小，但相对的只是HTML根元素。这个单位可谓集相对
大小和绝对大小的优点于一身，通过它既可以做到只修
改根元素就成比例地调整所有字体大小，又可以避免字
体大小逐层复合的连锁反应。目前，除了IE8及更早版
本外，所有浏览器均已支持rem。
px单位名称为像素，相对长度单位，像素（px）是相对
于显示器屏幕分辨率而言的国内推荐；
em单位名称为相对长度单位。相对于当前对象内文本的
字体尺寸，国外使用比较多；扩展阅读：html em标
签,html em强调标签
pt单位名称为点（Point），绝对长度单位一般老版本
的table使用长度大小单位但是现在基本上没有使用。
html单位简短介绍：
Px 像素Pixel；相对长度单位。
Pt 点（Point）；绝对长度单位
Em 相对长度单位，这里em与html <em>标签的"EM"拼
写完全相同，而这里em作为单独文本单位。
1. 以前IE无法调整那些使用px作为单位的字体大小,但
现在几乎IE都支持 在这里也推荐使用PX作为单位;
2. 国外的大部分网站能够调整的原因在于其使用了em
作为字体单位;
3. Firefox能够调整px和em，但是96%以上的中国网民
使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示
器屏幕分辨率而言的，QQ截图也是使用PX作为长度宽度
单位。
em是相对长度单位。相对于当前对象内文本的字体尺寸
。如当前对行内文本的字体尺寸未被人为设置，则相对
于浏览器的默认字体尺寸。
4、不同浏览器的兼容性
所谓的浏览器兼容性问题，是指因为不同的浏览器对同
一段代码有不同的解析，造成页面显示效果不统一的情
况。在大多数情况下，我们的需求是，无论用户用什么
浏览器来查看我们的网站或者登陆我们的系统，都应该
是统一的显示效果。所以浏览器的兼容性问题是前端开
发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为
两类：
第一类是精确按照设计图开发的前端开发人员，可以说
是精确到1px的，他们很容易就会发现设计图的不足，
并且在很少的情况下会碰到浏览器的兼容性问题，而这
些问题往往都死浏览器的bug，并且他们制作的页面后
期易维护，代码重用问题少，可以说是比较牢固放心的
代码。
第二类是基本按照设计图来开发的前端开发人员，很多
细枝末节差距很大，不如间距，行高，图片位置等等经
常会差几px。某种效果的实现也是反复调试得到，具体
为什么出现这种效果还模模糊糊，整体布局十分脆弱。
稍有改动就乱七八糟。代码为什么这么写还不知所以然
。这类开发人员往往经常为兼容性问题所困。修改好了
这个浏览器又乱了另一个浏览器。改来改去也毫无头绪
。其实他们碰到的兼容性问题大部分不应该归咎于浏览
器，而是他们的技术本身了。
文章主要针对的是第一类，严谨型的开发人员，因此这
里主要从浏览器解析差异的角度来分析兼容性问题。（
相关文章推荐：主流浏览器CSS 3和HTML 5兼容清单）
浏览器兼容问题一：不同浏览器的标签默认的外补丁和
内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，
各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容
性问题，几乎所有的CSS文件开头都会用通配符*来设置
各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的
margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布
局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入
display:inline;将其转化为行内属性
备注：我们最常用的就是div+CSS布局了，而div就是一
个典型的块属性标签，横向布局的时候我们通常都是用
div float实现的，横向的间距设置如果用margin实现
，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px
），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，
超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或
者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签
里。出现这个问题的原因是IE8之前的浏览器都会给标
签一个最小默认的行高的高度。即使你的标签是空的，
这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置
display:block后采用float布局，又有横行的margin
的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入
display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置
display:block;(除了input标签比较特殊)。在用
float布局并有横向的margin后，在IE6下，他就具有了
块属性float后的横向margin的bug。不过因为它本身就
是行内属性标签，所以我们再加上display:inline的话
，它的高宽就不可设了。这时候我们还需要在
display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器
会有默认的间距，加了问题一中提到的通配符也不起作
用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出
容器宽度，img标签都会排在一行里，但是部分浏览器
的img标签之间会有个间距。去掉这个间距使用float是
正道。（我的一个学生使用负margin，虽然能解决，但
负margin本身就是容易引起浏览器兼容问题的用法，所
以我禁止他们使用）
浏览器兼容问题六：标签最低高度设置min-height不兼
容
问题症状：因为min-height本身就是一个不兼容的CSS
属性，所以设置min-height时不能很好的被各个浏览器
兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px
，需要进行的设置为：{min-height:200px;
height:auto !important; height:200px;
overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种
需求。当内容小于一个值（如300px）时。容器的高度
为300px；当内容高度大于这个值时，容器高度被撑高
，而不是出现滚动条。这时候我们就会面临这个兼容性
问题。
浏览器兼容问题七：透明度的兼容CSS设置
做兼容页面的方法是：每写一小段代码（布局中的一行
或者一块）我们都要在不同的浏览器中看是否兼容，当
然熟练到一定的程度就没这么麻烦了。建议经常会碰到
兼容性问题的新手使用。很多兼容性问题都是因为浏览
器对标签的默认属性解析不同造成的，只要我们稍加设
置都能轻松地解决这些兼容问题。如果我们熟悉标签的
默认属性的话，就能很好的理解为什么会出现兼容问题
以及怎么去解决这些兼容问题。
/* CSS hack*/
使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游
；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
IE6浏览器在读到height:300px的时候会认为高时
300px；继续往下读，他也认识*heihgt， 所以当IE6读
到*height:200px的时候会覆盖掉前一条的相冲突设置
，认为高度是200px。继续往下读，IE6还认识_height,
所以他又会覆盖掉200px高的设置，把高度设置为100px
；
IE7和遨游也是一样的从高度300px的设置往下读。当它
们读到*height200px的时候就停下了，因为它们不认识
_height。所以它们会把高度解析为200px，剩下的浏览
器只认识第一个height:300px;所以他们会把高度解析
为300px。因为优先级相同且想冲突的属性设置后一个
会覆盖掉前一个，所以书写的次序是很重要的。
