前端疑难困惑小笔记-4 CSS学习中 background-color属性在盒子模型中控制了哪部分的背景颜色呢

background-color这个属性可以用来控制盒子背景的颜色 但是控制的是哪一块儿呢
我们举个简单的例子来看一下
【1】边框透明的情况


<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>Documenttitle>
    <style>
        div {
      
            padding: 30px 30px;
            margin: 15px 15px;
            border: 5px solid transparent;
            background-color: pink;
        }
    style>
head>

<body>
    <div>
       我是content
    div>
body>

html>

效果如下:
前端疑难困惑小笔记-4 CSS学习中 background-color属性在盒子模型中控制了哪部分的背景颜色呢_第1张图片

首先明确盒子模型的结构
前端疑难困惑小笔记-4 CSS学习中 background-color属性在盒子模型中控制了哪部分的背景颜色呢_第2张图片
因为这里设置的border是透明的 所以可以看到 背景颜色是包括了从border外侧一直到最里面

前端疑难困惑小笔记-4 CSS学习中 background-color属性在盒子模型中控制了哪部分的背景颜色呢_第3张图片
【2】边框带有颜色
前端疑难困惑小笔记-4 CSS学习中 background-color属性在盒子模型中控制了哪部分的背景颜色呢_第4张图片
可以看到
边框如果定义了一个颜色 那么原来的粉色就会被覆盖掉~

你可能感兴趣的:(前端开发基础——HTML,CSS学习,html,css)