JZTXT

【6.0】前端基础之CSS终章

发布时间 2023-07-04 17:49:11作者: Chimengmeng

【6.0】前端基础之CSS终章

【一】浮动带来的影响及解决办法

【1】父标签塌陷

  • 造成父标签塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        #d1 {
            border: 3px solid red;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        #d3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        
        }


    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
</div>
</body>
</html>
  • 内部元素因为浮动导致了外边框无法框柱内部元素

【2】解决办法一

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

        #d1 {
            border: 3px solid red;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        #d3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            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>
  • 内部再创建一个子标签，给一个固定高度，撑起外边框

造成代码冗余，不推荐

【2】解决办法二

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

        #d1 {
            border: 3px solid red;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        #d3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;

        }

        #d4 {
            /*height: 100px;*/
            clear: left; /* 该标签的左边(地面和空中)不能有浮动元素 */
            clear: both; /* 该标签的左右两边(地面和空中)不能有浮动元素 */
        }


    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>
</body>
</html>

【3】通用的解决办法

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

        #d1 {
            border: 3px solid red;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        #d3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;

        }

        #d4 {
            /*height: 100px;*/
            /*clear: left; !* 该标签的左边(地面和空中)不能有浮动元素 *!*/
            clear: both; /* 该标签的左右两边(地面和空中)不能有浮动元素 */
        }
        
        .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>

在写HTML页面之前，提前写好处理浮动带来的影响的CSS代码

.clearfix:after {
            content:"";
            display: block;
            clear: both;
        }

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

【二】溢出属性

【1】问题引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            height: 100px;
            width: 100px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
<p id="p1">
    起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>

字数太多超出了，规定的边框限制

【2】解决办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            height: 100px;
            width: 100px;
            border: 5px solid red;
            /* overflow: visable 默认是可见，溢出还是展示 */
            /*overflow: hidden; !* 溢出部分直接隐藏 *!*/
            /*overflow: scroll; !* 字体内容可以滚动 *!*/
            overflow: auto; /* 自动 */
        
        }
    </style>
</head>
<body>
<p id="p1">
    起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。起笔描绘山水意，云淡风轻如诗情。倾情抒写欢乐悲，文字流露真我心。</p>
<p>起笔描绘山水意，</p>
<p>云淡风轻如诗情。</p>
<p>倾情抒写欢乐悲，</p>
<p>文字流露真我心。</p>
</body>
</html>

【3】头像案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            background-color: #4e4e4e;
        }

        #d1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            border: 3px solid white;
            margin: 0 auto;
            overflow: hidden;


        }

        #d1 > img {
            width: 100%;/* 占标签100%比例 */
        }

    </style>
</head>
<body>
<div id="d1">
    <img src="头像猫.jpg" alt="">
</div>
</body>
</html>

【三】定位

【1】参考

  • 相对定位（Relative Positioning）

    • 是一种CSS定位方式，它是相对于元素在正常文档流中的位置进行定位。
    • 通过设置position: relative;属性，可以在元素自身正常显示的前提下
    • 通过设定top、right、bottom和left属性，来将元素在水平和垂直方向上进行微调。
    • 相对定位会影响元素原本在文档流中的位置，但不会影响其他元素的布局。

  • 绝对定位（Absolute Positioning）

    • 是一种CSS定位方式，它是相对于最近的非静态定位的父元素进行定位。
    • 通过设置position: absolute;属性
    • 可以使用top、right、bottom和left属性来精确地定位元素。
    • 绝对定位会脱离文档流，不会占据原本的空间，且不会影响其他元素的布局，它常用于创建浮动效果或者覆盖其他元素。

  • 固定定位（Fixed Positioning）

    • 也是一种CSS定位方式，它会相对于浏览器窗口进行定位。
    • 通过设置position: fixed;属性，可以在元素不随页面滚动而移动的情况下
    • 使用top、right、bottom和left属性来进行定位。
    • 固定定位的元素会一直保持在屏幕上的固定位置，不会受到页面滚动的影响。这种定位常用于创建导航栏或悬浮广告等效果。

  • 静态

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

  • 相对定位

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

  • 绝对定位(常用)

    • 相对于已经定位过的父标签做移动，如果没有父标签那么就以body为父标签
    • 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

  • 固定定位(常用)

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

