CSS Grid Layout(网格/栅格布局)是 CSS 最强大的布局系统,随着设备和浏览器的升级,将会是未来的主流的布局方案之一。
一、介绍(Introduction)
概述(Basic)
CSS Grid Layout 简称为Grid
,网上普遍译为网格
,其实更规范的说法应为栅格
。
栅格
对有经验的 UI 和 FE 来说并不陌生,肯定会想到栅格系统(Grid Systems)
。
这“系统”早在欧洲中世纪就已经出现,当时主要用于文字排版,随着时间的推移逐步发展到平面及其他“设计”领域。
在我印象中 08~09 年左右,网页栅格化设计(Grid Design)
已经出现并被广泛使用,所定义的12栅格
、24栅格
等规范方案仍一直被沿用至今。用通俗的方式来讲:就是以一定规则的网格阵列,规范化网页布局。
CSS Grid包含了
栅格化设计的特性,是第一个专门为解决布局问题而创建的CSS 模块
。如果你熟悉栅格系统
和栅格化设计
那对栅格布局
的理解会起到一定帮助。
好的栅格布局,对于模块、元素而言都有规律可循,能在不同尺寸/分辨率下呈现最优的方式,使网页更灵活和易于扩展。但同时也考验设计师,对于不同尺寸的把握,针对前端来说也是如此。
之前使用栅格需要用到Bootstrap
等的框架,并且每个框架都有一套属于自己的栅格规范
,现在网格布局使我们可以更为简单的实现,无需依赖框架。 [ 查看全文... ]
CSS BEM 解读
概要
BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的(模)块,使开发更为简单和快速,利于团队协作开发。
特点
- 组件化/模块化的开发思路。
- 书写方式解耦化,不会造成命名空间的污染,如:
.xxx ul li
写法带来的潜在嵌套风险。
- 命名方式化扁平,避免样式层级过多而导致的解析效率降低,渲染开销变大。
- 组件结构独立化,减少样式冲突,可以将已开完成的组件快速应用到新项目中。
- 有着较好的维护性、易读性、灵活性。 [ 查看全文... ]
在一次聊天中讨论到如何利用CSS来制作一个按钮,不但能自适应宽高,并且还要在不实用图片的情况下,让按钮有类似“外描边”、“内描边”和圆角的效果,并且兼容IE6、IE7。所以今天特地花了点时间来做这个。
当完成以后,发现单纯的按钮有点单调,就想加点ICON来美化一下。可既然按钮都是用CSS来完成,那ICON还用图片来显示,是否有些背道而驰,所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下,也加入一些CSS3属性,起到渐进增强的目的,让“高级用户”能够得到更好的呈现效果。
这样做的好处在于按钮和图标颜色都能通过CSS来调整,维护起来比较方便。还有就是CSS的渲染速度比较快,同时还减少了HTTP请求量。
不过,并不是说用CSS必定比图片好,关键还是要根据实际环境和需求,合理使用才是关键。
本例兼容:IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]
图片水平垂直居中、文字(多行文字)水平垂直居中,这是个老生常谈的问题,也经常有人提及这个问题,至此写个案例作为备忘。
主要用到的CSS属性就是display:table-cell[指定对象作为表格单元格。类同于html的td标签]。应用与已知外层容器宽高,但内部图片大小和文字数量未知的情况。
注:使用display:table-cell的时候,当前元素不支持margin和position属性,这个问题往往容易被人忽略。 [ 查看全文... ]
现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。
其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已。
首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行。
HTML CODE:
<div id="header">Default header. No absolute and fixed.</div>
<div id="topToolbar">Fixed at the top of the Toolbar.</div>
<div id="content">
<p>此处省略1000字...</p>
</div>
<div id="bottomToolbar">Fixed at the bottom of the Toolbar. By Bluesdream.com</div>
[ 查看全文... ]
今天的例子中,我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。
对于preserve-3d,这里要说明的是,它只影响这个元素的子元素(二级元素),孙元素(三级元素)如果也想拥有3D模式,那么就必须给它的上级元素(父元素)也添加preserve-3d。
box-sizing是我们平时比较少接触到的属性,其分辨有2个值content-box和border-box。
content-box:此属性表现为标准模式下的盒模型(当我们设置元素的width和height时,它的宽度不包括border和padding。例:width:100px; border-width:10px; 元素实际宽度为220px;)
border-box:此属性表现为怪异模式下的盒模型(和content-box相反,它的宽度包含border和padding。例:width:100px; border-width:10px; 此时的border相当于内边距,元素实际宽度仍为200px;)
好了,接下来我们就看例子吧:
[ 查看全文... ]