万字长文：CSS盒子模型

最新推荐文章于 2024-08-19 16:20:42 发布

Zeker62

最新推荐文章于 2024-08-19 16:20:42 发布

阅读量295

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/zripenye/article/details/120946683

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子模型

文章目录

盒子模型
盒子模型的相关属性
背景属性
渐变属性
- background-image:linear-gradient() 线性渐变
- background-image:radial-gradient() 径向渐变

认识盒子模型

盒子模型相当于把文本放在一个盒子当中，我们可以定义文本在盒子当中的位置，当然也可以自定义盒子的大小和颜色等等。
下面给出两个图片方便理解
在这里插入图片描述

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

<!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>Document</title>
    <style type="text/css">
        .box {
            width: 200px; 
            /* 定义盒子的宽度 */
            height: 50px;
            /* 定义盒子的高度 */
            border: 15px solid red;
            /* 盒子模型的边框。厚度为15px，直线，颜色为红色 */
            background: #ccc;
            /* 定义盒子的背景颜色 */
            padding: 10px;
            /* 定义内边距，为10px */
            margin: 10px;
            /* 定义此盒子和其他盒子之间的边距，即外边距为10px */
        }
    </style>
</head>

<body>
    <p class="box">盒子模型包含的内容</p>

</body>

</html>

效果图：
在这里插入图片描述
这就是典型的盒子模型的效果，相当于就是说将文本框定在一个盒子当中。

div标记

div是英文division的缩写，div标记是一个区域内容标记，使用div标记相当于一个盒子，可以设置多个属性

<!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>Document</title>
    <style type="text/css">
        .one {
            width: 200px;
            height: 200px;
            line-height: 40px;
            /* 设置行高 */
            background: #F05;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
        
        .two {
            width: 450px;
            height: 200px;
            background: yellow;
            font-size: 40px;
            text-indent: 20px;
        }
    </style>
</head>

<body>
    <div class="one">
        使用div标签设置的文本标题
    </div>
    <div class="two">
        <p>div 标记中嵌套p标签</p>

    </div>

</body>

</html>

效果：
在这里插入图片描述

盒子模型的width宽与height高

在CSS代码中盒子模型中的段落的宽和高分别是用width属性和height属性定义的，需要注意的地方有如下几点：

盒子模型的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和。同理高度也是类似的定义。
width和height属性只适用于块级元素，对于行内元素比如<img>和<input>元素并不适用

<!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>Document</title>
    <style type="text/css">
        .one {
            width: 200px;
            height: 200px;
            line-height: 40px;
            /* 设置行高 */
            border: 2px solid green;
            background: #F05;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="one">
        <p>使用div标签设置的文本标题,这是一个长文本，如果文本太长的话，并且在盒子模型之内，会被换行</p>
    </div>

</body>

</html>

在这里插入图片描述

盒子模型的相关属性

边框属性

边框属性允许你指定一个元素边框的样式和颜色。

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

下面开始对其进行具体讲解：

border-style 边框样式

边框样式属性指定要显示什么样的边界。使用border-style属性用来定义边框的样式。
当有多个值的时候，按照顺时针先渲染，之后按照对称的方法将没有渲染的边框进行渲染

<!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>Document</title>
    <style type="text/css">
        h2 {
            border-style: double;
            /* 双实线 */
        }
        
        .one {
            border-style: dashed;
            /* 虚线边框 */
        }
        
        .two {
            border-style: solid;
            /* 单实线 */
        }
        
        .three {
            border-style: dotted;
            /* 点线 */
        }
        
        .four {
            border-style: solid dotted dashed;
            /* 上实线，左右点线，下虚线 */
        }
    </style>
</head>

<body>
    <h2>双实线边框</h2>
    <div class="one">
        <p>虚线边框</p>
    </div>
    <p class="two">单实线边框</p>
    <p class="three">点线边框</p>
    <p class="four">上实线，左右点线，下虚线(先顺时针渲染，再对称渲染)</p>

</body>

</html>

在这里插入图片描述
此外，还可以有别的效果：

border-width 边框宽度

您可以通过 border-width 属性为边框指定宽度。
它是border-top-width, border-right-width, border-bottom-width, 和 border-left-width的简写;

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

在这里插入图片描述

<!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>Document</title>
    <style type="text/css">
        #sval {
            border: ridge #ccc;
            border-width: 6px;
        }
        
        #bival {
            border: solid red;
            border-width: 2px 10px;
        }
        
        #treval {
            border: dotted orange;
            border-width: 0.3em 0 9px;
        }
        
        #fourval {
            border: solid lightgreen;
            border-width: thin medium thick 1em;
        }
        
        p {
            width: auto;
            margin: 0.25em;
            padding: 0.25em;
        }
    </style>
