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

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

团子的守护

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

阅读量384

点赞数

文章标签： 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>

从上面例子很明显可以看出rgba和opacity的区别：

1、rgba只能影响颜色

2、opacity可以影响颜色和字体

团子的守护

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
冲刺 HTML学习笔记（五）定位、溢出属性、清除浮动、z-index、透明度

忙里偷闲来总结一波,这也将是最后的关于HTML的小结，后面将开始js之旅一、解决浮动带来的影响浮动会造成父标签塌陷问题那么如何解决浮动带来的影响呢？"""1、可以自己加一个div设置高度2、利用clear属性3、在写html页面前，先提前写好处理浮动带来的影响的css代码(通用的解决浮动带来的影响).clearfix:after{content:'';display:block;clear:both;}之后只要标签出了塌陷的问题就给该塌陷的标签加一..
复制链接

扫一扫