CSS3网格的三个新特性详解


Posted in HTML / CSS onApril 04, 2014

一、网格简史

曾几何时,我们的布局是一团糟。表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作(但其实非常糟糕)。

把目光投向今天。HTML和CSS已经变得非常复杂,Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而,一个历史遗留问题浮出水面:多列布局。

更复杂的是,我们的页面宽度不再是静态的。响应式大行其道,所以我们倾向于基于百分比的列宽。基于固定960像素宽的简单网格已经行不通——我们需要流体网格。

CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局,我们需要添加clearfix。通过这种方法,来修正父元素的高度坍塌问题(浮动元素脱离标准流,父元素会认为浮动资源不存在)。我们大部分接受这种方法,但许多人仍然认为它是一种hack(奇技淫巧)。

通过inline-box的方法并不常见,但仍然存在。内联元素会保持在一行,他们自然顺序排列。当一行被占满,后面的元素自然折到下一行。但因为他表现为文本特性,其行为类似文本。这意味着你必须避免HTML元素之间的空白元素(空格,tab,换行……)。Inline-block不是为这设计的,不且工作的并不十分如意。

在这两种方法中,浮动的方法更可靠。这就是为什么它更流行,排在第一位。然而,创建多列后,我们发现需要再次压缩内容,因为我们需要一些填充距离。这就引出最终的问题:盒模型

盒模型是什么,简单来说,一个元素的实际尺寸包括:高度/宽度+内边距+边的宽度。外边据并不使盒子变大,仅仅在自己和其他元素之间增加空隙。所以设置宽度时,比如25%,其盒子的实际宽度比这大得多,这意味着在一行没有足够的空间放下四个元素。

这烦人的问题有不同的解决方案:负外边距,嵌套元素——我知道的全部了。他们都需要额外的CSS或DOM元素,算作hack方法。让我们面对现实,CSS2中没有解决网格的好方法。

然而今天,CSS3提供很好的支持,规范增加了专门用于网格的几个新特性。这些特性都有哪些?我们如何使用他们?让我们看一看。

二、box-sizing: border-box

已经解决的问题之一是扩展盒模型的性质。通过设置box-sizing的值为border-box可以解决这个问题。通过减少内容宽度使边和内边距的距离也算到width属性里。

HTML

复制代码
代码如下:

<div class="row">
<div class="column">Col one</div>
<div class="column">Col two</div>
<div class="column">Col three</div>
<div class="column">Col four</div>
</div>

CSS

复制代码
代码如下:

.row:after {
clear: both;
content: '';
display: block;
}
.column {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

float: left;
min-height: 8em;
overflow: hidden;
padding: 2em;
width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }


效果
CSS3网格的三个新特性详解

虽然这工作的很棒,但我们仍然需要使用浮动,我们仍然需要清除浮动。此外,我们我们只能使用内边距作为元素的空间,外边距不再起作用。这意味着在快元素之间没有实际的空间,而是它的内容。虽然这对很多设计非常有用,但仍然觉得它是个小错误。

1.Firefox 1
2.Chrome 1
3.IE 8
4.Opera 7
5.Safari 3

三、width: calc(百分比 – 距离)

另一个伟大的选择是使用calc()函数。他允许我们在不依赖JavaScript的情况下计算元素的真实宽度——可以是不同的单位!

HTML

复制代码
代码如下:

<div class="row">
<div class="column">Col one</div>
<div class="column">Col two</div>
<div class="column">Col three</div>
<div class="column">Col four</div>
</div>

CSS
复制代码
代码如下:
.row { margin-left: -1em; }</p> <p>.row:after {
clear: both;
content: '';
display: block;
}
.column {
float: left;
margin-left: 1em;
min-height: 8em;
padding: 1em;
width: -webkit-calc(25% - 3em);
width: -moz-calc(25% - 3em);
width: calc(25% - 3em);
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

效果:
CSS3网格的三个新特性详解

重新计算实际尺寸的能力是一个伟大的选择,但不幸的的是,我们仍然需要浮动,我们也需要列的容器为负外边距。同上,一个很棒的选择,但仍然有些瑕疵。

1.Firefox 4
2.Chrome 19
3.IE 9
4.Opera ?
5.Safari 6 (appears to be a little buggy)

四、Flexbox

伸缩布局盒是有特定配置行为的元素——有点像表格。这是真的吗?是的没错。表格的行为实际上相当棒,因为它的显示依据它的内容而变化。但现在已经不再使用表格布局,所以表格标签不是一个选项。
起初,伸缩盒看起来有待年复杂。有很多很难理解的属性,尤其像我这样不擅用英语演讲的人。幸运的是,Chirs Coyier写了一个关于伸缩盒的伟大指导,我必须提到。
HTML

复制代码
代码如下:

<div class="row">
<div class="column">Col one</div>
<div class="column">Col two</div>
<div class="column">Col three</div>
<div class="column">Col four</div>
</div>

CSS
复制代码
代码如下:
.row {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;</p> <p> display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.column {
margin: 0.5em;
min-height: 8em;
padding: 1em;
width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

效果:
CSS3网格的三个新特性详解

五、结论

尽管CSS3带来了许多新特性并且修复了一些历史遗留问题,在我看来,伸缩盒布局是用CSS创建弹性网格的唯一非hack方法。然而,不幸的是浏览器的支持表现平平。尽管如何,其他方法丰富了表现,所以他们是一个进步,并且他们有很好的浏览器支持。

HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 #HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 #HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 #HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 #HTML / CSS
You might like
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PDO::errorInfo讲解
2019/01/28 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python比较两个列表大小的方法
2015/07/11 Python
浅谈Python中的私有变量
2018/02/28 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
爱与责任演讲稿
2014/05/20 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
2015年售票员工作总结
2015/04/29 职场文书
导游词之镇江焦山
2019/11/21 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python 爬取吉首大学网站成绩单
2021/06/02 Python