</head>

<body>
    <p id="sval">
        one value: 6px wide border on all 4 sides</p>
    <p id="bival">
        two different values: 2px wide top and bottom border, 10px wide right and left border</p>
    <p id="treval">
        three different values: 0.3em top, 9px bottom, and zero width right and left</p>
    <p id="fourval">
        four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>

</body>

</html>

在这里插入图片描述

border-color 边框颜色

CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color取值：

示例：

<!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>Document</title>
    <style type="text/css">
        #justone {
            border-color: red;
        }
        
        #horzvert {
            border-color: gold red;
        }
        
        #topvertbott {
            border-color: red cyan gold;
        }
        
        #trbl {
            border-color: red cyan black gold;
        }
        
        div {
            border: solid 0.3em;
            width: auto;
            margin: 0.5em;
            padding: 0.5em;
        }
        
        ul {
            margin: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="justone">
        <p><code>border-color: red;</code> is equivalent to</p>
        <ul>
            <li><code>border-top-color: red;</code></li>
            <li><code>border-right-color: red;</code></li>
            <li><code>border-bottom-color: red;</code></li>
            <li><code>border-left-color: red;</code></li>
        </ul>
    </div>
    <div id="horzvert">
        <p><code>border-color: gold red;</code> is equivalent to</p>
        <ul>
            <li><code>border-top-color: gold;</code></li>
            <li><code>border-right-color: red;</code></li>
            <li><code>border-bottom-color: gold;</code></li>
            <li><code>border-left-color: red;</code></li>
        </ul>
    </div>
    <div id="topvertbott">
        <p><code>border-color: red cyan gold;</code> is equivalent to</p>
        <ul>
            <li><code>border-top-color: red;</code></li>
            <li><code>border-right-color: cyan;</code></li>
            <li><code>border-bottom-color: gold;</code></li>
            <li><code>border-left-color: cyan;</code></li>
        </ul>
    </div>
    <div id="trbl">
        <p><code>border-color: cyan black gold;</code> is equivalent to</p>
        <ul>
            <li><code>border-top-color: red;</code></li>
            <li><code>border-right-color: cyan;</code></li>
            <li><code>border-bottom-color: black;</code></li>
            <li><code>border-left-color: gold;</code></li>
        </ul>
    </div>


</body>

</html>

在这里插入图片描述

border 综合设置边框

和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对border-image属性的影响，虽然border属性不能设置这个属性，但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。

注意：虽然border-width,、border-style和 border-color 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色，但boder属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。

<!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>Document</title>
    <style type="text/css">
        div {
            border: 0.5rem outset pink;
            outline: 0.5rem solid khaki;
            box-shadow: 0 0 0 2rem skyblue;
            border-radius: 12px;
            font: bold 1rem sans-serif;
            margin: 2rem;
            padding: 1rem;
            outline-offset: 0.5rem;
        }
    </style>
</head>

<body>
    <div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>

</body>

</html>

在这里插入图片描述

border-radius 圆角边框

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。
当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

示例：

<!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>Document</title>
    <style type="text/css">
        .one {
            border: solid 10px;
            /* the border will curve into a 'D' */
            border-radius: 10px 40px 40px 10px;
        }
        
        .two {
            border: groove 1em red;
            border-radius: 2em;
        }
        
        .three {
            background: gold;
            border: ridge gold;
            border-radius: 13em/3em;
        }
        
        .four {
            border: none;
            background: gold;
            border-radius: 40px 10px;
        }
        
        .five {
            border: none;
            background: gold;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <p class="one"> border: solid 10px; /* the border will curve into a 'D' */ border-radius: 10px 40px 40px 10px;</p>
    <p class="two"> border: groove 1em red; border-radius: 2em;</p>
    <p class="three"> background: gold; border: ridge gold; border-radius: 13em/3em;</p>
    <p class="four"> border: none; border-radius: 40px 10px;</p>
    <p class="five"> border: none; border-radius: 50%;</p>

</body>

</html>

在这里插入图片描述

border-image 图片边框

border-image CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

特别注意，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

初始值 as each of the properties of the shorthand:

border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0
border-image-repeat: stretch

<!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>Document</title>
    <style type="text/css">
        #bitmap {
            border: 30px solid transparent;
            padding: 20px;
            border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
        }
        
        #gradient {
            border: 30px solid;
            border-image: linear-gradient(red, yellow) 10;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="bitmap">The image is stretched to fill the area.</div>
    <div id="gradient">The image is stretched to fill the area.</div>

</body>

</html>

在这里插入图片描述

边距属性

CSS盒子模型分为内边距和外边距两种;

padding 内边距

padding CSS 简写属性控制元素所有四条边的内边距区域。是一个复合属性，由以下几个元素复合而成：

padding-bottom
padding-left
padding-right
padding-top

分别表示着上下左右的边距，当然，也遵照着顺时针+对称渲染的规则
padding 属性接受 1~4 个值。每个值可以是 <length> 或 <percentage>。取值不能为负。
例子如下：

<!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>Document</title>
    <style type="text/css">
        p {
            padding: 80px;
            padding-bottom: 0px;
            padding-top: 10%;
        }
        
        .one {
            border-style: solid;
            border-color: red;
            border-width: 2px;
        }
    </style>
</head>

<body>
    <div class=one>
        <p>This is padding</p>
        <p>padding: 80px; padding-bottom :0px; padding-top :10%;</p>
    </div>

</body>

</html>

效果：
在这里插入图片描述

margin 外边距

外边距是由margin来规定的，其方法和padding相似：
内边距控制的是元素内部空出的空间。相反，margin 操作元素外部空出的空间。
该属性是以下属性的简写：

padding-bottom
padding-left
padding-right
padding-top

实例：

<!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>Document</title>
    <style type="text/css">
        .one {
            margin: 30px;
            margin-top: 0;
            border-style: solid;
            border-color: red;
            border-width: 2px;
        }
        
        .two {
            margin-left: 50px;
            margin-right: 0;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class=one>
        <p>margin: 30px; margin-top: 0; border-style: solid; border-color: red; border-width: 2px;</p>
    </div>
    <div class=two>
        <p>margin-left: 50px; margin-right: 0; border:2px solid red;</p>
    </div>

</body>

</html>

在这里插入图片描述

box-shadow 盒子阴影

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色以及内阴影和外阴影。

语法：

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

实例：

<!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>Document</title>
    <style type="text/css">
        .one {
            margin: 200px;
            border-style: solid;
            border-color: red;
            border-width: 2px;
            box-shadow: 5px 5px 10px 3px rgba(255, 0, 0, 0.5), 4px 3px 5px 3px yellow;
        }
    </style>
</head>

<body>
    <div class=one>
        <p> margin: 200px; border-style: solid; border-color: red; </p>
        <p> box-shadow:5px 5px 10px 3px rgba(255, 0, 0, 0.5), 4px 3px 5px 3px yellow;</p>
    </div>

</body>

</html>

在这里插入图片描述

box-sizing属性

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px
宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border+ padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

<!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>Document</title>
    <style type="text/css">
        .one {
            box-sizing: border-box;
            background: greenyellow;
            width: 400px;
            height: 100px;
            margin: 200px;
            padding: 40px;
            border-style: solid;
            border-color: red;
            border-width: 2px;
            box-shadow: 5px 5px 10px 3px rgba(255, 0, 0, 0.5), 4px 3px 5px 3px yellow;
        }
        
        .two {
            box-sizing: content-box;
            background: greenyellow;
            width: 400px;
            height: 100px;
            padding: 40px;
            margin: 200px;
            border-style: solid;
            border-color: red;
            border-width: 2px;
            box-shadow: 5px 5px 10px 3px rgba(255, 0, 0, 0.5), 4px 3px 5px 3px yellow;
        }
    </style>
</head>

<body>
    <div class=one>
        <p>border-box padding: 40px;</p>
    </div>
    <div class=two>
        <p>content-box padding: 40px;</p>
    </div>

</body>

</html>

在这里插入图片描述

背景属性

此属性是一个简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

background-color 设置背景颜色

使用background-color设置背景颜色：

<!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>Document</title>
    <style type="text/css">
        .one {
            background-color: yellow;
            margin: 300px;
            box-shadow: 5px 5px 10px 3px rgba(255, 0, 0, 0.5), 4px 3px 5px 3px yellow;
        }
    </style>
</head>

<body>
    <div class=one>
        <p>background-color: yellow;</p>
    </div>

</body>

</html>

在这里插入图片描述

background-image 设置背景图像

例子：

<!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>Document</title>
    <style type="text/css">
        body {
            background-image: url(test.jpg);
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class=one>
        hhh...
    </div>

</body>

</html>

效果：
在这里插入图片描述

背景图像与不透明度的设置（rgba和opacity）

使用rgba的最后一个参数来规定不透明度，比如：rgba(255,0,0,0.6)此时的不透明度就是0.6
opacity属性也可以呈现不透明的效果，其值在0~1之间

例子：

<!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>Document</title>
    <style type="text/css">
        body {
            margin: 300px;
            border: 1px solid red;
            padding: auto;
        }
        
        img:nth-child(1) {
            opacity: 0.2;
        }
        
        img:nth-child(2) {
            opacity: 0.7;
        }
        
        img:nth-child(3) {
            opacity: 1;
        }
    </style>
</head>

<body>
    <img src="test.jpg" width="100" height="100">
    <img src="test.jpg" width="100" height="100">
    <img src="test.jpg" width="100" height="100">
</body>

</html>

在这里插入图片描述

background-repeat 设置背景头像平铺：

`repeat`	图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.
`space`	图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. [`background-position`]属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.
`round`	随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.译者注: 关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.
`no-repeat`	图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由[`background-position`]属性来决定.

代码：

<!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>Document</title>
    <style type="text/css">
        /* Shared for all DIVS in example */
        
        li {
            margin-bottom: 12px;
        }
        
        div {
            background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
            width: 144px;
            height: 84px;
        }
        /* 因为 space 和 round 当前没有被广泛支持的, 所以没有添加*/
        
        .one {
            background-repeat: no-repeat;
        }
        
        .two {
            background-repeat: repeat;
        }
        
        .three {
            background-repeat: repeat-x;
        }
        
        .four {
            background-repeat: repeat-y;
        }
        /* Multiple images */
        
        .five {
            background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png);
            background-repeat: repeat-x, repeat-y;
            height: 144px;
        }
    </style>
</head>

<body>
    <ol>
        <li>no-repeat
            <div class="one">&nbsp;</div>
        </li>
        <li>repeat
            <div class="two">&nbsp;</div>
        </li>
        <li>repeat-x
            <div class="three">&nbsp;</div>
        </li>
        <li>repeat-y
            <div class="four">&nbsp;</div>
        </li>
        <li>repeat-x, repeat-y (multiple images)
            <div class="five">&nbsp;</div>
        </li>
    </ol>
</body>

</html>

效果：

在这里插入图片描述

background-position 设置背景图像位置

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

代码：

<!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>Document</title>
    <style type="text/css">
        /* 被所有 div 共享 */
        
        div {
            background-color: #FFEE99;
            background-repeat: no-repeat;
            width: 300px;
            height: 80px;
            margin-bottom: 12px;
        }
        /* 这些例子使用 `background` 缩写 */
        
        .exampleone {
            background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
        }
        
        .exampletwo {
            background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 3em 50% no-repeat;
        }
        /*
多背景图片：每个图片依次和相应的 `background-position` 匹配
*/
        
        .examplethree {
            background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png");
            background-position: 0px 0px, center;
        }
    </style>
</head>

<body>
    <div class="exampleone">Example One</div>
    <div class="exampletwo">Example Two</div>
    <div class="examplethree">Example Three</div>
</body>

</html>

在这里插入图片描述

background-attachment 设置背景头像固定

这样设置，即使滚动条在滚动，图片也不会动，真正做到了背景

background-attachment:fixed; //固定
background-attachment:scroll;//默认，滚动

background-size 设置背景图像大小

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

在这里插入图片描述

background-origin 设置背景显示区域

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.

注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。

border-box 背景图片的摆放以border区域为参考
padding-box 背景图片的摆放以padding区域为参考
content-box 背景图片的摆放以content区域为参考

background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-clip 设置图像裁剪区域

border-box

背景延伸至边框外沿（但是在边框下层）。
在这里插入图片描述

padding-box

背景延伸至内边距（padding）外沿。不会绘制到边框处。
在这里插入图片描述

content-box

背景被裁剪至内容区（content box）外沿。
在这里插入图片描述

text

背景被裁剪成文字的前景色。
在这里插入图片描述

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

background-image 设置多重背景图像

之间用逗号隔开

background 背景复合属性

按照顺序声明如下属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

渐变属性

background-image:linear-gradient() 线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
利用repeating-linear-gradient 函数可以实现线形重复渐变效果。

div {
  background: linear-gradient(135deg, red, red 60%, blue);
}
div {
  background: linear-gradient(135deg, red, red 60%, blue);
}

background-image:radial-gradient() 径向渐变

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient()

repeat-radial-gradient()重复渐变

Zeker62

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
万字长文：CSS盒子模型

盒子模型文章目录盒子模型认识盒子模型div标记盒子模型的宽与高盒子模型的相关属性边框属性边框样式边框宽度边框颜色取值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-color#取值)综合设置边框圆角边框图片边框认识盒子模型盒子模型相当于把文本放在一个盒子当中，我们可以定义文本在盒子当中的位置，当然也可以自定义盒子的大小和颜色等等。下面给出两个图片方便理解Margin(外边距) - 清除边框外的区域，外边距是透明的。Bord
复制链接

扫一扫