常见问题
- 浮动问题
- margin值塌陷问题
- 图片间隙问题
- 内联块间隙问题
常见兼容问题
块转内联块问题
ie7及以下,块转内联块不在一行显示
解决:
*display:inline;*zoom:1;
子元素相对定位,父元素overflow失效
ie7及以下,overflow:hidden/scroll/auto失效
解决:
父元素{position:relative;}
li包含浮动子元素,下间隙问题
解决;
li{vertical-align:middle;}
背景属性值简写缺少空格(语法问题)
ie8及以下,不显示背景图像
.box{width:300px;height:300px;border:1px solid red;
/* 缺少空格 */
background:url(pic.jpg)no-repeat center center;
}
ie6双边距问题
元素浮动且出现同向外边距时(左浮动和左外边距,右浮动和右外边距),靠近边缘第一个元素会出现双倍边距问题
解决:
元素{_display:inline;}
ie6小高度问题
元素定义小于19像素的高度时,ie6中显示19px
解决:
元素{_font-size:0;}
css hack
使用 CSS Hack 可以控制不同浏览器及版本之间的显示差异,某些情况下处理兼容问题可以事半功倍,【但滥用会影响页面性能,也会导致后期维护困难,因此尽可能减少对CSS Hack 的使用】
属性级hack
-
下划线 针对ie6
_background-color:red;
-
星号 * 针对ie6,7
*background-color:green;
-
/0 针对ie7+
background-color:green\0;
选择符级hack
ie6
*html .box{background:blue;}
ie7
*+html .box{background:blue;}
条件注释语句(IE)
IE 条件注释判断语句是 IE 特有的功能,通过 HTML 注释中的条件语句能让不同的 IE 版本识别注释中的内容
自IE10起,标准模式不再支持条件注释
<!--[if IE]>
<p style="background:red;">
只能被 IE 识别;
</p>
<![endif]-->
<!--[if IE 6]>
这是ie6
<![endif]-->
<!--[if IE 7]>
这是ie7
<![endif]-->
<!--[if IE 8]>
这是ie8
<![endif]-->
<!--[if IE 9]>
这是ie9
<![endif]-->
<!--[if gt IE 6]>
这是大于ie6
<![endif]-->
- gt(greater than) 大于
- gte(greater than or equal)大于等于
- lt(less than) 小于
- lte(less than or equal) 小于等于
- ! 非
布局技巧
两列自适应布局
- 一列固定,另一列自适应
等高布局
实现要点
- 多列(至少两列)
- 每一列都有背景
- 其中一列的高度发生变化,其它列的背景高度同步变化
方法一(掌握)
利用padding-bottom和margin-bottom相抵销
- 利用padding-bottom撑开显示更多的背景
- margin-bottom的负值 抵销padding的占位
.wrap{
width:600px;
border:2px solid #000;
overflow: hidden;
}
.wrap:after{
content:"";
display: block;
clear:both
}
.left,.center,.right{
width:200px;
min-height:200px;
float:left;
padding-bottom:500px;
margin-bottom:-500px;
}
.left{
background-color: yellowgreen;
}
.center{
background-color: pink;
}
.right{
background-color: orange;
}
<div class="wrap">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
- 结构简单
- 可以实现任意列的等高变化
- 合理的控制margin-bottom,padding-bottom值
方法二
利用border默认与高度同步变化
- 因为利用的是边框,只能实现二列、三列等高
- 结构简单
<div class="wrap">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
.wrap{
width:200px;
border-left:200px solid yellowgreen;
border-right:200px solid pink;
min-height:200px;
background-color: orange;
}
.wrap:after{
content:"";
display: block;
clear:both
}
.left,.center,.right{
width:200px;
min-height:200px;
float:left;
}
.left{
margin-left:-200px;
}
.right{
margin-right:-200px;
}
方法三
元素层层嵌套,内部盒子高度发生变化,外层盒子同步变化
<div class="wrap">
<div class="bg1">
<div class="bg2">
<div class="bg3">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
</div>
</div>
</div>
.wrap{
width:600px;
overflow: hidden;
}
.bg1{
background-color: yellowgreen;
}
.bg2{
position: relative;
left:200px;
background-color: pink;
}
.bg3{
position: relative;
left:200px;
background-color: orange;
}
.bg3::after{
content:"";
display: block;
clear: both;
}
.left,.right,.center{
width:200px;
float:left;
min-height:200px;
word-wrap: break-word;
}
.left{
margin-left:-400px;
}
.center{
margin-left:-200px;
}
- 结构复杂,理解有一定困难
- 可以实现任意列等高
圣杯布局
实现要点
- 两侧列固定,中间列自适应,不要求等高
- 改变加载顺序——结构顺序(中 左 右)显示效果(左中右)
关键步骤
1.基本结构父盒子.wrap内部,三个子盒子(顺序为.main,.left.right)
<div class="wrap">
<div class="main">主体内容</div>
<div class="left">左侧</div>
<div class="right">右边</div>
</div>
2.父盒子.wrap左右固定padding值(与左侧,右侧盒子宽度一致)
3.内部三个盒子(.main,.left.right)左浮动
4.移动盒子至对应位置
- left{margin-left:-100%;position:relative;left-200ox;} 左侧盒子margin-left负100%之后,相对于自己再向左移动负,自身宽度的值
- .right{margin-left:-200px;position:relative;left:200px;} 右侧盒子margin-left负自身宽度的值,相对于自己向右移动自身宽度的值
.wrap{
padding:0 200px;
min-width:200px;
}
.left,.main,.right{
float:left;
}
.left{
width:200px;
min-height:300px;
background-color: yellowgreen;
margin-left:-100%;
position:relative;
left:-200px;
}
.right{
width:200px;
min-height:300px;
background-color: pink;
margin-left:-200px;
position: relative;
left:200px;
}
.main{
width:100%;
min-height:300px;
background-color: yellow;
}
双飞翼布局
关键步骤
1.基本结构父盒子,内部包含.mainbox,.left,.right三个盒子,在.mainbox内部包含.main
<div class="wrap">
<div class="mainbox">
<div class="main">主体内容</div>
</div>
<div class="left">左侧</div>
<div class="right">右边</div>
</div>
- .mainbox宽度100%,它内部.main,定义左右margin值,与.left,right宽度一致
3…mainbox,.left,.right三个左浮动
4.移动至对应位置处
- left的盒子,向左移动100%, margin-left:-100%;
- right的盒子,向左移动自身宽度 margin-left:-200px;
.wrap {
min-width:600px;
border:2px solid #000;
}
.wrap:after{
content:"";
display: block;
clear: both;
}
.left,
.mainbox,
.right {
float: left;
}
.mainbox{
width:100%;
}
.left {
width: 200px;
min-height: 300px;
background-color: yellowgreen;
margin-left:-100%;
}
.right {
width: 200px;
min-height: 300px;
background-color: pink;
margin-left:-200px;
}
.main {
margin:0 200px;
min-height: 300px;
background-color: yellow;
}
词内换行(会用)
连续的字母,数字,长单词、长url默认不换行,超出容器宽度
.box{
width:100px;
height:100px;
background-color: red;
/* 允许词内的任意位置换行 */
word-break: break-all;
}
文本溢出显示省略号(会用)
单行文本溢出显示省略号
text-overflow:ellipsis; 文本溢出显示省略号
配合
white-space:nowrap; 强制不换行
overflow:hidden; 溢出隐藏
.box{
width:200px;
height:40px;
background-color: red;
line-height:40px;
word-break: break-all;
/* 强制不换行 */
white-space: nowrap;
/* 文本溢出显示为省略号 */
text-overflow: ellipsis;
overflow: hidden;
}
多行文本溢出显示省略号
方法一
通常用于移动端,或支持-webkit-前缀的浏览器
display:-webkit-box; //将盒子设置为弹性盒
-webkit-box-orient:vertical; //弹性盒内项目弹列方向垂直排列
-webkit-line-clamp: 3; //控制盒子可显示行数
overflow: hidden; //溢出隐藏
方法二
利用:after模拟,配合定位实现
.box{
width:210px;
line-height:30px;
height:90px;
background-color: pink;
position: relative;
overflow: hidden;
text-align: justify;
}
.box:after{
position: absolute;
right:0;
bottom:0;
content:"...";
background-color: pink;
width:1em;
}
BFC(熟记)
BFC(Block Formatting Context)即块级格式化上下文
表示页面中一个独立的块级渲染区域,【只有块级盒子】参与,该区域【拥有一套渲染规则】来约束块级盒子的布局,且【与区域外部无关】。
渲染规则
- 内部的元素会在垂直方向上一个接一个的放置 (块自上而下排列)
- 垂直方向上的距离由margin决定,属于同一个BFC的两个相邻元素的margin会发生重叠
- 内部每个元素的左外边距与包含块的padding盒左边界相接触(从左向右),即使浮动也是如此。
- 封闭性(结界)
- 计算BFC的高度时,浮动子元素也参与计算(包含浮动子元素不出现高度塌陷)
- BFC的区域不会与float的元素区域重叠
- 不属于同一个BFC的相邻块元素的margin会发生重叠
生成BFC的条件
- 根元素html
- 浮动(float:left,right)
- 定位(position:fixed,absolute)
- overflow:hidden/scroll/auto
- display:inline-block; [display:table-cell,display:table-caption…]
解决问题
- 清浮动
- margin值塌陷问题
- 生成两列布局