【博学谷学习记录】超强总结，用心分享|前端学习总结-第2周

咸蛋不会翻身

已于 2023-06-05 12:59:25 修改

阅读量124

点赞数

分类专栏：【博学谷学习记录】超强总结，用心分享文章标签：学习

于 2022-08-28 16:09:36 首次发布

本文链接：https://blog.csdn.net/qq_36145110/article/details/126468220

版权

【博学谷学习记录】超强总结，用心分享专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本周疑难点总结

问：为什么一个网页中只允许有一个 h1 标签？

答：网站H1标签多次调用不容易被百度收录

h1 代表大标题，一个网页中只能有一个大标题，不能拥有多个带标题（就跟一篇文章一样，一篇文章都是一个大标题，不会有多个大标题）

问：如何用纯 CSS 创建一个三角形？

答：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border-right:10px solid transparent;
            border-top:10px solid transparent;
            border-left:10px solid transparent;
            border-bottom:10px solid #000 ;
        }
    </style>

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

3.如何同时解决外边距塌陷和清除浮动带来的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .father{
            width: 400px;
            background-color: pink;
        }
        .son{
            float: left;
            width: 300px;
            height: 100px;
            background-color: red;
        }

        /* 清除浮动方法一 ：给父元素添加高度*/
        .father1{
            height: 200px;
        }
        /* 清除浮动方法二： 单伪元素清除法 给父元素添加after伪元素*/
        .father2::after{
            display: block;
            content:"";
            clear: both;
            /* 为了兼容性 让高度为零 和设置占位隐藏*/
            height: 0;
            visibility: hidden;
        }
        /* 清除浮动方法三  双伪元素清除法 给父元素添加before和after伪元素
        可清除外边距塌陷 和清除浮动带来的影响
        */
        .father3::before,.father3::after{
            content: "";
            display: table;
        }
        .father3::after{
            clear: both;
        }

    </style>

</head>
<body>
    <div class="father father1">
        <div class="son">我是清除浮动方法一：添加父元素高度</div>
    </div>
    <br>
    <br>
    <div class="father father2">
        <div class="son">我是清除浮动方法二：单伪元素清除法</div>
    </div>
    <br>
    <br>
    <div class="father father3">
        <div class="son">我是清除浮动方法三：双伪元素清除法</div>
    </div>
    <br>
    <br>
    <!-- 清除浮动方法四 额外变法 -->
    <div class="father">
        <div class="son">我是清除浮动方法四：额外标签法</div>
        <div style="clear: both;"></div>
    </div>

</body>
</html>