一直以来都是一个后台开发者,对前台页面的了解非常少。
对于web界面,有两个抽象的认识:很容易(要写一个表单、一个信息展示页面是非常简单的)。很难,要实现页面的精美布局,实现动态效果,并且容易变化是很难的。
前者是对简单的html element来说,掌握很容易,后者是对复杂的css属性以及其组合方式来说是非常的难。
说页面难以控制,其实是对layout(布局)的理解不够导致的。我会常常为了放置一个元素而无法精确的定位其位置而头痛,在加上一些动态效果和并不专业的页面设计,整个过程就变得非常的困难了。
首先要了解页面的两个重要概念inline和block,inline表示元素在一行内排列下去,而block则是一个元素为一行的排列。典型的<span>是inline的,<div>是block的。这些element可以随着css样式控制来改变inline、block的格局。在css中改变元素这重要属性的方法是通过display来改变。
box的表示方法,有一组属性:width、height、border、padding、margin;一个盒子,他的尺寸是由inbox(width、height)、内边距(padding)、边框(border)和外边距(margin)构造而成。
position ,整个页面如同流水一样,在一个层面上,按照inline和block的方式一个一个呈现的,我们可以通过某些方法让元素脱离这个“流”,在另一个层面上来表现自己。 这就是position属性了,他的值有static、absolute、relative、fixed等,static表示在这个静态的流上,absolute表示相对于父元素,它的位置所在。relative,相对于前一个元素来指定他的位置,fixed,固定在浏览器上。