本文详细介绍了CSS中的文本溢出处理，包括单行和多行文本的解决方案。深入讲解了Block Formatting Context（BFC）的概念、特性及其在解决兄弟元素外边距塌陷、自适应布局和文字环绕等问题中的应用。同时，讨论了浏览器的兼容性问题，如图片间隙、IE特有条件、CSS Hack的使用以及项目检查与测试的要点，包括图片优化和跨浏览器兼容性测试。
一、## 一、文本溢出处理
1、单行文本溢出处理
关键点：
-
限制容器的宽度（
width：300px） -
让文字在一行显示
white-space： nowrap | normal;- nowrap 文字强制在一行显示
- normal 正常
-
溢出隐藏
overflow：hidden; -
文字溢出部分如何进行处理（是否需要用省略号代替）
text-overflow: clip | ellipsis;- clip 超出部分直接裁剪
- ellipsis 超出部分省略号显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 限制容器的宽度 */
width: 300px;
border: 1px solid red;
/* 文字强制在一行显示 */
white-space: nowrap;
/* 给盒子溢出隐藏 */
overflow: hidden;
/* 超出部分的文字是否以省略号的形式进行处理 clip---超出部分直接裁剪;ellipsis----超出部分以省略号的形式显示*/
/* text-overflow: clip; */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>王冰冰在吉林，基本重大新闻都会参与报道，包括农业项目、黄河水土保护、空军装备、旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>
2、多行文本溢出处理
（1）通过-webkit-私有属性处理
这种处理方式只在webkit内核的浏览器中生效（兼容性不好）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 300px;
border: 1px solid red;
/* 溢出隐藏 */
overflow: hidden;
/* 私有属性： -webkit- 只在webKit内核的浏览器中可以生效 */
/* 文字只显示3行 */
-webkit-line-clamp: 2;
/* 需要配合以下两个属性一起设置才会有显示3行的效果 */
/* 将盒子转换为弹性伸缩盒 */
display: -webkit-box;
/* 盒子内部的内容的排列方式 vertical 垂直排列*/
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p>王冰冰在吉林，基本重大新闻都会参与报道，包括农业项目、黄河水土保护、空军装备、旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>
（2）通过伪元素模拟省略号的形式来进行溢出处理
关键点：
-
给盒子限制宽度
-
行高与盒高成倍数关系（显示几行文字，并且文字不被显示一半）
-
给盒子溢出隐藏
-
给盒子中最后添加一个伪元素，伪元素的内容为省略号，将伪元素定位到盒子的末尾（如果省略号跟文字重叠，可以给伪元素设置一个背景【跟盒子的背景保持一致】，还可以通过padding和偏移属性进行微调）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
position: relative;
width: 350px;
/* 行高跟盒子的高度成倍数关系就可以了 */
height: 60px;
line-height: 30px;
border: 1px solid red;
overflow: hidden;
}
/* css3中伪元素推荐使用双冒号，但是在ie8中双冒号会有兼容问题 */
p::after {
position: absolute;
right: 11px;
bottom: 0;
content: "...";
background: white;
padding: 0 3px;
}
</style>
</head>
<body>
<p>王冰冰在吉林，基本重大新闻都会参与报道包括农业项目黄河水土保护空军装备旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>
二、BFC
1、BFC概念
英文：Block Formatting Context，全称"块级格式化上下文"
BFC：只有块级元素参与的，BFC是指块级元素在页面中如何排列，如何渲染，并且与内部元素无关
2、BFC特性
（1）内部标签在垂直方向上一个接一个的放置
（2）垂直方向上的距离是由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
（3）每个标签的左外边距会与包含块的左边距相接触（从左到右），浮动元素也是如此
（4）BFC区域不会与浮动区域发生重叠
（5）计算BFC区域的高度时，浮动子元素也参与计算
（6）BFC就是页面中的一个隔离的独立容器，容器里面的子标签不会影响外面的标签，反之亦然。
3、BFC的生成
- 根元素
- 设置了以下属性的元素会生成一个新的BFC
- display:inline-block
- float : left | right
- position ：absolute | fixed;
- overflow : hidden | auto | scroll；
4、BFC解决的问题
（1）兄弟元素的外边距塌陷问题
产生的原因： 根据BFC特性（2）会产生兄弟元素外边距塌陷问题
解决方案： 让其中一个兄弟元素处于一个新的BFC区域即可，具体：给任何一个兄弟元素套一个父盒，给父盒设置overflow，值不为vislible都可以
<!-- <div style="overflow: hidden;"> -->
<!-- <div style="overflow: auto;"> -->
<div style="overflow: scroll;">
<div class="box1"></div>
</div>
<div class="box2"></div>
（2）自适应两栏或者三栏布局
- 自适应两栏
产生原因：浮动会脱离文档流，但是不脱离文本流，所以左侧盒子浮动之后，右侧盒子中的文字会环绕在左侧盒子的周围
解决问题：根据特性（4），可以让右侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
min-height: 300px;
background: pink;
}
.right {
min-height: 300px;
background-color: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
</body>
</html>
- 自适应三栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
min-height: 300px;
background: pink;
}
.right {
float: right;
width: 200px;
min-height: 300px;
background-color: yellow;
}
.center {
min-height: 300px;
background-color: teal;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
<div class="center">中间盒子</div>
</div>
</body>
</html>
（3）防止文字环绕
文字环绕产生的原因：图片浮动会脱离文档流，但是不脱离文本流，左侧盒子中的文字会环绕在图片的周围
解决问题：根据特性（4），可以让左侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 600px;
}
img {
float: right;
}
.text {
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<img src="https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1" alt="">
<div class="text">
<p>公司创始人团队于1999年开始创业，2000年进入公务员考试培训行业，每年培训学员超过140万人。 [5] 公司总部位于北京，是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。</p>
<p>截至2017年12月31日，公司在全国319个地市建立了582家直营分部和学习中心； [5] 截至2018年4月30日，公司共有员工22620人，其中专职研发人员达1344人。 [6] </p>
<p>中公教育秉承着“实用、有效、专业、深度”的办学宗旨，依靠顶级的师资阵容和完整的自主研发实力，培训业务涵盖公务员考试、事业单位考试、军转干考试、招警考试、选调生/三支一扶/大学生村官考试、政法干警考试、公开选拔领导干部考试、教师招聘考试等，拥有国内首家公职考试研究院，面向全国培训学员超过1000余万人次，为众多考生实现公职梦想提供了强大的智力支持与服务保障。</p>
<p>作为职业教育服务业的综合性企业，中公教育针对公众“终身学习”和“素质教育”的需求，在国家专业硕士（MBA/MPA等）招生考试、建筑工程行业执业资格考试、执业医师资格考试、银行/农信社等金融系统入职资格考试、会计从业资格考试等领域，提供全方位的考前培训，并在职业规划、求职就业培训等领域为广大青年人提供深度辅导实现了培训产品的规模化、多元化和差异化，在中国职业教育领域独树一帜。</p>
</div>
</div>
</body>
</html>
（4）清浮动
给父元素添加overflow:hidden清浮动时，根据特性（5），让父元素在BFC区域中，那么计算高度时浮动子元素也会参与计算
三、BFC
1、图片下间隙问题
解决方案：
- 给图片设置vertical-align属性，值不为baseline
- 给图片转块
- 给图片的父元素添加font-size：0
2、ie8中的图片边框问题
当img嵌套在a标签中，在ie8-会在图片边缘出现蓝色边框
解决：给图片去掉边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
border: 0;
border: none;
}
</style>
</head>
<body>
<a href="#">
<img src="https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1" alt="">
</a>
</body>
</html>
3、 ie8中背景复合属性写法问题
ie8-如果url()与背景图是否重复之间没有空格会造成背景无法显示
解决方案： 正确添加空格
.box {
width: 300px;
height: 300px;
/* background: 背景颜色 背景图片 背景图是否平铺 背景图位置; */
/* background: yellow url("https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1")no-repeat; */
/* 解决方案： 背景图片与是否重复之间需要正确添加空格 */
background: yellow url("https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1") no-repeat;
}
4、在 IE6 及更早版本浏览器中，定义小高度的容器
ie6-，如果高度比较小时会无法正确显示
解决方案：给这个元素设置font-size：0;line-height：0
.box1 {
height: 5px;
background-color: aqua;
/* 解决方案 */
font-size: 0;
line-height: 0;
}
5、IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG
解决方案： 针对ie6的浏览器设置display：inline;
.box {
/* float: left; */
/* margin-left: 50px; */
width: 200px;
height: 200px;
background-color: aqua;
float: right;
margin-right: 50px;
/* css hack： 以下这行代码只有在ie6-的版本才能认识 */
_display:inline;
}
6、IE7 及更早版本浏览器下，子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父元素也设置相对定位
.wrap1 {
position: relative;
width: 500px;
height: 500px;
background-color: aqua;
/* overflow: hidden; */
overflow: auto;
}
.box1 {
position: relative;
top: 400px;
left: 450px;
width: 200px;
height: 200px;
background-color: yellow;
}
7、块转内联块 ie7- 不在一行显示问题
.box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
/* 针对ie7-设置display:inline */
/* css hack */
*display:inline;
/* 激活ie浏览器的haslayout（相当于ie中的BFC） */
*zoom: 1;
}
8、IE7 及更早版本浏览器下，当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙。
解决方案： 给li设置vertical-align属性，值不为baseline即可
<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>
* {
padding: 0;
margin: 0;
}
ul {
width: 300px;
}
li {
height: 50px;
line-height: 50px;
background-color: aqua;
list-style: none;
padding: 0 20px;
/* 解决方案 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
}
a {
float: left;
text-decoration: none;
}
span {
float: right;
}
四、CSS Hack
使用CSS Hack可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。
1、条件hack
用于选择IE浏览器及IE的不同版本
<!--[if 大于|大于等于|小于|小于等于|非 ie 8]>
执行代码
<![endif]-->
条件hack在标准浏览器中是当做注释来进行处理
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版本。关键字：!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--[if ie 7]>
<style>
/* div文字颜色为红色只在ie7当中有，其他浏览器没有红色 */
div {
color: red;
}
</style>
<![endif]-->
<!-- 小于ie9中引入ie.css -->
<!--[if lt ie 9]>
<link rel="stylesheet" href="./ie.css">
<![endif]-->
</head>
<body>
<!-- p标签中的文字只在ie8的浏览器中可以看见 -->
<!--[if ie 8]>
<p>后天放假了，可以睡懒觉了~</p>
<![endif]-->
<div>1116web班</div>
<!-- 注释 -->
</body>
</html>
2、属性级hack
CSS 样式属性名前或值后面加上一些只有特定浏览器才能识别的 hack 前缀或后缀，以达到预期的页面展 现效果。
_下划线：选择IE6及以下 *：选择IE7及以下
\9：选择IE6+ \0：选择IE8+和Opera15以下的浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 文字颜色为红色只在ie6-识别 */
/* _color: red; */
/* 文字颜色为黄色只在ie7-识别 */
/* *color: yellow; */
/* color: aqua\9; */
color: pink\0;
}
</style>
</head>
<body>
<p>1116web班</p>
</body>
</html>
3、选择符级hack
* html IE6及更早浏览器
* + html IE7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* + html div {
background-color: aqua;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
五、项目检查及测试
1、图片优化
（1）使用背景图
对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
（2）图片品质
注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。例：在用 ps导出 web 所有格式图片时通常选择的品质，通常选择 70-80 之间 。
注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
（3）使用精灵图
运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。
（4）静态banner大图的处理
- 有效区填白，降低图片大小
- 有效区的图片根据情况划分为三到五部分，注意不要切断文字
- 图片间隙处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 520px;
background: url("./images/banner_bg.jpg") no-repeat center;
}
.w {
width: 980px;
margin: 0 auto;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 大背景 -->
<div class="wrap">
<!-- 有效内容区 -->
<div class="w">
<img src="./images/banner01.jpg" alt="">
<img src="./images/banner02.jpg" alt="">
<img src="./images/banner03.jpg" alt="">
</div>
</div>
</body>
</html>
2、项目检查
-
视觉效果、可用性测试
做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。
（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；
（2）字体、字号、文字颜色的一致性；
（3）背景图片与图片是否有丢失；
（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。 -
兼容性测试
做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。
1、单行文本溢出处理
关键点：
-
限制容器的宽度（
width：300px） -
让文字在一行显示
white-space： nowrap | normal;- nowrap 文字强制在一行显示
- normal 正常
-
溢出隐藏
overflow：hidden; -
文字溢出部分如何进行处理（是否需要用省略号代替）
text-overflow: clip | ellipsis;- clip 超出部分直接裁剪
- ellipsis 超出部分省略号显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 限制容器的宽度 */
width: 300px;
border: 1px solid red;
/* 文字强制在一行显示 */
white-space: nowrap;
/* 给盒子溢出隐藏 */
overflow: hidden;
/* 超出部分的文字是否以省略号的形式进行处理 clip---超出部分直接裁剪;ellipsis----超出部分以省略号的形式显示*/
/* text-overflow: clip; */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>王冰冰在吉林，基本重大新闻都会参与报道，包括农业项目、黄河水土保护、空军装备、旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>
2、多行文本溢出处理
（1）通过-webkit-私有属性处理
这种处理方式只在webkit内核的浏览器中生效（兼容性不好）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 300px;
border: 1px solid red;
/* 溢出隐藏 */
overflow: hidden;
/* 私有属性： -webkit- 只在webKit内核的浏览器中可以生效 */
/* 文字只显示3行 */
-webkit-line-clamp: 2;
/* 需要配合以下两个属性一起设置才会有显示3行的效果 */
/* 将盒子转换为弹性伸缩盒 */
display: -webkit-box;
/* 盒子内部的内容的排列方式 vertical 垂直排列*/
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p>王冰冰在吉林，基本重大新闻都会参与报道，包括农业项目、黄河水土保护、空军装备、旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>
（2）通过伪元素模拟省略号的形式来进行溢出处理
关键点：
-
给盒子限制宽度
-
行高与盒高成倍数关系（显示几行文字，并且文字不被显示一半）
-
给盒子溢出隐藏
-
给盒子中最后添加一个伪元素，伪元素的内容为省略号，将伪元素定位到盒子的末尾（如果省略号跟文字重叠，可以给伪元素设置一个背景【跟盒子的背景保持一致】，还可以通过padding和偏移属性进行微调）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
position: relative;
width: 350px;
/* 行高跟盒子的高度成倍数关系就可以了 */
height: 60px;
line-height: 30px;
border: 1px solid red;
overflow: hidden;
}
/* css3中伪元素推荐使用双冒号，但是在ie8中双冒号会有兼容问题 */
p::after {
position: absolute;
right: 11px;
bottom: 0;
content: "...";
background: white;
padding: 0 3px;
}
</style>
</head>
<body>
<p>王冰冰在吉林，基本重大新闻都会参与报道包括农业项目黄河水土保护空军装备旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>
二、BFC
1、BFC概念
英文：Block Formatting Context，全称"块级格式化上下文"
BFC：只有块级元素参与的，BFC是指块级元素在页面中如何排列，如何渲染，并且与内部元素无关
2、BFC特性
（1）内部标签在垂直方向上一个接一个的放置
（2）垂直方向上的距离是由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
（3）每个标签的左外边距会与包含块的左边距相接触（从左到右），浮动元素也是如此
（4）BFC区域不会与浮动区域发生重叠
（5）计算BFC区域的高度时，浮动子元素也参与计算
（6）BFC就是页面中的一个隔离的独立容器，容器里面的子标签不会影响外面的标签，反之亦然。
3、BFC的生成
- 根元素
- 设置了以下属性的元素会生成一个新的BFC
- display:inline-block
- float : left | right
- position ：absolute | fixed;
- overflow : hidden | auto | scroll；
4、BFC解决的问题
（1）兄弟元素的外边距塌陷问题
产生的原因： 根据BFC特性（2）会产生兄弟元素外边距塌陷问题
解决方案： 让其中一个兄弟元素处于一个新的BFC区域即可，具体：给任何一个兄弟元素套一个父盒，给父盒设置overflow，值不为vislible都可以
<!-- <div style="overflow: hidden;"> -->
<!-- <div style="overflow: auto;"> -->
<div style="overflow: scroll;">
<div class="box1"></div>
</div>
<div class="box2"></div>
（2）自适应两栏或者三栏布局
- 自适应两栏
产生原因：浮动会脱离文档流，但是不脱离文本流，所以左侧盒子浮动之后，右侧盒子中的文字会环绕在左侧盒子的周围
解决问题：根据特性（4），可以让右侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
min-height: 300px;
background: pink;
}
.right {
min-height: 300px;
background-color: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
</body>
</html>
- 自适应三栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
min-height: 300px;
background: pink;
}
.right {
float: right;
width: 200px;
min-height: 300px;
background-color: yellow;
}
.center {
min-height: 300px;
background-color: teal;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
<div class="center">中间盒子</div>
</div>
</body>
</html>
（3）防止文字环绕
文字环绕产生的原因：图片浮动会脱离文档流，但是不脱离文本流，左侧盒子中的文字会环绕在图片的周围
解决问题：根据特性（4），可以让左侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 600px;
}
img {
float: right;
}
.text {
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<img src="https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1" alt="">
<div class="text">
<p>公司创始人团队于1999年开始创业，2000年进入公务员考试培训行业，每年培训学员超过140万人。 [5] 公司总部位于北京，是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。</p>
<p>截至2017年12月31日，公司在全国319个地市建立了582家直营分部和学习中心； [5] 截至2018年4月30日，公司共有员工22620人，其中专职研发人员达1344人。 [6] </p>
<p>中公教育秉承着“实用、有效、专业、深度”的办学宗旨，依靠顶级的师资阵容和完整的自主研发实力，培训业务涵盖公务员考试、事业单位考试、军转干考试、招警考试、选调生/三支一扶/大学生村官考试、政法干警考试、公开选拔领导干部考试、教师招聘考试等，拥有国内首家公职考试研究院，面向全国培训学员超过1000余万人次，为众多考生实现公职梦想提供了强大的智力支持与服务保障。</p>
<p>作为职业教育服务业的综合性企业，中公教育针对公众“终身学习”和“素质教育”的需求，在国家专业硕士（MBA/MPA等）招生考试、建筑工程行业执业资格考试、执业医师资格考试、银行/农信社等金融系统入职资格考试、会计从业资格考试等领域，提供全方位的考前培训，并在职业规划、求职就业培训等领域为广大青年人提供深度辅导实现了培训产品的规模化、多元化和差异化，在中国职业教育领域独树一帜。</p>
</div>
</div>
</body>
</html>
（4）清浮动
给父元素添加overflow:hidden清浮动时，根据特性（5），让父元素在BFC区域中，那么计算高度时浮动子元素也会参与计算
三、浏览器常见兼容问题
1、图片下间隙问题
解决方案：
- 给图片设置vertical-align属性，值不为baseline
- 给图片转块
- 给图片的父元素添加font-size：0
2、ie8中的图片边框问题
当img嵌套在a标签中，在ie8-会在图片边缘出现蓝色边框
解决：给图片去掉边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
border: 0;
border: none;
}
</style>
</head>
<body>
<a href="#">
<img src="https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1" alt="">
</a>
</body>
</html>
3、 ie8中背景复合属性写法问题
ie8-如果url()与背景图是否重复之间没有空格会造成背景无法显示
解决方案： 正确添加空格
.box {
width: 300px;
height: 300px;
/* background: 背景颜色 背景图片 背景图是否平铺 背景图位置; */
/* background: yellow url("https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1")no-repeat; */
/* 解决方案： 背景图片与是否重复之间需要正确添加空格 */
background: yellow url("https://bkimg.cdn.bcebos.com/pic/14ce36d3d539b600729f2bb8eb50352ac65cb76f?x-bce-process=image/resize,m_lfit,w_220,limit_1") no-repeat;
}
4、在 IE6 及更早版本浏览器中，定义小高度的容器
ie6-，如果高度比较小时会无法正确显示
解决方案：给这个元素设置font-size：0;line-height：0
.box1 {
height: 5px;
background-color: aqua;
/* 解决方案 */
font-size: 0;
line-height: 0;
}
5、IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG
解决方案： 针对ie6的浏览器设置display：inline;
.box {
/* float: left; */
/* margin-left: 50px; */
width: 200px;
height: 200px;
background-color: aqua;
float: right;
margin-right: 50px;
/* css hack： 以下这行代码只有在ie6-的版本才能认识 */
_display:inline;
}
6、IE7 及更早版本浏览器下，子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父元素也设置相对定位
.wrap1 {
position: relative;
width: 500px;
height: 500px;
background-color: aqua;
/* overflow: hidden; */
overflow: auto;
}
.box1 {
position: relative;
top: 400px;
left: 450px;
width: 200px;
height: 200px;
background-color: yellow;
}
7、块转内联块 ie7- 不在一行显示问题
.box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
/* 针对ie7-设置display:inline */
/* css hack */
*display:inline;
/* 激活ie浏览器的haslayout（相当于ie中的BFC） */
*zoom: 1;
}
8、IE7 及更早版本浏览器下，当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙。
解决方案： 给li设置vertical-align属性，值不为baseline即可
<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>
* {
padding: 0;
margin: 0;
}
ul {
width: 300px;
}
li {
height: 50px;
line-height: 50px;
background-color: aqua;
list-style: none;
padding: 0 20px;
/* 解决方案 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
}
a {
float: left;
text-decoration: none;
}
span {
float: right;
}
四、CSS Hack
使用CSS Hack可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。
1、条件hack
用于选择IE浏览器及IE的不同版本
<!--[if 大于|大于等于|小于|小于等于|非 ie 8]>
执行代码
<![endif]-->
条件hack在标准浏览器中是当做注释来进行处理
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版本。关键字：!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--[if ie 7]>
<style>
/* div文字颜色为红色只在ie7当中有，其他浏览器没有红色 */
div {
color: red;
}
</style>
<![endif]-->
<!-- 小于ie9中引入ie.css -->
<!--[if lt ie 9]>
<link rel="stylesheet" href="./ie.css">
<![endif]-->
</head>
<body>
<!-- p标签中的文字只在ie8的浏览器中可以看见 -->
<!--[if ie 8]>
<p>后天放假了，可以睡懒觉了~</p>
<![endif]-->
<div>1116web班</div>
<!-- 注释 -->
</body>
</html>
2、属性级hack
CSS 样式属性名前或值后面加上一些只有特定浏览器才能识别的 hack 前缀或后缀，以达到预期的页面展 现效果。
_下划线：选择IE6及以下 *：选择IE7及以下
\9：选择IE6+ \0：选择IE8+和Opera15以下的浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 文字颜色为红色只在ie6-识别 */
/* _color: red; */
/* 文字颜色为黄色只在ie7-识别 */
/* *color: yellow; */
/* color: aqua\9; */
color: pink\0;
}
</style>
</head>
<body>
<p>1116web班</p>
</body>
</html>
3、选择符级hack
* html IE6及更早浏览器
* + html IE7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* + html div {
background-color: aqua;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
五、项目检查及测试
1、图片优化
（1）使用背景图
对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
（2）图片品质
注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。例：在用 ps导出 web 所有格式图片时通常选择的品质，通常选择 70-80 之间 。
注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
（3）使用精灵图
运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。
（4）静态banner大图的处理
- 有效区填白，降低图片大小
- 有效区的图片根据情况划分为三到五部分，注意不要切断文字
- 图片间隙处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 520px;
background: url("./images/banner_bg.jpg") no-repeat center;
}
.w {
width: 980px;
margin: 0 auto;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 大背景 -->
<div class="wrap">
<!-- 有效内容区 -->
<div class="w">
<img src="./images/banner01.jpg" alt="">
<img src="./images/banner02.jpg" alt="">
<img src="./images/banner03.jpg" alt="">
</div>
</div>
</body>
</html>
2、项目检查
-
视觉效果、可用性测试
做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。
（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；
（2）字体、字号、文字颜色的一致性；
（3）背景图片与图片是否有丢失；
（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。 -
兼容性测试
做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。
扫一扫
2098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
