你的位置:首页 > 网页设计

[网页设计]css 基础1


css 基础1

20161128

前面的两篇内容中已经涉及到了简单scc基础,这里就不再赘述,今天从元素间的距离说起!

一,元素的距离计算

  1,两个水平方向的容器s1,s2之间的距离计算为s:

      s = s1的margin-right + s2的margin-left(+默认值)

 

 

 

 

  2,两个垂直方向的容器s1,s2之间的距离计算为s:

    s1的margin-bottom和s2的margin-top之间的较大者

 

 

 

  3,两个包含关系的容器s1,s2之间的距离计算为s, 假设s1为父元素

       s1的padding和s2的margin的和

 

二,浮动:(float)

  一个元素浮动向左浮动之后:

  1,该元素向左浮动的位置由父元素的padding和本身的margin 决定,同时本身变短(padding,内容,宽高决定)

  2,下面的元素会把它原来的位置占据

  3,float:right(右)   left(左)    none(不浮动,默认属性)    

  4,clear:(清除浮动)

  left  right  both(全部)

 

 

 

 

三,定位(position)

  1,绝对定位 (absolute)

  2,相对定位: (relative)

  相对元素原来的位置 进行定位

       * 如果一个元素有定位, 先查找父元素是否有定位

      1,如果没有,以body为基准定位

      2,如果有,就以父元素为基准定位

 

 

 

 

 

 

四,层级(z-index) 

  * 需要配合定位才起作用,数字越大,越排在上面。

  默认值为0,可为负值。