CSS样式设计概要

css样式设计中,最主要的三个概念是:盒模型(box model),定位(position)和浮动(float).这三个概念控制dom元素在页面上的排列和显示方式,他们是布局的基础.

盒模型(box model):
      网页上没一个元素都是一个矩形框(盒模型).可能我们没有看到盒本身,但实际上我们看到的内容都是包含再一个个的"盒"中的,这是因为浏览器的初始设置把"盒"的边框隐藏了.
      边框(border),内容(content),内容和边框的距离(内边距padding)以及与其他元素的距离(外边距margin)是盒模型的4要素.
      
定位(position):
      定位决定了网页元素的表现形式.浏览器根据每个dom元素在html中出现的顺序,依次一个接一个排列,形成一个"流",这种流区别于浮动和绝对定位这两种比较特殊的定位方式,称为"普通流".
      css有三种基本的定位机制:普通流,浮动和绝对定位.(相对定位可以看作是普通流定位的一部分)
      定位position有以下几个主要属性:static(默认),absolute(绝对定位),relative(相对定位).
      这里的absolute(绝对定位),可以把某个元素精确的定位在某个地方.绝对定位的元素的位置相对于"最近"的"已定位"的祖先元素,如果没有已定位的祖先元素,那么它的位置相对于body.
      relative(相对定位)所谓的"相对",是相对于本元素相对于在普通流中的初始位置,它的"相对目标"是原本的自身!

浮动(float):
      float有三个属性:left,right,none.
      它一般使用在页面布局的功能上(在UI组件设计的领域,浮动并不是太主要的概念.).
      与浮动相关的另一个概念是清除(clear).略过...