溢出的隐藏与伪元素/前端四

溢出的隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--CSS伪元素法-->

    <style>
        .box{
            width: 400px;
            height: 300px;
            border: green solid 2px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 350px;
            margin-top: 250px ;

        }
    </style>
</head>
<body>
<div class="box">
    <div class="son"></div>

</div>

</body>
</html>

结果如下：

溢出的隐藏与伪元素/前端四

伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--伪元素  一次定义多次使用 -->
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        body{
            background-color: #dddddd;

        }
        .box{
            width: 300px;
            height: 500px;
            background-color: white;
            margin: 0 auto;
        }
        /*.tips{*/
            /*width: 70px;*/
            /*height: 40px;*/
            /*color:#fff;*/
            /*background-color: darkgreen;*/
            /*text-align: center;*/
            /*!*margin-top: ;*!*/
            /*line-height: 40px;*/
            /*display: block;*/
            /*margin: 0 auto;*/
        /*}*/



        /*伪元素写法：  要插入一个元素在父元素的所有内容之后
        父元素::after(before){
        content:'';//文本内容
        根据需求写任意属性
        }
        */
        .box::before{
            content: '新品';/*这个样式必须存在*/
            width: 70px;
            height: 40px;
            color:#fff;
            background-color: darkgreen;
            text-align: center;
            line-height: 40px;
            display: block; /*因为伪元素实质是行内元素   所以要转换为块元素*/
/*            margin: 0 auto;*/
        }

    </style>
</head>
<body>
<div class="box">
    <!--<span class="tips">新品</span>-->
    现成的内容
</div>
</body>
</html>

结果如下:

溢出的隐藏与伪元素/前端四