CSS3定位和浮动详解_ Div+Css教程-查字典教程网
CSS3定位和浮动详解
CSS3定位和浮动详解
发布时间:2016-12-27 来源:查字典编辑
摘要:本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下一、定位1、css定位:改变元素在页面上的位置2、css定位...

本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下

一、定位

1、 css定位:

改变元素在页面上的位置

2、 css定位机制:

普通流:

浮动:

绝对布局:

3、 css定位的属性:

position 把元素放在一个静态的,相对的,绝对的,或者固定的位置中

top/left/right/botom 元素向上/左/右/下的偏移量

overflow 设置元素溢出其区域发生的事情

clip 设置元素显示的形状

vertical-align 设置元素显示的对其方式

z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序,越大越在上方/

position的属性

static 静态的(默认)

relative 相对布局(默认的)

absolute 绝对布局 (和其他的标签无关联)

fixed 固定的(不会随着页面的滚动而动)

实例代码:

CSS Code复制内容到剪贴板 <body> <divid="position1"></div> <divid="position2"></div> <script> for(vari=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> #position1{ width:100px; height:100px; background-color:blue; position:relative; left:20px; top:20px; /*用来设置元素的堆叠顺序,越大越在上方*/ z-index:2; }#position2{ width:100px; height:100px; background-color:red; position:relative; left:30px; top:10px; z-index:1; }

二、浮动

float属性可用的值:

left/right/none/inherit: 向左、右,不浮动,从父级继承。

* float

1.浮动后,脱离正常流,在浮动流中排列。任何元素都是作为块元素来显示,可设置宽高,内容撑开宽度。

2.很多浮动块在一起的时候,他们总是找与自己最近的、浮动方向相同的块来确定自己的位置,如果被迫换行,则以这个最近的元素的高度为基准起新行

clear属性: 去掉浮动属性(包括继承来的)

意思和上面对应的一样

需要清浮动的情况:

子标签浮动后,父标签的高度无法被撑开,所以需要清浮动;

新加入的标签,希望不受之前浮动元素的影响,则需要清浮动;

1.clear:both; height:0; overflow:hidden;

2.overflow:hidden; 触发layout 常用于清楚内浮动;

3.after 伪对象:给当前对象设置

.aa:after {content:”.”}

.aa {display:inline-block;}

.aa {display:block;}

想办法 触发ie6的layout渲染机制,靠运气解决了很多bug,zoom:1可以触发!!!

inline-block对内块 对外行;

4.父标签一起浮动;

5.position:absolute;清除浮动

display

display:block 以块元素显示;

display:none 内容消失,不占空间;

display:inline 以行内元素显示,可解决IE6的双倍BUG;

display:inline-block 对内块,对外行。

visibility:none

隐藏,但是依旧占用空间,影响布局

以上就是关于CSS3定位和浮动的全部内容,希望对大家的学习有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类