CSS学习交流（二）

1、如何使用CSS实现垂直水平居中？

这是一道经典的问题，实现方法有很多种，以下是其中一种css方式实现：
html文件：

<div class="parent">
     <div class="content"></div>
</div>

css文件：

.parent{position:relative;}
.content{
    background-color:blue;
    width:200px;
    height:200px;
    position: absolute;        
    top: 50%;
    left: 50%;
    margin-top:-100px ;   
    margin-left: -100px;
}

为什么要把width和left减半？
首先对父元素top，left绝对定位在50%的位置，这时候只是子元素左上角居中，而中心点还没居中，加上 margin-top:-100px ; margin-left: -100px;利用负边距把图片的中心点位于父元素的中心点，从而实现垂直水平居中

2、CSS Hack

什么是CSS Hack？
一般来说就是为解决兼容性针对不同的浏览器写不同的CSS,就是 CSS Hack。
常见的浏览器兼容性问题
1、上边距
IE6 中 ， 上边距要比 其他浏览器大
解决方案：统一设置 body 的margin 和 padding 值
2、居中布局
IE 低版本中 text-align 可以通知所有的元素水平对齐方式(文本、行内、块级),其他版本则不行
解决方案：
外层元素 text-align
内层元素 添加 margin:auto
3、元素高度问题
如果内容超出了元素定义的高度时候，所产生的问题
解决方案:
1、设置元素高度与内容高度一致
2、overflow:hidden 解决
4、上边距(一)
在父子元素中，在子元素里设置上边距后所产生的问题。
问题：子元素的外边距会 适应 到父元素的外边距上
解决方案:
1、通过父元素的padding-top来替代
2、设置父元素的边框(可以为透明的)