冲刺 HTML学习笔记（五）定位、溢出属性、清除浮动、z-index、透明度

最新推荐文章于 2023-03-03 14:57:03 发布

团子的守护

最新推荐文章于 2023-03-03 14:57:03 发布

阅读量387

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_51734025/article/details/122182434

版权

忙里偷闲来总结一波,这也将是最后的关于HTML的小结，后面将开始js之旅

一、解决浮动带来的影响

浮动会造成父标签塌陷问题

那么如何解决浮动带来的影响呢？

"""

1、可以自己加一个div设置高度

2、利用clear属性

3、在写html页面前，先提前写好处理浮动带来的影响的css代码(通用的解决浮动带来的影响)

.clearfix:after{

content:'';

display:block;

clear:both;

}

之后只要标签出了塌陷的问题就给该塌陷的标签加一个clearfix属性即可

"""

首先为大家展示下浮动带来的父标签塌陷的效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        #d1{
            border: 2px solid blueviolet;
        }
        #d2{
            height: 100px;
            width: 100px;
            background-color: rosybrown;
            float: left;
        }
        #d3{
             height: 100px;
            width: 100px;
            background-color:#ff455b;
            float: left;
        }
       
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
</div>
</body>
</html>

效果演示

解决方案一、可以自己加一个div设置高度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        #d1{
            border: 2px solid blueviolet;
        }
        #d2{
            height: 100px;
            width: 100px;
            background-color: rosybrown;
            float: left;
        }
        #d3{
             height: 100px;
            width: 100px;
            background-color:#ff455b;
            float: left;
        }
        #d4{
            height: 100px;
         
        }
      
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>
</body>
</html>

效果图：

解决方案二、利用clear属性：

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        #d1{
            border: 2px solid blueviolet;
        }
        #d2{
            height: 100px;
            width: 100px;
            background-color: rosybrown;
            float: left;
        }
        #d3{
             height: 100px;
            width: 100px;
            background-color:#ff455b;
            float: left;
        }
        #d4{
     
            clear: left;/*该标签的左边（地面和空中）不能有浮动的元素*/
        }
      
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>
</body>
</html>

效果图：

解决方案三、伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        #d1{
            border: 2px solid blueviolet;
        }
        #d2{
            height: 100px;
            width: 100px;
            background-color: rosybrown;
            float: left;
        }
        #d3{
             height: 100px;
            width: 100px;
            background-color:#ff455b;
            float: left;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>
</body>
</html>

效果图：

二、 overflow溢出属性

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

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

小案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形头像示例</title>
    <style>
        body{
            margin: 0px;
            background-color: #7a77c8;
        }
        #d1{
            height: 250px;
            width: 250px;
            border-radius: 50%;
            border: 5px solid wheat;
            margin: 0px auto;
            overflow: hidden;
        }
        #d1>img{
            max-width: 100%;
            /*width: 100%;*/
      height: 100%;
        }
    </style>
</head>
<body>
<div id="d1">
    <img src="a.jpg" alt="">
</div>
</body>
</html>

效果演示：

三、定位（position）

1、静态static

所有的标签默认都是静态的static，无法改变位置

2、相对定位relative

相对于标签原来的位置做移动

3、绝对定位absolute

相对于已经定位过的父标签做移动（如果没有父标签就以body为参照）

4、固定定位fixed

相对于浏览器窗口固定在哪个位置

ps:当你不知道页面其它标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位时，用绝对定位

1、相对定位-代码实验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            0px;
        }
        #d1{
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
            left:50px;/*从左往右 如果是负数 方向则相反*/
            top:50px;/*从上往下 如果是负数 方向则相反*/
            /*position: static;!*默认是static无法改位置*!*/
            position: relative;/*
            相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然哪怕你没有动，但是你的性质已经改变了
            */}
          
    }
    </style>
</head>
<body>
<div id="d1"></div>


</body>
</html>

相对之前的位置向右移了50px，向下移了50px

