弹性布局-普通流布局
2018-06-15 本文已影响0人
半瓶不满
普通流布局：display : inline-block！
这是一个传说中取代float布局的存在。看了一些网站，PC端浮动为主，移动端的也用的不多啊，已经有些使用flex的了。
使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。
4px间隙
解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢复正常的显示。
消除4px间隙
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
font-size: 0;
letter-spacing: -4px; /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
margin-left: 100px;
margin-right: 150px;
}
.wrap * {
font-size: 1rem;
letter-spacing: normal;
}
.left {
display: inline-block;
vertical-align: top;
width: 100px;
background: #00f;
height: 180px;
margin-left: -100px;
}
.right {
display: inline-block;
vertical-align: top;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
display: inline-block;
vertical-align: top;
background: #B373DA;
height: 150px;
min-width: 150px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left，宽度高度固定</div>
<div class="center">center，可以自适应浏览器宽度，高度固定。</div>
<div class="right">right，宽度高度固定</div>
</div>
</body>
</html>
样式图
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
font-size: 0;
letter-spacing: -4px; /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
margin-right: 150px;
}
.wrap * {
font-size: 1rem;
letter-spacing: normal;
}
.left {
display: inline-block;
vertical-align: top;
width: 100px;
background: #00f;
height: 180px;
margin-left: -100%;
}
.right {
display: inline-block;
vertical-align: top;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
display: inline-block;
vertical-align: top;
background: #B373DA;
height: 150px;
min-width: 150px;
width: 100%;
box-sizing: border-box;
padding-left: 100px;
background-origin: content-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
center，可以自适应浏览器宽度，高度固定。
</div>
<div class="right">right，宽度高度固定</div>
<div class="left">left，宽度高度固定</div>
</div>
</body>
</html>
样式图
