三个属性

display属性规定元素生成框的类型。较为常见的有none-缺省值(用于隐藏元素,元素会消失于视界和文档流中),block-块级元素,inline-block-行内块级元素,list-item列表样式块级元素……….(display种类很多,可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp

position属性规定元素的定位类型,常用于布局。static-默认值,元素出现在正常文档流中(此时不受top、left、right、bottom、z-index等属性影响);absolute-绝对定位,脱离文档流,相对于它第一个非static父元素进行定;fixed-固定定位,脱离文档流,相对于浏览器窗口进行定位;relative生成相对定位的元素,没有脱离文档流,相对于其正常文档流中的位置进行定位。

float属性,定义一个元素浮动方向,最初用于图像使文本环绕,现在是一种布局方式。不论浮动元素本身是何种框类型,浮动后会生成一个块级框

三个属性的关系

  • 如果display的值为none,那么后两者就不会产生作用,也不会有任何的盒子产生;
  • 除此之外,如果元素为absolute或者fixed定位,那么float的属性值相当于‘none’,display的属性如下面的表格所示。 盒的位置根据“top”,“right”,“bottom”和“left”属性与盒的包含块决定。
  • 如果float属性的值为不是none,那么元素将会浮动,元素的display属性将如下表所示;
  • 如果元素是根元素,那么元素的属性如下表所示;否则元素的display属性则根据设定来取值。

 display  position float 之间的关系-LMLPHP

display  position float 之间的关系-LMLPHP

 

 

11-13 12:02