html css技能,HTML5+CSS3进阶技能详解

当今最火热的前端框架的核心你知道吗？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

content-box

宽高200px的方块，内边距和边框线没有包含在宽高200像素里面，而是让总的宽高增加了20x2px+1x2px,一共是242px。(这让网格布局变得非常难以控制，特别是百分比宽度＋1像素边框线的时候，网格布局就没法用)

◮box-sizing: border-box;

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