background-color是对哪一部分起作用

最新推荐文章于 2023-07-22 00:23:34 发布

one or two

最新推荐文章于 2023-07-22 00:23:34 发布

阅读量265

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_41633396/article/details/117249367

版权

先看以下代码

<!DOCTYPE html>
<html lang="zh">
    <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>Document</title>
    </head>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            /* padding:200px; */
            /* border:20px solid transparent;
            outline:2px solid tomato; */
        }
    </style>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

设置padding后（注意.box1的高度是固定的）

<!DOCTYPE html>
<html lang="zh">
    <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>Document</title>
    </head>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            padding:200px;
            /* border:20px solid transparent;
            outline:2px solid tomato; */
        }
    </style>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

现在明白了，给元素设置background-color后，其内容区也会变色的原因了吧

设置border后，并且border的颜色为红色

<!DOCTYPE html>
<html lang="zh">
    <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>Document</title>
    </head>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            padding:200px;
            border:20px solid red;
            /* border:20px solid transparent; */
            /* outline:2px solid tomato;  */
        }
    </style>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

设置border的颜色为透明色（transparent）时：会发现，background-color 颜色默认会蔓延到border的区域

<!DOCTYPE html>
<html lang="zh">
    <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>Document</title>
    </head>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            padding:200px;
            /* border:20px solid red; */
            border:20px solid transparent;
            /* outline:2px solid tomato;  */
        }
    </style>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

为了更清楚地看到，默认情况下，background-color的颜色会蔓延到boder处，我们可以给.box1设置outline来观察

<!DOCTYPE html>
<html lang="zh">
    <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>Document</title>
    </head>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            padding:200px;
            /* border:20px solid red; */
            border:20px solid transparent;
            outline:2px solid tomato; 
        }
    </style>
    <body>
        <div class="box1"></div>
    </body>
</html>

在这里插入图片描述

outline会给外边距上色吗？

<!DOCTYPE html>
<html lang="zh">
    <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>Document</title>
    </head>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            padding:200px;
            /* border:20px solid red; */
            margin:50px;
            border:20px solid transparent;
            outline:2px solid tomato; 
        }
    </style>
    <body>
        <div class="box1"></div>
    </body>
</html>