HTML常见问题

一、外边距，margin：

　　垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距的重叠

　　所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。

　　　　.box1{margin-bottom:10px;}

　　　　.box2{margin-top:20px;}    // .box1和.box2中间的外边距 取最大值：20px。

　　　　<div class='box1'></div>

　　　　<div class='box2'></div>

　　如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

　　.box4{margin-top:20px;}    // 这样设置会导致 .box3 的box向下移动20px

　　　　<div class='box3'>

　　　　　　<div class='box4'></div>

　　　　</div>

　　　　解决方法：

　　　　//设置一个元素隔开box3和box4：margin-top:1px   或者   padding-top:1px;

　　　　1.  .box3{border-top:1px;height:79px}

　　　　　　.box4{margin-top:20px; }  //   margin会依据box3的border向下移动20px

　　　　2.  .box3{padding-top:20px;height:60px;}   //  为了防止box3盒子增高，需要把原来box3盒子的高度减去20px。

　  二、浏览器为了让用户预览有更好的体验，默认给一些标签加上了 margin 和 padding

　　　　我们可以在编写代码的时候，把这个标签的 margin 和 padding 去除

　　　　* { margin：0；padding：0；}   //  使用通配符去除所有标签相关的内外边距

　  三、display 和visibility区别：

　　display：none / inline / block / inline-block；  //  如果选择none 该区域会被隐藏并且不占用空间

　　visibility：visible / hidden；  //  如果选择 hidden 该区域内容会被隐藏，但空间还会被占用

　四、overflow  文档溢出

　　overflow：visible / hidden / scroll / auto；  //  当子元素过大溢出父元素时，可用overflow属性，会自动把溢出的文档隐藏　　　

五、使用 float 浮动，经常会导致页面中父元素高度塌陷

　　方案一：

　　1.可开启隐藏属性：BFC，将高度塌陷的元素的 overflow 设置为一个非 visible 的值

　　　　　overflow：auto / hidden；  //   针对于 常用浏览器，ie6不支持

　　2. IE6 中 有另外一个隐藏属性 hasLayout ，使用 zoom：1可开启，设置 width 也会开启。

　　　　zoom：1；   // zoom 表示放大的意思，后面跟着的数值，就是将元素放大几倍，zoom：1表示不放大元素。

　　方案二：

　　1. clear 可以用来清除其他浮动元素对当前元素的影响

　　　　　　可选值：

　　　　　　none，默认值，不清除浮动

　　　　　　left，清除左侧浮动元素对当前元素的影响

　　　　　　right，清除右侧浮动元素对当前元素的影响

　　　　　　both，清除两侧浮动元素对当前元素影响最大的浮动

　　2. 直接在高度塌陷的父元素的最后，添加一个空白的div，新添加的div是没有浮动的，所以可以撑开父元素的高度，

　　　然后在对其清除浮动，这样可以通过空白的div来撑开父元素的高度，基本没有副作用。

　　　缺点：使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构（W3C推荐方式）

　　3.通过after 伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，

　　　可以达到相同的效果，而且不会再页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

　　　　clearfix，既可以解决高度塌陷问题，也可以确保父元素和子元素的垂直外边距不会重叠

　　　　.clearfix:before，.clearfix:after{

　　　　　　content：' '；  //  添加一个内容

　　　　　　display：table；  // 转换为一个块元素

　　　　　　clear：both；  //  清除两侧的浮动

　　　　}

　　但是，在IE6中不支持after伪类，所以在IE6中还需要使用 hasLayout来处理。

　　　　　　.clearfix{

　　　　　　　　zoom:1;

　　　　　　}

六、IE6 中 对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示

　　　　解决方法：

　　　　　　1，可以使用png8来代替png24，即可解决问题，但使用png8代替png24以后，图片的清晰图会有所下降

　　　　　　2，使用 JavaScript 来解决该问题，需要向页面中引入一个外部的 JavaScript 文件

　　　　　　　　然后在写一下简单的JS代码，来处理该问题。

　　　　　　<div class='box2'></div>

　　　　　　<img src='img/3.png' />

　　　　　　<script  type='text/javascript' src='js/DD_belatedPNG_0.0.8a-min.js'></script>

　　　　　　<script>

　　　　　　　　DD_belatedPNG.fix(' div，img ')

　　　　　　</script>

七、有些特殊代码我们只需要在某些特殊的浏览器中执行，在其他浏览器中不需要执行，就可以使用 CSS Hack 解决该问题。

　　条件 Hack 只对 IE 浏览器有效，其他浏览器都会将他识别为注释，IE10 及以上浏览器不支持这种方式。

　　语法：

　　　　<！--[ if  IE  6 ] >

　　　　　　<p>该内容在IE6中不显示</p>

　　　　<！[ endif ]-- >

　　例如：在IE浏览器中使用和其他浏览器不一样的样式

　　　　<!--[ if   IE ] >

　　　　　　<link rel='stylesheet'  type='text/css' href='css/style-ie.css'>

　　　　<！[ end  if ]-->

八、base 标签可以设置所有 a 标签链接打开的状态

　　在 head 标签中加上  以下代码 ： <base   target=' _blank '  />

九、 浏览器内核

　　IE内核：Trident，国内很多的双核浏览器的其中一核就是 Trident（兼容模式）

　　　　代表：IE 、遨游、世界之窗浏览器、320极速浏览器、百度浏览器、猎豹安全浏览器

　　Gecko（firefox）

　　　　代表：火狐浏览器

　　webkit（Safari）

　　　　代表：傲游浏览器3、Apple Safari（Win/Mac/iPhone/iPad）、Android默认浏览器

　　blink / Chromium（chrome）

　　　　代表：谷歌浏览器，前期谷歌内核也是使用的 webkit ，后期谷歌在此基础上优化，就是现在的 blink

十、表格（table）

　　表格的标题（< caption ></ caption >）

　　跨行合并：rowspan

　　跨列合并：colspan

　　< table >

　　　　< caption > 表格标题 </ caption>

　　　　<tr>

　　　　　　<td colspan='2'> 跨行</td>

　　　　　　<td> 跨行</td>

　　　  </tr>

　　　  <tr>

　　　　　　<td> 跨行</td>

　　　  </tr>

　　</table>