第一阶段——day07

day07

5大常用浏览器

Chrome 内核 -webkit- -blink

Firefox 内核 Gecko

IE Trident

Safari Webkit

Oprea 欧朋 Presto

兼容性处理—》为了浏览器表现一致

常见兼容问题

1：图片下间隙问题

现象：

原因：

解决方法:

2：文本框和按钮对不齐的现象

原因：按钮的盒模型特殊，盒模型高度就等于设置的height height 包含默认的内边距和边框 导致比文本框少6px的高度

解决：

1. 文本框高度设置时减少6px

2. 公共样式取消默认的边框和内边距

3. 按钮外套盒子 给这个盒子加6px底边框

ie浏览器的兼容问题

1：图片边框

<a><img src='./image/01.jpg'></a>  图片会有蓝色边框

解决:

img {
    border:none;  取消边框
}

2：ie6及其以下浏览器 小高度问题

 div {
        width: 500px;
        height: 3px;
        background-color: red;
        /* ie6以及以下浏览器 盒子都是有默认行高   >10px  小高度不能正常显示   */
        解决办法:
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
    

兼容问题以及解决

css hack

1:条件Hack （IE）

ie6以上不可见 p   > 大于  lt
if  gt IE  6  

ie内核浏览器识别

<!--[if IE]><![endif]-->
ie6内核浏览器识别

<!--[if IE 6]><![endif]-->
ie7及其以上内核浏览器识别

<!--[if gte IE 7]><![endif]-->
ie7及其以下内核浏览器识别

<!--[if lte IE 7]><![endif]-->
非ie内核浏览器识别

<!--[if !IE]><![endif]-->
非ie7及其以下内核浏览器识别

<!--[if !(lte IE 7)]><!-->

ie10以上把这个条件hack已经废除 不要用 尽量少用

2：属性级别hack css属性

_属性名="属性值"  ie6及其以下
*属性名='属性值'  ie7及其以下
属性名 = "属性值\0" ie8-ie9

3: 选择符hack

*html .box {
    .box 类样式 只能被ie6识别
    
}
* + html .box {
    类样式  被ie7识别
}

4：属性hack 权重无限大 !important

.box {
    background-color:red!important;
    !important > 行内
}

常见布局

1：两列自适应

描述: 左列固定宽度，右列宽度自适应 （并排 ）

右列100% —> 自适应

左列固定宽度 —》 float:left 放在右列上面 文字默认环绕

2：三列自适应

描述： 左右两列固定宽度，中间自适应 （并排）

中间列 100%

左列 float

右列 float

圣杯布局（负外边距+ 相对定位）

1: 保证中间列在html结构的最上面

2: 同时 并排

3：左列向左移动100% 左负外边距 margin-left:-100%

4：右列向左走自身的一个宽度 左负外边距

5：利用大盒子的左右两侧内边距实现内容居中

6:左列利用相对定位向左移动 left=-左列的宽度

7: 右列利用相对定位向右移动 left=右列的宽度

缺点：思路不简单 多4个css属性

双飞翼布局（负外边距+ 相对定位） 始于淘宝UED

1: 保证中间列在html结构的最上面

2: 同时 并排

3：左列向左移动100% 左负外边距 margin-left:-100%

4：右列向左走自身的一个宽度 左负外边距

5：中间列里面在套一个盒子 ，这个盒子放置内容 ，给这个盒子设置左右两侧外边距实现内容居中

**缺点：**结构复杂 多个盒子

优点： 思路清晰简单

3：等高布局

思想：父元素的高度取决最高的列高度

作业

双飞翼 圣杯

这个盒子放置内容 ，给这个盒子设置左右两侧外边距实现内容居中

**缺点：**结构复杂 多个盒子

优点： 思路清晰简单

3：等高布局

思想：父元素的高度取决最高的列高度

作业

双飞翼 圣杯