常见问题

浮动问题
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值塌陷问题
生成两列布局

一些常见的问题、布局技巧、BFC

常见问题

常见兼容问题

块转内联块问题

子元素相对定位，父元素overflow失效

li包含浮动子元素，下间隙问题

背景属性值简写缺少空格(语法问题)

ie6双边距问题

ie6小高度问题

css hack

属性级hack

选择符级hack

条件注释语句（IE）

布局技巧

两列自适应布局

等高布局

实现要点

方法一（掌握）

方法二

方法三

圣杯布局

实现要点

关键步骤

双飞翼布局

关键步骤

词内换行（会用）

文本溢出显示省略号（会用）

单行文本溢出显示省略号

多行文本溢出显示省略号

方法一

BFC（熟记）

渲染规则

生成BFC的条件

解决问题

猜你喜欢