关于网页设计，你至少要了解这些前端技术

如果你对于前端技术丝毫不懂，而且经常被老板diss，跟前端撕逼只能哑口无言那么这篇文章真的很适合你。

web前端简介

web前端开发会涉及到三种“语言”分别为“html”、“css”、“js”三种文本格式，文件后缀也是如此，html的作用是网页的内容。css的作用是设置网页的位置、排版等，由于css3的新特性，css也可以用于处理一些基础的动画、交互效果。js全称为：JavaScript js负责提供语法来操控文本、数组、日期以及正则表达式等由于这里我也不是很懂，为了避免误人子弟，遂在此文章中不再赘述。 

盒子（div）

如果说一个页面是一个仓库的话那么网页的内容就是仓库中的货物了.
为了使这个仓库更整洁美观，所以需要一个又一个的盒子把所有的货物装纳进去并整理摆放。
而这个盒子，就是我们所讲的 div 了，于我们所熟知的盒子不同，由于网页的限制，它是一个二维的盒子，所以只有长、宽两种尺寸属性，而且 div 不只可以单独使用，也可以互相嵌套，说出来也许你不信，盒子中的盒子中的盒子中的盒子中的盒子中的盒子中的盒子中的盒子中的盒子中的盒子中的盒子这种情况在网页制作这个环节也是会经常发生的事。

以站酷首页为例,截图部分可以分为header、body这两个大的部分，header中又分为logo、tabbar、icon、头像几个部分。这就是盒子的基础用法，在这基础上，还需要margin（外边距）padding（内边距）来设置盒子之间的距离，为了便于理解你可以把 margin 想象成盒子之间的间距，padding 可以想象成盒子内的填充物。

图片中蓝色部分为margin，黄色部分为padding；这两个属性是没有宽度的，为了方便标注，所以标注为了矩形。 

长度单位

px

应该是设计师最常用的单位了，遂不赘述。 

pt

前端很少用到这个单位，遂不赘述。 

em

1em = 1个父级元素的文字大小。
例如一个盒子的font-size（文字大小）的值为14px，那么这个盒子中的 1em就是14px；

rem（font size of the root element）

rem相当于root em，其中 r 代表的是“根”而网页的“根”代表的就是 html 标签。

vh

1vh = 屏幕可视化区域的1%
例如电脑屏幕的分辨率为1920*1080
那么1vh就是10.8px 

vw

1vw = 屏幕可视化区域的1%
例如电脑屏幕的分辨率为1920*1080
那么1vh就是19.2px 

百分比

1% = 父级元素的长／宽度的1%
例如父级盒子的宽度是100px那么这个盒子内部的width:1%;（宽度：百分之一）那么这个宽度就是1px