2、绝对定位-代码实验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            0px;
        }
     
            #d2{
                height: 100px;
                width: 200px;
                background-color: dimgrey;
                position: relative;/*已经定位过了*/
            }
            #d3{
                height: 200px;
                width: 400px;
                background-color: #fe6676;
                position: absolute;
                left: 200px;
                top: 100px;
            }
   
    </style>
</head>
<body>
<div id="d2">hahahhhahhaha<!--浏览器是优先展示文本内容的（如果它发现文本内容被挡住了，会想方设法的找个位置展示出来）-->
    <div id="d3"></div>
</div>

</body>
</html>

div id="d3"相对于已经定位过的父标签div id="d2"做绝对移动

3、固定定位-代码实验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            0px;
        }
       
    #d4{
        position: fixed;/*固定定位 依据就是依据浏览器窗口*/
        bottom: 10px;
        right: 20px;
        height: 50px;
        width: 100px;
        background-color: purple;
        border: 2px solid black;
    }
    </style>
</head>
<body>


<div style="height: 500px;background-color: #fe6676"></div>
<div style="height: 500px;background-color: #7a77c8"></div>
<div style="height: 500px;background-color: #2b99ff"></div>
<div id="d4">回到顶部</div>
</body>
</html>

依据浏览器窗口,不随滚动条滚动而改变位置

四、z-index

设置对象的层叠顺序。

1、z-index 值表示谁压着谁，数值大的压盖住数值小的，

2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

下面我们以百度登录界面为例

分析：

百度登录界面其实是三层结构：

1、最底部是正常内容（z-index=1）

2、黑色透明区是中间块（z-index=2）

3、白色的注册区域离用户最近（z-index=3）

我们也用z-index做一个简单版的百度登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .cover{

            position: fixed;
            /*占据整个页面*/
            left: 0px;
            top:0px;
            right: 0px;
            bottom: 0px;
            /*占据整个页面*/
            background-color: rgba(0,0,0,0.4);
            z-index: 99;
        }
        .modal{
background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            /*居中页面*/
            left: 50%;
            top: 50%;
            /*居中页面*/
            z-index: 100;
            margin-left: -200px;/*从右往左移*/
            margin-top: -100px;/*从下往上移*/
        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>注册页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我</button>
</div>
</body>
</html>

五、验证浮动和定位是否脱离文档流（原来的位置是否还保留）

首先可以知道的是浮动肯定是属于脱离文档流的，接下来验证定位

1、验证相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--验证相对定位-->
<div style="height: 100px;width: 100px;background-color: #fe6676;position: relative;left: 20px"></div>
<div style="height: 100px;width: 100px;background-color: burlywood;"></div>
<!--验证相对定位-->

</body>
</html>

2、验证绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--验证绝对定位-->
<div style="height: 100px;width: 100px;background-color: #fe6676;"></div>
<div style="height: 100px;width: 100px;background-color: red;position: absolute;left: 500px"></div>
<!--当没有父标签做定位，就参照于body-->
<div style="height: 100px;width: 100px;background-color: blueviolet;"></div>
<!--验证绝对定位-->

</body>
</html>

3、验证固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--验证固定定位-->
<div style="height: 100px;width: 100px;background-color: #fe6676;"></div>
<div style="height: 100px;width: 100px;background-color: red;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 100px;background-color: blueviolet;"></div>
<!--验证固定定位-->
</body>
</html>

由上述验证可知

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

六、透明度 opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

下面用一个小案例来简单介绍opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>'
    <style>
        #d1{
            background-color: rgba(0,0,0,0.5);
            /*rgba只能影响颜色*/
        }
        #d2{
            background-color: rgb(0,0,0);
            opacity: 0.5;
            color: #fe6676;
            /*opacity可以影响颜色和字体*/
        }
    </style>
</head>
<body>
<p id="d1">11</p>
<p id="d2">22</p>
</body>
</html>