第10天, BFC, IE浏览器常见兼容问题, css Hack, 图片优化, 项目测试检查
day 10
一、BFC
1、什么是BFC
BFC（Block Formatting Context），翻译为”块级格式化上下文“，该区域拥有一套自己的渲染规则，用来约束子元素在区域内如何进行排列，且与外面的区域无关
2、如何生成BFC
- 根元素
- 设置了以下属性的元素会生成BFC
- display:inline-block
- float:left | right
- overflow：hidden | auto | scroll
- position：absolute | fixed
3、BFC的特性（笔试重点）
（1）内部标签会在垂直方向上一个接一个的放置
（2）垂直方向上距离由margin决定，属于同一个BFC区域的margin会发生重叠
（3）每个标签的左外边距会与包含块的左外边界相接触（从左到右），浮动元素也是如此
（4）BFC区域不会与float标签区域重叠
（5）计算BFC的高度时，浮动子元素也参与计算
（6）BFC就是页面中的一个独立容器，容器内部的标签不会影响到外面的标签，反之亦然。
4、BFC解决的问题
（1）兄弟元素外边距塌陷问题
根据特性（2）所以兄弟元素会存在外边距塌陷问题
如何解决：根据特性（6），让其中一个元素处于新的BFC区域，这样里面的标签不会影响外面，外面的也不会影响里面
<div style="overflow: scroll;">
<div class="box1"></div>
</div>
<div class="box2"></div>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
margin-bottom: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
（2）自适应两栏或者三栏布局
自适应两栏布局：左侧固定宽度，右侧宽度自适应 | 右侧固定宽度，左侧宽度自适应
自适应三栏布局：左右两侧固定宽度，中间宽度自适应
解决方案：根据特性（4），可以让中间盒子处于一个新的BFC区域，这样BFC区域就不会和float区域发生重叠了
<div class="wrap">
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
<div class="center">中间盒子</div>
</div>
<style>
.left {
float: left;
width: 300px;
min-height: 200px;
background-color: aqua;
}
.right {
float: right;
width: 200px;
min-height: 200px;
background-color: pink;
}
.center {
background-color: yellow;
min-height: 200px;
overflow: hidden;
}
</style>
（3）防止文字环绕
解决方案： 让文字生成一个新的BFC区域
img {
float: left;
}
p {
width: 600px;
/* display: inline-block; */
/* overflow: hidden; */
/* float: left; */
}
（4）清浮动
清除浮动中给父元素设置overflow属性，值不为vislible
根据特性（5），让父元素处于一个新的BFC区域，这样在计算父元素高度时，浮动子元素也会参与计算，就可以解决浮动带来的影响
二、浏览器常见兼容问题
1、图片下间隙问题
解决方案一：
img {
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
}
解决方案二：
img {
display: block;
}
解决方案三：给图片的父元素设置font-size:0
div {
width: 500px;
border: 1px solid red;
font-size: 0;
}
2、ie8及以下浏览器会出现图片边框问题
a标签中放置一张图片，图片在ie8-会有蓝色边框
解决方案：给图片去掉边框
img {
/* border: 0; */
border: none;
}
3、ie8中背景复合属性写法问题
在ie8中如果背景图片与背景图片是否重复之间没有空格，在ie8中背景简写属性有问题，例如如下代码：
/* background: url("hua.jpg")no-repeat center; */
解决方案：正确添加空格即可
background: url("hua.jpg") no-repeat center;
4、在 IE6 及更早版本浏览器中，定义小高度的容器
在ie6-浏览器会有一个最小高度，如果设置的高度小于这个值，则不能正确显示
解决方案： font-size:0;line-height:0
div {
height: 1px;
background-color: aqua;
/* 解决方案 */
font-size: 0;
line-height: 0;
}
5、IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG
解决方案： 针对ie6设置display:inline
<style>
* {
padding: 0;
margin: 0;
}
.box {
float: left;
margin-left: 50px;
width: 200px;
height: 200px;
border: 1px solid red;
/* 属性hack */
_display:inline;
}
</style>
6、IE7 及更早版本浏览器下，子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父元素设置相对定位（position：relative）
<style>
.wrap {
position: relative;
width: 300px;
height: 300px;
background-color: aqua;
overflow: hidden;
}
.box {
position: relative;
left: 200px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
7、块转内联块 ie7- 不在一行显示问题
<style>
.box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
/* 属性hack */
*display:inline;
*zoom: 1; /*激活IE中的haslayout(相当于是IE中的BFC)*/
}
</style>
8、IE7 及更早版本浏览器下，当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙。
解决方案：给li设置vertical-align属性，值除了visible以外都可以
<ul>
<li>
<a href="#">手机、电话卡</a>
<span>></span>
</li>
<li>
<a href="#">手机、电话卡</a>
<span>></span>
</li>
<li>
<a href="#">手机、电话卡</a>
<span>></span>
</li>
<li>
<a href="#">手机、电话卡</a>
<span>></span>
</li>
</ul>
<style>
* {
padding: 0;
margin: 0;
}
ul {
width: 300px;
}
li {
list-style: none;
height: 40px;
line-height: 40px;
background-color: aqua;
padding: 0 20px;
/* 解决方案 */
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
}
a {
text-decoration: none;
float: left;
}
span {
float: right;
}
</style>
三、css Hack
使用CSS Hack可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。
1、条件hack
主要用于选择IE浏览器及不同的IE浏览器的版本
if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
- 大于：选择大于指定版本的IE版本。关键字：gt（greater than）
- 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
- 小于：选择小于指定版本的IE版本。关键字：lt（less than）
- 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
- 非指定版本：选择除指定版本外的所有IE版本。关键字：!
<!--[if 关键词 IE 8]>
执行的代码
<![endid]-->
例如：
<!--[if ! IE 7]>
<p>0817web班</p>
<![endif]-->
<!--[if IE 8]>
<style>
p {
color: red;
}
</style>
<![endif]-->
2、属性级hack
CSS 样式属性名前或值后面加上一些只有特定浏览器才能识别的 hack 前缀或后缀，以达到预期的页面展 现效果。
_下划线：选择IE6及以下 *：选择IE7及以下
\9：选择IE6+ \0：选择IE8+和Opera15以下的浏览器
p {
color: aqua;
/* ie6- */
_color:red;
/* ie7- */
*color:yellow;
/* \9和\0是加在属性值的后面 */
color: blueviolet\9;
color:chartreuse\0;
}
3、选择符级hack
* html IE6及更早浏览器
* + html IE7 IE7
<style>
p {
height: 300px;
background-color: chartreuse;
}
* html p {
background-color: chocolate;
}
* + html p {
background-color: yellow;
}
</style>
四、图片优化
1、使用背景图
对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
2、图片品质
注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。例：在用 ps导出 web 所有格式图片时通常选择的品质，通常选择 70-80 之间 。
注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
3、使用精灵图
运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。
4、静态banner大图的处理
（1）有效区填白，降低图片大小
例如：有效区是980像素，那么填白区域可以比有效区小5-10像素，防止浏览器出现留白
（2）有效区的图片根据情况划分为三到五部分，注意不要切断文字
（3）图片间隙处理
<div class="wrap">
<div class="inner">
<img src="./images/banner01.jpg" alt="">
<img src="./images/banner02.jpg" alt="">
<img src="./images/banner03.jpg" alt="">
</div>
</div>
<style>
.wrap {
height: 520px;
background: url("images/banner_bg.jpg") no-repeat center center;
}
/* 有效内容区 */
.inner {
width: 980px;
margin: 0 auto;
}
.wrap img {
vertical-align: middle;
}
</style>
五、项目测试检查
1、视觉与还原度检测
做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。
（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；
（2）字体、字号、文字颜色的一致性；
（3）背景图片与图片是否有丢失；
（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。
2、跨浏览器兼容测试
做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。
