昆明UI培训
达内昆明五一路

18487146383

热门课程

几个前端概念

  • 时间:2017-03-21
  • 发布:昆明UI培训
  • 来源:UI中国

今天昆明达内培训机构小编跟大伙一起聊聊:几个前端概念

1.盒子

不管是文字、图片,还是组合体都可以看成一个盒子。

(1)前端实现的时候需要通过外边距(margin)来控制盒子与盒子之间的距离。

(2)通过内边距(padding)控制内容(比如下图中的内容是一行文字)在自身所在盒子的位置,这个相当于photoshop图层效果里的内描边。

内(外)边距是分上、下、左、右4个方向的。我们在标注的时候,需要标注出不同的间距值。

(3)描边(border)相当于photoshop图层效果里的外描边。

2.固定布局、流动布局与弹性布局

几个盒子可以组合成为区块(div),跟我们设计的页面布局是对应的。

(1)固定布局:指网页里的几个区块都有固定的百分比或者像素值。不管窗口分辨率如何变化,用户看到的都是固定宽度的内容。因为大部分用户的屏幕分辨率都在1024x768及以上,960px成为了常用网页内容宽度。但是近些年,1024x768的显示器占比份额越来越少,不少网站直接把宽度直接设成1200px。

把UI中国页面窗口缩小后,如下图,发现网页内容宽度并没有改变,只是被窗口截断了。

(2)流动布局:指网页区块的宽度或者间距是按照百分比设置的,会根据用户浏览器窗口尺寸自适应。

把百度文库网页窗口缩小后,左侧文档预览区的宽度变小了,间距并没有变化,只是文本段落的宽度变窄了,如下图。

(3)弹性布局:弹性布局与流动布局有相似的地方,可以根据浏览器窗口宽度调整网页内容宽度。不同的是,弹性布局尺寸主要是根据文字大小而变化的。弹性布局的单位是em或rem,对这个好奇的小伙伴可以找前端聊聊。一般浏览器默认的基础字号为16px,那么1rem(1个单位)=16px,当前大标题文字大小=4.5rem=4.5x16=72px;当在设置里将字号改为28px后,这时大标题文字大小=4.5em=4.5x28=126px;页面宽度也跟着对应比例变大了。

(4)混合布局:以上布局综合使用2种及以上,比如有些区块宽度是固定值,某些区块宽度是自适应缩放的。

3.绝对定位与相对定位。

今天达内Web培训机构老师关于前端概念的知识分享到这里就告一个段落了,详情请关注昆明达内培训机构:(http://km.ui.tedu.cn/

上一篇:零基础要如何学UI设计?
下一篇:关于几款手机的浏览器

商业目标与产品面貌!

电商设计师价值!

资深设计师比新手高在哪?

哪些UI错误,让APP置于死地的?

选择城市和中心
贵州省

广西省

海南省

扫一扫

了解更多干货