优秀的编程知识分享平台

网站首页 > 技术文章 正文

css零基础自学教程(八)float,overflow,z-index属性

nanyue 2024-10-08 05:45:19 技术文章 8 ℃

一 float属性

float属性,可以将元素向左或向右推,以允许其它元素环绕它.

float通常与图像一起使用,但在处理布局时也很有用.

float属性的值是left,right和none.

●left,right会使元素向左或向右浮动.

●none能确保元素不会进行浮动.

元素是水平浮动的,这以为着元素只能左右浮动,不能上下浮动.

如果连续放置几个浮动的元素,那么如果有足够的空间,它们将相互浮动.

例如,在设置页面布局中,可以通过设置浮动将图像和文本设置到页面中,使得文本可以跟图像并排显示.

二 清除float

元素设置了float属性后,会使后面的元素都受其影响,将环绕在其周围.为了避免这种情况,请使用clear属性.

clear属性指定某个元素不受其他设置了float属性的元素的影响.

在下面的例子中,如果我们将div元素设置为float属性,则div元素后面的段落将环绕在图像周围.

html代码:

<body>

这段落在div元素之上

不受浮动属性的影响

<div class="floating"><image src="background-image.jpg"/></div>

这段落在div元素之后

受浮动属性的影响.

<div>这一段也在div元素之后

受浮动属性的影响

</div>

</body>

css代码:

.floating{float:right;}

效果如下:

如果有一个具有float属性的元素,在这个元素之后的那些元素都将受到影响.

clear属性可以使用right,left和both来指定某一个元素不受其他浮动元素的影响.

默认值是none,它不清除任何浮动属性,它允许在两边都有浮动元素.

both用来清除左右两个水平方向的浮动效果.

三 overflow属性

页面上的每个元素都是一个盒子.如果没有设置盒子的高度,那么盒子的高度将随着所需的内容的增大而变大.

html代码:

<div>

这个文本在div元素里面,它有一个蓝色的

背景颜色,并浮动在左侧.我们设定一个具体的

div元素的高度和宽度,正如你所看到的,这样会导致文本内容的溢出.

</div>

css代码:

div{width:150px;height:150px;background-color:LightBlue; float:left; }

效果如下:

overflow属性有四个值:visible(默认值),scroll,hidden和auto

scroll值能阻止内容溢出,但会增加出滚动条,通过拉动滚动条可以浏览所有内容.

css代码:

div{width:150px; height:150px; background-color:LightBlue; float:left; overflow:scroll;}

效果如下:

auto:如果内容溢出被限制,则会添加一个滚动条,使超出的内容可以通过滚动展示出来.

hidden:隐藏掉内容溢出的内容.

overflow的默认值是visible

四 z-index属性

当元素位于正常流程顺序之外时(受position等属性影响时),它们可以重叠于其他元素.

z-index属性指定元素的堆栈顺序(通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面)

html代码:

<div class="blue">blue(w3cschool)</div>

<div class="red">red(w3cschool)</div>

css代码:

.blue{background-color:#8EC4D0; margin-bottom:15px;width:120px; height:120px; color:#FFF;}

.red{background-color:#FF4D4D; position:relative;width:120px; height:120px; color:#FFF; margin-top:-50px; margin-left:50px;}

效果如下:

红框与蓝框重叠,红框会位于蓝框上方,因为红框是后加载的.

设置z-index属性可以改变这个顺序

为蓝色div元素指定较高的z-index值,为红色div元素指定较低的z-index值(值大的元素重叠在上边.)

css代码:

.blue{background-color:#8EC4D0; margin-bottom:15px;width:120px; height:120px; color:#FFF; z-index:4;}

.red{background-color:#FF4D4D; position:relative;width:120px; height:120px; color:#FFF; margin-top:-50px; margin-left:50px;z-index:2;}

z-index仅适用于定位元素(position:absolute,position:relative或position:fixed)

Tags：

猜你喜欢

最近发表
标签列表