html05 overflow和z-index的用法

最新推荐文章于 2022-08-24 21:27:24 发布

wuhan_yking

最新推荐文章于 2022-08-24 21:27:24 发布

阅读量922

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/wuhan_yking/article/details/52755194

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、overflow

①含义

overflow 属性规定当内容溢出元素框时发生的事情

②值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

③实例探究

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box{
        width: 120px;
        height: 120px;
        overflow:hidden;
    }
    #content{
        width: 120px;
        height: 200px;
        background: red;
        float: left;
    }
</style>
<body>
<div id="box">
    <div id="content">我是内容</div>
</div>
</body>
</html>

overflow:hidden有两种作用：1>隐藏溢出；2>清除浮动

overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。

<html>
<head>
    <style type="text/css">
        img
        {
            position:absolute;
            left:0px;
            top:0px;
            z-index:-1;
        }
    </style>
</head>


<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>