当今最火热的前端框架的核心你知道吗?web端最常用的三种布局方法想掌握吗?没有设计和交互,图标该怎么办?是不是还在为表单布局而烦恼?入门那么久,还没找到进阶的突破口?本篇文章给你解析中级前端必须掌握,后端程序员需要了解的前端知识。
一、盒子模型
首先要提一下盒子模型,因为它是下面说讲知识点的基础,不熟悉它,想做一个轻型的前端CSS框架是一件非常困难的事情。
在04年的网站重构刚流行的时候,不知道盒子模型是很正常的事情。那时候还没有网格系统,更没有前端框架,能把前台Table布局的页面用网站重构的标准写成DIV+CSS的页面就已经非常难得。
现在十几年过去了,各种成熟的前端框架都已各成格局,这个时候如果再不认识盒子模型,那......也要赶紧补上了,因为它是前端CSS框架核心的最基础的属性。
1.现在盒子模型的用法
上面这段代码让所有元素和伪元素在兼容各种主流浏览器的情况下,盒子模型都使用border-box的属性。没错,现在的前端框架都在用这个属性来重新定义盒子模式。定义盒子模型的原因是,基本上所有的浏览器,还有W3C标准里使用的盒模型都不是border-box,而是content-box 。
这里有一个关于微软和W3C有趣的故事,从现在的角度讲,IE6 /7快速模式(怪异模式)使用的border-box盒子模型比当时NB哄哄的W3C标准不知道要先进多少年,虽然曾经IE 6/7的标准模式的兼容让多少初学者放弃。
2.盒子模型组成
盒子模型由外边距(margin),边框线(border),内边距(padding)和自身元素的内容区域(width&height)组成,它主要在定义元素的宽度高度和布局上起作用。盒子模型的属性分三种,默认是content-box,然后是现在流行的border-box,最后是继承父元素的inherit。
◇content-box
content-box在计算元素总体宽高的时候会把padding和border的值和元素内容区域的宽高相加。如果你的样式没有定义盒模型,那你一直在用的就是它了。
◇border-box
border-box只计算内容区域的宽高,padding和border都包含在元素内容区域。这个属性是各种网格系统的基础。
◇Inherit
Inherit属性同上面两种。
3.Box-sizing:border-box的兼容性
只有早期的IE6 7不支持border-box,其它浏览器都支持(比IE 6/ 7还老的古董浏览器除外)。
◕举个例子
◮box-sizing: content-box
宽高200px的方块,内边距和边框线没有包含在宽高200像素里面,而是让总的宽高增加了20x2px+1x2px,一共是242px。(这让网格布局变得非常难以控制,特别是百分比宽度+1像素边框线的时候,网格布局就没法用)
◮box-sizing: border-box;
宽高200px的方块,内边距和边框线都包含在了宽高200像素里面。
二、网格系统
各种前端CSS框架的核心,随着技术的更新,衍生出很多不同用处的网格系统。网格一开始并不应用在互联网,而是新闻出版社用来排版所设计出来的。
后来随着互联网的发展,人们对互联网网站的设计要求越来越高,DIV+CSS的布局方式也渐渐取代了传统的TABLE布局,于是有人把网格的排版方式应用到了互联网网站的布局中来。从最早的960网格,到现在的自适应网格,百分比布局,瀑布流和针对手机端的Flex布局,几乎都是网格的衍生物。
1. 12栏网格系统
网格按照平均分的份数来分,可以分为12栏,16栏和24栏。其中12栏最为普遍和实用,主流的框架都用12栏网格系统。
DOM结构主要由1个父容器类g-wrap的层和3个子容器类g-grid-4的层组成。
父容器类g-wrap主要用来清除子容器的浮动,并把子容器往左拉一定距离(内容器的左边距宽),使每行左右两边的子容器的左右空白处消失(排版需要)。子容器类g-grid-1到g-grid-12是按比例分的12个网格类,用户可以用这12个类来布局网页。
2.网格的应用场景
网格系统的应用场景非常广泛。宽屏和手机端适配可以灵活的应用百分比网格。窄屏和文档类网页可以使用固定宽度的网格系统。自适应的网页和web APP基本也都是以网格系统为基础来布局页面的。
◕举个例子
通过媒体查询(@media)结合网格,我们可以很容易地让网格在不同设备上有不同的布局方式,且代码量少。
三、常用布局
1.品字形布局
品字行布局多用于后台系统,采用头部通栏显示,底部左侧导航栏垂直平铺,底部右侧显示主要内容。思路上我们可以采用头部,底部左侧用fixed定位,右侧内容用margin值隔开头部高度和底部左侧的宽度即可。
2. 3栏居中布局
3栏居中布局是最为普遍的网页布局方式,分为上中下三栏,头部通栏,中间固定宽度水平居中,显示主要内容,底部通栏。思路上我们中间可以结合媒体查询,在宽屏,桌面和平板显示器上固定不同的宽度即可。
3. 百分比布局
百分比布局类似瀑布流,多用于显示内容较多的图片集或图文混排,分三栏,头部通栏,中间由若干个网格排列而成,显示主要内容,底部通栏。思路上我们中间用百分比的网格系统即可。
◕举个例子
上面讲的百分比的布局,只要结合媒体查询就可以做出一个简单的瀑布流效果。思路上我们对网格在不同设备下追加不同网格数的类,覆盖即可。DOM同百分比布局不变。
四、文字图标
假如团队没有交互和设计,那一定不能没有文字图标。说起文字图标,有个事情,一定让人感到十分惊讶:那就是IE4开始已经支持@font-face了,只是近些年才被大家广泛使用而已。@font-face一开始只是加载字体,比较熟悉的就是各种漂亮的谷歌字体了。英文只有26个字母,而汉字呢,所以这个属性一直在国内无人问津。
直到扁平化时代,各种优秀的文字图标库被开源出来,我们终于可以用这个文字图标来替换小图片了(原本的图片图标定位难,修改不方便和加载缓慢)。
1.文字图标的使用方法
文字图标的使用方法只有3步:
步骤一:下载一个文字图标的库文件和一个用来寻址的CSS文件;
步骤二:在图标库的展示页面里找到想要的图标;
步骤三:把图标对应的类名字放在i标签的类后面。
使用一个飞机图标你可以这样…
2.常见的使用场景
文字图标可以应用在所有网页和web APP中,你可以定义它的大小,颜色,背景色,位置等文字所有和不具有的属性。图标都是矢量的,不会失真。结合CSS3动画你甚至可以做一个场景动画片。
五、表单布局
表单布局是数据交互的基础,想做好交互,先学好表单布局。一开始表单布局都用Table来布局,后来随着重构兴起也渐渐被div和其他像label、dt等标签所取代,不变的是它们都是用浮动来布局表单。
1.表单布局与柵栏系统
单列的表单只需要每行设置表单和表单名称即可,遇到多列且表单项多时,就可以结合柵栏系统来排列了。
这种布局方式灵活,美观,易维护,大大减少开发维护时间。
◕举个例子
下面是一个文本输入框的表单项
版权所有 侵权必究
如需转载请联系
0571-28829811