码迷,mamicode.com
首页 > Web开发 > 详细

css 定位(position)与浮动(float)

时间:2017-11-19 12:33:59      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:ati   文档流   ott   描述   没有   块级元素   布局   relative   tab   

html的文档流:

  元素排版布局的过程:块级元素:从上至下;行内元素:从右至左。

 脱离文档流:

  方式:postion和float

postion
描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

不可以与float一起用。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

 relative  

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

 static  默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

 

 

 

 

 

 

 

 

 

 

 

 

 

position的值为absolute、fixed的元素脱离文档流,static、relative没有脱离文档流

 

float:浮动元素

  定义元素在哪个方向浮动

display元素:

  1) none :此元素不被显示;
  2) block :此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素
  3) inline :此元素按内联元素显示:1个挨着1个。块元素 → 内联元素

 

css 定位(position)与浮动(float)

标签:ati   文档流   ott   描述   没有   块级元素   布局   relative   tab   

原文地址:http://www.cnblogs.com/shiyiandchuixue/p/7859191.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!