Android开发者的前端之路-页面篇

Web前端 来源:JayFang 44℃ 0评论

原文链接:Android开发者的前端之路-页面篇

首先我是一名Android开发者,从编程的角度来讲,已经不是零基础了,所以从Android开发者的角度入门前端,有不一样的认识,会经常把前端页面里碰到的东西和Android里面作对比,从而加深认识和理解。 所以打算写一个Android开发者前端入门系列,记录自己学习前端的历程。

前端入门第一阶段,我觉得就是切页面,也就是从设计图到静态页面的过程。就是说设计师给你任何一张设计图,你要有思路怎么去实现,怎样去布局,可以认为就是Android里面写layout布局的东西。这部分主要就是HTML,CSS技术。

基本的一些HTML标签是必须要知道的,body,head,p,img,span,div等等,这些就相当于Android里面的TextView,imageview,RelativeLayout。和Android里面一样,前端里一样有background、margin、padding等属性,这些从Android过来都不陌生,使用上也很简单,这些就不用介绍了。

行内元素、块级元素

在了解布局之前,必须先要了解行内元素和块级元素两个概览。

  • 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),而内联元素则都会在一行内显示。
  • 块级元素可以设置 width、height 属性,而内联元素设置无效。
  • 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
    最常见块级元素应该是 < div > 吧,行内元素有 < span > < a > < img >

Display属性修改元素性质

  • none 此元素不会被显示。
  • block 此元素将显示为块级元素,此元素前后会带有换行符。
  • inline 此元素会被显示为内联元素,元素前后没有换行符。
  • inline-block行内块元素。(CSS2.1 新增的值)

CSS布局

定位

CSS有几种基本的定位机制:普通流,浮动和绝对定位以及固定定位

  • 默认情况下都是普通流定位 positive:static
    就是按照块级元素垂直换行,行内元素水平的布局方式。

     

     
  • 相对布局positive:relative
    在普通流的基础上,相对于它本身在普通流中的布局位置做便宜。这一点与Android中的RelativeLayout是不同的。

     

     
  • 绝对布局positive:absolute
    绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。

     

     


    距离他最近的非static祖先元素就是父布局的div,所以相对于绿色边框的div偏移。

  • 固定定位positive:fixed
    这个是相对于整个浏览器的页面,不在普通文档流中。

     

     

浮动

浮动可以看成在普通文档流之上将元素在父布局内向左或者向右排列对齐的一种方式。
比如:

 

 

从效果上看,相当于把红色布局抽出来,所以绿色占用了之前红色的位置,红色在父布局内向右排列。

 

 


这个因为是向父布局的左边浮动,所以红色盖住了本来在普通文档流中的绿色块。

 

 


如果子div全部浮动的话,可以看出父布局的高度为0,因为普通文档流中压根没有元素。这个时候可以使用 clear:both,对元素清理实际上为前面的浮动元素留出了垂直空间。 也可以为父布局添加 overflow: auto;

 

 

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住。

 

 

居中布局

居中布局的效果在这里可能不如Android里面那么方便,Android里面使用RelativeLayout就可以使用centerVerticalInParent等。

水平居中

水平居中还比较容易实现,可以使用margin left、right auto来实现,也可以使用绝对布局来实现,代码如下。

.md-main{
    margin: 0 auto;
}
.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

如果是单行文字,还可以使用text-align属性来实现水平居中。

text-align: center

垂直居中

垂直居中虽然有很多实现方法,但是也需要根据使用场景来选择合适的方案来实现,因为有些实现对父布局有一些使用限制。

绝对布局实现方案

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    /* 核心 */
    top: 50%;
    margin-top: -50px;
}

单行文本,将其line-height设置成和height的值一样

div{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}

display:table 对父布局有要求

/** 父布局 **/
display:table;
/** 子布局 **/
display:table-cell;
vertical-align:middle;

长度单位

现在常用的单位就px和em,比较推荐的是em单位。
px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。
em:相对长度单位。相对于当前对象内文本的字体尺寸。

单位转换
PX to EM: Example: 12px / 16px = .75em
EM to PX: Example: .75em * 16px = 12px

最后推荐一套CSS布局的教程,学习CSS布局 虽然不是系统的介绍各个属性,但是介绍的都是很常用的技巧。还有前端页面学习还是要多实践,去设计网站上找一个设计图来实践,切勿去实现自己脑海里大概的页面,因为这样会因为某个难点无法实现而去改页面的样子。

相关文章