【2】相对定位

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

        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px; /* 相较于原来的位置从左向右移动50px 如果是负数，方向则相反*/
            top: 50px; /* 相较于原来的位置从上向下移动50px 如果是负数 方向则相反 */
            /*position: static; !* 默认是 static 无法修改位置 *!*/
            position: relative;
            /* relative ---> 相对定位 标签由 static 变成 relative
            他的性质就从原来没有定位的标签变成了已经定位过的标签
            即使没有移动，标签的性质也已经发生了改变
            */

        }


    </style>
</head>
<body>
<div id="d1">

</div>
</body>
</html>

【3】绝对定位

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

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

        #d3 {
            height: 100px;
            width: 200px;

            background-color: blue;
            position: relative; /* 从静态标签变为已经移动过的标签 */
        }

        #d4 {
            height: 200px;
            width: 400px;
            background-color: yellow;
            position: absolute; /* 绝对定位 */
            left: 220px;
            top: 110px;
        }


    </style>
</head>
<body>
<div id="d3">
    <div id="d4"></div>
</div>
</body>
</html>

【4】固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #back {
            position: fixed; /* 写了fixed后，接下来的定位就是依据浏览器窗口 */
            bottom: 10px;
            right: 20px;
            height: 50px;
            width: 100px;
            background-color: burlywood;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: blue"></div>
<div style="height: 500px;background-color: orange"></div>
<div id="back">回到顶部</div>

</body>
</html>

【四】浮动和定位是否脱离文档流

脱离文档流：发生移动后是否还会占有原来的位置

  • 浮动
  • 相对定位
  • 绝对定位
  • 固定定位

【1】不脱离文档流

相对定位

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

<div style="height: 200px;width: 300px; background-color: red;position: relative;left: 500px;"></div>
<div style="height: 200px;width: 300px; background-color: green"></div>

</body>
</html>

【2】脱离文档流

浮动

绝对定位

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

<div style="height: 200px;width: 300px; background-color: red;"></div>
<div style="height: 200px;width: 300px; background-color: green;position:absolute;left: 500px;"></div>
    /* 没有父标签定位，则默认以body作为父标签 */
<div style="height: 200px;width: 300px; background-color: blue;"></div>

</body>
</html>

固定定位

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

<div style="height: 200px;width: 300px; background-color: red;"></div>
<div style="height: 200px;width: 300px; background-color: green;position:fixed;bottom:20px;right: 30px;"></div>
<div style="height: 200px;width: 300px; background-color: blue;"></div>

</body>
</html>

【五】z-index模态框

百度登录页面，其实是三层

​ 最底部是正常的内容(a=0) - 最远的

​ 接着是黑色的透明区(a=99) - 中间的

​ 最后是白色的登陆注册区(a=100) - 最远的

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

        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 99;

        }

        .modal {
            background-color: white;
            height: 400px;
            width: 600px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -300px;
        }


    </style>
</head>
<body>

<div>最底层的显示内容</div>
<div class="cover">中间的透明层</div>
<div class="modal">
    注册登录层
    <h1>注册登陆页面</h1>
    <p>username
        <input type="text">
    </p>

    <p>password
        <input type="password">
    </p>

    <p>点我提交
        <input type="submit">
    </p>


</div>

</body>
</html>

【六】透明度opacity

不单单可以修改颜色的透明度还可以修改字体的透明度

rgba 只能修改颜色的透明度

opacity 不只是能修改颜色还能修改字体的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            background-color: rgba(255, 255, 255, 0.4);
        }

        #p2 {
            background-color: rgb(255, 255, 255);
            opacity: 0.5;
        }

    </style>
</head>
<body>
<p id="p1">001</p>
<p id="p2">002</p>
</body>
</html>