两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
</head>
<style>
/* 版心 */
.layoutCenter {
width: 1200px;
}
nav {
height: 400px;
background-color: skyblue;
position: relative;
margin: 0 auto;
}
nav .left {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
opacity: 0.5;
}
nav .right {
width: 100%;
height: 100px;
padding-left: 200px;
box-sizing: border-box;
background-color: pink;
}
</style>
<body>
<nav class="layoutCenter">
<div class="left">
</div>
<div class="right">
</div>
</nav>
</body>
</html>
效果如下:
margin塌陷
- 使用border
- 产生bfc:
overflow:hidden display:inline-block position:absolute float:left/right
margin合并
- 产生bfc
- 利用数学计算
float理解
设置float的盒子产生浮动流,普通div盒子看不见,文本及文本类(inline)和bfc盒子看得见
清除浮动的方法
.clearfix::after {
content: '';
display: block;
clear: both; //作用与块级元素
}
.clearfix {
*zoom: 1;
}
文字溢出
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
加载不出css时兼容写法
a {
float: left;
display: block;
width: 80px;
height: 0px;
padding-top: 80px;
text-indent: -999px;
overflow: hidden;
background-image: url("../JQuery/image/1c7.jpg");
}