特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果,而不喜欢说其是问题)并不陌生,而且很多同学都似乎有碰到过,也经常体验过。甚至在很多前端面试中也常被考官问到,有的时候还直接被考官给秒杀了。
针对这几个效果,W3cplus上都对应的有这方面的教程:
既然都有相关的教程,为何还费那么多劲再次扯蛋,难道真的闲得蛋疼了吗?其实并不如此,随着技术的更新,我们很多思路也得跟着创新,不能固定自封。那么今天我想从一些新的角度来考虑如何实现这几种效果。
等高列布局
在《八种创建等高列布局》一文中详细介绍了八种创建等高列布局的不同方法。可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕。在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现。接下来我与大家一起探讨几种新方法实现等高列布局。
Flexbox方式
Flexbox是一个强大而又神奇的CSS3模块,而且到现在,也得到众开浏览器的支持。有了这个模块,可以帮助我们做很多事情,而且较之以前的方案要更简单,唯一蛋疼的是在一些老版本浏览器中无法得到友好支持。接下来的内容,我们也将忽略这个兼容问题,而只是针对性的探讨如何使用Flexbox实现等高列布局。
Flexbox如何使用,在这里就不深入了,如果您是第一次接触Flexbox,那么我建议您猛击这里先了解其使用方法。
HTML
来个简单点的,两列布局是Web布局中常见的一种,其结构大致都是像这样:
<div id="header">
<div class="container">Header ...</div>
</div>
<div id="page">
<div class="container">
<div class="aside">Sidebar ...</div>
<div class="content">Main content ...</div>
</div>
</div>
<div id="footer">
<div class="container">Footer ....</div>
</div>
非常常见的两列布局。接下来才是关键,使用Flexbox实现侧栏.aside
和主内容.contetn
实现等高效果。
CSS
为了更好的看出效果,我们先给整个布局添加一些基本样式:
* {
margin: 0;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.container {
width: 960px;
margin: 0 auto;
color: #fff;
}
#header .container {
background-color: #f36;
min-height: 50px;
padding: 20px;
margin-bottom: 10px;
}
#page .container {
background-color: #cef;
min-height: 300px;
margin-bottom: 10px;
}
.aside {
width: 220px;
background-color: #36e;
padding: 5px 15px;
}
.content {
background-color: #66f;
padding: 5px 15px;
}
#footer .container {
background-color: #f36;
padding: 20px;
}
此时你将看到的效果是这样的:demo
这样的结局不是大家想看到的,来点精彩的,在上面代码基础上添加Flexbox功能:
#page .container {
background-color: #cef;
min-height: 300px;
margin-bottom: 10px;
display: flex;
}
.aside {
width: 220px;
background-color: #36e;
padding: 5px 15px;
margin-right: 20px;
}
.content {
background-color: #66f;
padding: 5px 15px;
flex: 1;
}
从上面代码可以看出,在两列容器#page .container
上添加了display:flex
,在.content
添加了自适应flex:1
样式,为了让两列之间有一个间距,在.aside
上添加了margin-right: 20px;
。就这么几行代码,轻松实现了等高列布局。
特别声明:请使用Chrome浏览器访问DEMO,如果需要兼容更多浏览器效果,请参考《一个完整的Flexbox指南》一文,添加对应的兼容代码。
渐变方式
等高列布局,有一种简单的方法就是根据列宽和其背景色制作一张背景图,然后在Y轴方向重铺。但这种方式在改变宽度和背景颜色的时候就非常的麻烦。那么根据背景图的思路,我们可以考虑使用CSS3的渐变属性来制作类似于这样的一张背景图。
渐变Gradient是CSS3中新增的一个功能,如果你还未接触过,建议通过《CSS3 Gradient》、《再说CSS3渐变——线性渐变》和《再说CSS3渐变——径向渐变》了解CSS3的gradient的应用。
这时假设你已经对Gradient有一定的了解,接下来我们主要要探讨的是如何使用Gradient模拟出使用背景图制作的等高布局。
假设我们的两列布局,左侧是220px,主内容是720px,两者间距是20px(容器宽度是960px)。我们需要一个类似于下面的背景图:
那么使用Gradient实现类似一张这样的背景,我们需要采用多色渐变,如示例中所示,总共使用了三个颜
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!