盒子模型

已于 2023-04-08 16:07:47 修改
阅读量275 收藏 1
点赞数
文章标签： html css 前端
于 2023-04-08 16:02:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_77391235/article/details/129955142
版权
文章详细介绍了CSS中的边框属性，包括样式、宽度、颜色以及如何综合设置，内边距和外边距的使用，以及背景属性，如颜色、图像、平铺、定位等。此外，还讨论了CSS3新增的盒子模型属性，如颜色透明度、圆角、图片边框、阴影、渐变等，以及元素类型和转换，包括块元素、行内元素和它们之间的转换规则。
摘要由CSDN通过智能技术生成

目录

​​​​​​相关属性

边框属性

内边距属性

外边距属性

背景属性

盒子的宽和高

CSS3新增盒子模型属性

颜色透明度

圆角

图片边框

阴影

渐变

元素的类型和转换

元素的类型

相关属性

边框属性

设置内容样式属性常用属性值
上边框

border-top-style:样式;

border-top-width:宽度;

border-top-color:颜色;

border-top:宽度 样式 颜色;

下边框

border-bottom-style:样式;

border-bottom-width:宽度;

border-bottom-color:颜色;

border-bottom:宽度 样式 颜色;

左边框

border-left-style:样式;

border-left-width:宽度;

border-left-color:颜色;

border-left:宽度 样式 颜色;

右边框

border-right-style:样式;

border-right-width:宽度;

border-right-color:颜色;

border-right:宽度 样式 颜色;

样式综合设置border-style:上边[右边 下边 左边]none 无(默认)、solid:单实线、dashed:虚线、dotted:点线、double:双实线
宽度综合设置border-width:上边[右边 下边 左边]像素值
颜色综合设置border-color:上边[右边 下边 左边]颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置border:上边[右边 下边 左边]

边框样式

<!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 type="text/css">
      h2 {
        border-style: double; /*4条边框相同————双实线*/
      } /*4条边框相同：双实线*/
      .one {
        border-top-style: dotted; /*上边框：点线*/
        border-bottom-style: dotted; /*下边框：点线*/
        border-left-style: solid; /*左边框：单实线*/
        border-right-style: solid; /*右边框：单实线*/
        /*上面4行代码等价于：border-style:dotted solid;*/
      }
      .two {
        border-style: solid dotted dashed; /*上实线、左右点线、下虚线*/
      }
    </style>
  </head>
  <body>
    <h2>边框样式————双实线</h2>
    <p class="one">上下为点线、左右为单实线</p>
    <p class="two">上单实线、左右为单实线、下虚线</p>
  </body>
</html>

边框宽度

<!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 type="text/css">
      p {
        border-width: 1px; /*综合设置4边宽度*/
        border-top-width: 3px; /*设置上边宽度覆盖*/
        /*上面两行代码等价于：border-width:3px 1px 1px;*/

        border-style: solid; /*综合设置边框样式*/
        /*在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none,则不论宽度设置为多少都无效*/
      }
    </style>
  </head>
  <body>
    <p>边框宽度————上3px,下左右1px。边框样式————单实线。</p>
  </body>
</html>

边框颜色

p{
    border-style:solid; /*综合设置边框样式*/
    border-color:#CCC #FF0000; /*设置边框颜色：2个值为上下、左右*/
}
h2{
    border-style:solid; /*综合设置边框样式*/
    border-bottom-color:red; /*单独设置下边框颜色*/
}
/*设置边框颜色时必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效*/

综合设置边框

/*以下设置中，边框的宽度、样式、颜色顺序随意，可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）*/
border-top:上边框宽度 样式 颜色;
border-right:右边框宽度 样式 颜色;
border-bottom:下边框宽度 样式 颜色;
border-left:左边框宽度 样式 颜色;
border:四边宽度 样式 颜色;

p{ border-top:2px solid #CCC;} /*定义上边框，各个值顺序随意*/
等价于
p{
    border-top-style:solid;
    border-top-width:2px;
    border-top-color:#CCC;
}

/*当4条边框样式都相同时，可以使用border属性进行综合设置*/
h2{border:3px double red;}
<!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 type="text/css">
      h2 {
        border-bottom: 5px double blue;
        text-align: center;
      }
      .text {
        border-top: 3px dashed #f00;
        border-right: 10px double #900;
        border-bottom: 3px dotted #ccc;
        border-left: 10px solid green;
      }
      .pingmian {
        border: 15px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h2>设置边框属性</h2>
    <p class="text">单侧边框综合属性</p>
    <img
      class="pingmian"
      src="photo.png\买辣椒也用券_起风了_4.jpg"
      alt="图片"
    />
  </body>
</html>

内边距属性

padding属性用于设置内边距，取值可为auto自动(默认值)、不同单位的数值、相对于父元素(或浏览器)宽度的百分比，常用的单位是像素。

<!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 type="text/css">
      .border {
        border: 5px solid #ccc;
      }
      img {
        padding: 80px; /*图像4个方向内边距相同*/
        padding-bottom: 0%; /*单独设置下边框*/
        /*上面两行代码等价于padding: 80px 80px 0%;*/
      }
      p {
        padding: 5%;
      } /*段落内边距为父元素宽度的5%*/
    </style>
  </head>
  <body>
    <img
      class="border"
      src="photo.png\买辣椒也用券_起风了_4.jpg"
      alt="内边框"
    />
    <p class="border">段落内边距为父元素宽度的5%</p>
  </body>
</html>

外边距属性

margin属性用于设置外边距，是一个复合属性，与内边距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>外边距</title>
    <style type="text/css">
      img {
        border: 5px solid green;
        float: left; /*设置图像左浮动*/
        margin-right: 50px; /*设置图像的右外边距*/
        margin-left: 30px; /*设置图像的左外边距*/
        /*上面两行代码等价于margin:0 50px 0 30px;*/
      }
      p {
        text-indent: 2em; /*段落文本首行缩进2字符*/
      }
    </style>
  </head>
  <body>
    <img src="photo.png\买辣椒也用券_起风了_4.jpg" alt="外边距" />
    <p>图像左浮动，图像的右外边距为50px，图像的左外边距为30px</p>
  </body>
</html>

为了更方便地控制网页中的标签，制作网页时添加如下代码，即可清除标签默认的内外边距

*{
    padding:0; /*清楚内边距*/
    margin：0; /*清楚外边距*/
}

背景属性

背景颜色

<!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 type="text/css">
      body {
        background-color: #ccc; /*设置网页的背景颜色*/
      }
      h2 {
        font-family: "微软雅黑";
        color: red; /*字体颜色*/
        background-color: #36c; /*设置标题的背景颜色*/
      }
    </style>
  </head>
  <body>
    <h2>短歌行</h2>
    <!-- 未对段落标签<p>设置背景颜色，其默认属性值为transparent(显示透明色)，所以段落将显示其父元素的背景颜色 -->
    <p>对酒当歌，人生几何</p> 
  </body>
</html>

背景图像

<!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 type="text/css">
      body {
        background-color: #ccc; /*设置网页的背景颜色*/
        background-image: url(photo.png/买辣椒也用券_起风了_4.jpg);  /*设置网页的背景图像*/
      }
      h2 {
        font-family: "微软雅黑";
        color: red; /*字体颜色*/
        background-color: #36c; /*设置标题的背景颜色*/
      }
    </style>
  </head>
  <body>
    <h2>短歌行</h2>
    <!-- 未对段落标签<p>设置背景颜色，其默认属性值为transparent(显示透明色)，所以段落将显示其父元素的背景颜色 -->
    <p>对酒当歌，人生几何</p>
  </body>
</html>

背景图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性取值如下：

repeat沿水平和竖直两个方向平铺（默认值）
no-repeat不平铺（图像位于元素的左上角，只显示一次）
repeat-x只沿水平方向平铺
repeat-y只沿竖直方向平铺
<!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 type="text/css">
      body {
        background-color: #ccc; /*设置网页的背景颜色*/
        background-image: url(photo.png/买辣椒也用券_起风了_4.jpg); /*设置网页的背景图像*/
        background-repeat: repeat-x; /*设置背景图像的平铺*/
      }
      h2 {
        font-family: "微软雅黑";
        color: red; /*字体颜色*/
        background-color: #36c; /*设置标题的背景颜色*/
      }
    </style>
  </head>
  <body>
    <h2>短歌行</h2>
    <!-- 未对段落标签<p>设置背景颜色，其默认属性值为transparent(显示透明色)，所以段落将显示其父元素的背景颜色 -->
    <p>对酒当歌，人生几何</p>
  </body>
</html>

背景图像的位置

<!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 type="text/css">
      body {
        background-color: #ccc; /*设置网页的背景颜色*/
        background-image: url(photo.png/买辣椒也用券_起风了_4.jpg); /*设置网页的背景图像*/
        background-repeat: no-repeat; /*设置背景图像不平铺*/
      }
      h2 {
        font-family: "微软雅黑";
        color: red; /*字体颜色*/
        background-color: #36c; /*设置标题的背景颜色*/
      }
    </style>
  </head>
  <body>
    <h2>短歌行</h2>
    <!-- 未对段落标签<p>设置背景颜色，其默认属性值为transparent(显示透明色)，所以段落将显示其父元素的背景颜色 -->
    <p>对酒当歌，人生几何</p>
  </body>
</html>

如果希望背景图像出现在其他位置，就需要使用另一个CSS属性background-position设置背景图像的位置。background-position属性的取值有多种：

（1）使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标，例如“background-position:20px 20px;”。

（2）使用预定义的关键字：指定背景图像在元素中的对齐方式。

水平方向值：left、center、right。

垂直方向值：top、center、bottom。

两个关键字的顺序任意，若只有一个值则另一个默认为center。例如：

center 相当于 center center(居中显示)

top 相当于 top center或center top(水平居中、上对齐)

（3）使用百分比：按背景图像和元素的指定点对齐。

0% 0% 表示图像左上角与元素的左上角对齐。

50% 50% 表示图像50% 50%中心点与元素50% 50%的中心的对齐。

20% 30% 表示图像20% 30%的点与元素20% 30%的点对齐。

100% 100% 表示图像右下角与元素的右下角对齐。

<!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 type="text/css">
      body {
        background-image: url(photo.png/买辣椒也用券_起风了_4.jpg); /*设置网页的背景图像*/
        background-repeat: no-repeat; /*设置背景图像不平铺*/
        background-position: 50px 80px; /*图像距离body元素的左边缘50px，距离上边缘80px*/
      }
    </style>
  </head>
  <body>
    <h2>短歌行</h2>
    <p>对酒当歌，人生几何</p>
  </body>
</html>

设置背景图像固定

当网页中的内容较多时，但希望图像会随着页面滚动条的移动而移动，此时需要用

background-attachment属性来设置。

scroll图像随页面一起滚动（默认值）
fixed图像固定在屏幕上，不随页面滚动
body {
        background-image: url(photo.png/买辣椒也用券_起风了_4.jpg); /*设置网页的背景图像*/
        background-repeat: no-repeat; /*设置背景图像不平铺*/
        background-position: 50px 80px; /*图像距离body元素的左边缘50px，距离上边缘80px*/
        background-attachment:fixed; /*设置背景图像的位置固定*/
      }

综合设置元素的背景

上述代码省略了背景颜色样式，等价于：

background:url(*.png) no-repeat 50px 80px fixed;
background:背景色 url("图像") 平铺 定位 固定;
/*各样式顺序任意，中间用空格隔开，不需要的样式可以省略*/

盒子的宽和高

网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，最常用的是像素。

<!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 type="text/css">
      .box {
        width: 200px; /*设置段落的宽度*/
        height: 80px; /*设置段落的高度*/
        background: #ccc; /*设置段落的背景颜色*/
        border: 8px solid #f00; /*设置段落的边框*/
        padding: 15px; /*设置段落的内边距*/
        margin: 20px; /*设置段落的外边距*/
      }
    </style>
  </head>
  <body>
    <p class="box">这是一个盒子</p>
  </body>
</html>
/*元素的width和height属性仅指元素内容的宽度和高度
  盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
  盒子的总高度=width+上下内边距之和+上下边框宽度之和+上下外边距之和
  宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img/>和<input/>标签除外）
*/

CSS3新增盒子模型属性

颜色透明度

rgba模式

在红、绿、蓝三原色的基础上添加了不透明度参数。

rgba(r,g,b,alpha);

前三个参数与RGB中的参数含义相同，括号里面书写的是rgb的颜色色值或者百分比，alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

例如：使用rgba模式为p标签指定透明度为0.5，颜色为红色的背景

p{background-color:rgba(225,0,0,0.5);}

p{background-color:rgba(100%,0%,0%,0.5);}

opacity属性

能够使任何元素呈现透明效果，作用范围要比rgba模式大。

opacity:参数;

opacity属性用于定义标签的不透明度，参数表示不透明度的值，是一个介于0~1之间的浮点数值（0表示完全透明，1表示完全不透明，0.5表示半透明）。

圆角

border-radius属性可以将矩形边框四角圆角化，实现圆角效果。

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

水平和垂直半径参数均有4个参数值，分别对应着矩形的4个圆角（顺时针设置角，每个角包含着水平和垂直半径参数）。参数的取值单位可以为px(像素值)或%(百分比)。

<!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 type="text/css">
      img {
        border: 8px solid black;
        border-radius: 50px 20px 10px 70px/30px 40px 60px 80px; 
      }
    </style>
  </head>
  <body>
    <img src="photo.png\买辣椒也用券_起风了_4.jpg" alt="图片" />
  </body>
</html>

（1）水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同。

（2）水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径，如下：

img{border-radius:50px 20px/30px 60px;}

（3）水平半径参数和垂直半径参数设置3个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上和左下圆角半径，第3个参数值代表右下圆角半径，如下：

img{border-radius:50px 20px 10px/30px 40px 60px;}

（4）水平半径参数和垂直半径参数设置4个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上圆角半径，第3个参数值代表右下圆角半径，第4个参数值代表左下圆角半径，如下：

img{border-radius:50px 30px 20px 10px/50px 30px 20px 10px;}

如果“垂直半径参数”省略，则会默认其等于“水平半径参数”的参数值，此时圆角的水平半径和垂直半径相等，如设置4个参数值的代码可以简写为：

img{border-radius:50px 30px 20px 10px;}

（5）如果想设置图片的圆角边框显示效果为圆形，则

img{border-radius:150px;}

img{border-radius:50%;}

图片边框

border-image属性可以实现使用图片作为元素的边框。

属性描述
border-image-source指定图片的路径
border-image-slice指定边框图像顶部、右侧、底部、左侧向内偏移量（可以简单理解为图片的裁切位置）
border-image-width边框宽度
border-image-outset边框背景向盒子外部延伸的距离
border-image-repeat背景图片的平铺方式
<!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 type="text/css">
      p {
        width: 362px;
        height: 362px;
        border-style: solid;
        border-image-source: url(photo.png/买辣椒也用券_起风了_4.jpg);
        border-image-slice: 33%;
        border-image-width: 40px;
        border-image-repeat: repeat;
        /* border-image: url() 33%/40px repeat; */
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

阴影

box-shadow:h-shadow v-shadow blur spread color outset;

参数值描述
h-shadow水平阴影的位置，可以为负值（必选属性）
v-shadow垂直阴影的位置，可以为负值（必选属性）
blur阴影模糊半径（可选属性）
spread阴影扩展半径，不能为负值（可选属性）
color阴影颜色（可选属性）
outset/inset默认为外阴影/内阴影（可选属性）
<!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 type="text/css">
      img {
        padding: 20px; /*内边距20px*/
        border-radius: 300px; /*将图像设置为圆形效果（图片越大。值越大）*/
        border: 1px solid #666;
        box-shadow: 5px 5px 10px 2px #999 inset;
        /* 使用内阴影时须配合内边距属性padding,让图像和阴影之间拉开一定距离 */
      }
    </style>
  </head>
  <body>
    <img src="photo.png\买辣椒也用券_起风了_4.jpg" alt="图片" />
  </body>
</html>

渐变

线性渐变

background-image:linear-gradient(渐变角度，颜色值1，颜色值2)；

（1）渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加"left""right""top""bottom"等关键字。0deg对应"to top"，90deg对应"to right"，180deg对应"to bottom"，180deg对应"to bottom"（默认），270deg对应"to left"，整个过程就是以bottom为起点顺时针旋转。

（2）颜色值用于设置渐变颜色，“颜色值1”表示起始颜色，“颜色值n”表示结束颜色。

<!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 type="text/css">
      p {
        width: 200px;
        height: 200px;
        background-image: linear-gradient(30deg, #0f0, #00f);
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

在每一个颜色值后面还可以写一个百分比值，用于标记颜色渐变的位置，如：

background-image:linear-gradient(30deg,#f0f 50%,#00f 80%);

可以看作绿色（#0f0）由50%的位置开始出现渐变至蓝色（#00f）位于80%的位置结束渐变。

径向渐变

起始颜色会从一个中心的开始，按照椭圆或圆形形状进行扩张渐变。

background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2);

（1）渐变形状

取值可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键字。

像素值/百分比：用于定义形状的水平和垂直半径，如"80px 50px"表示一个水平半径为80px,垂直半径为50px的椭圆形。

circle：指定圆形的径向渐变。

ellipse：指定椭圆形的径向渐变。

（2）圆心位置

用于确定元素渐变的中心位置，使用"at"加上关键词或参数值来定义径向渐变的中心位置，若省略则默认为center。

像素值/百分比：用于定义圆心的水平和垂直坐标，可以为负值。

left：设置左边为径向渐变圆心的横坐标值。

center：设置中间为径向渐变圆心的横坐标值或纵坐标值。

right：设置右边为径向渐变圆心的横坐标值。

top：设置顶部为径向渐变圆心的横坐标值。

bottom：设置底部为径向渐变圆心的横坐标值。

（3）颜色值

"颜色值1"表示起始颜色，"颜色值n"表示结束颜色。

<!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 type="text/css">
      p {
        width: 200px;
        height: 200px;
        border-radius: 300%; /*设置圆角边框*/
        background-image: radial-gradient(ellipse at center, #0f0, #030);
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

重复渐变

（1）重复线性渐变

background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值2);

（2）重复径向渐变

background-image:repeating-radial-gradient(渐变形状  圆心位置，颜色值1，颜色值2);

<!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 type="text/css">
      p {
        width: 200px;
        height: 200px;
        border-radius: 300%; /*设置圆角边框*/
        background-image: repeating-linear-gradient(
          90deg,
          #e50743,
          #e8ed30 10%,
          #3fa62e 15%
        );
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

<!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 type="text/css">
      p {
        width: 200px;
        height: 200px;
        border-radius: 300%; /*设置圆角边框*/
        background-image: repeating-radial-gradient(
          circle at 50% 50%,
          #e50743,
          #e8ed30 10%,
          #3fa62e 15%
        );
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

多背景图像

<!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 type="text/css">
      p {
        width: 500px;
        height: 500px;
        border: 1px solid black;
        background-image: url(photo.png/温奕心_一路生花_4.jpg),
          url(photo.png/买辣椒也用券_起风了_4.jpg),
          url(photo.png买辣椒也用券_起风了_4.jpg);
          /* 通过background-image属性定义了3张背景图，排列在最上方的图像应该先链接，其次是中间的装饰，最后才是背景图 */
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

修剪背景图像

（1）设置背景图像大小（background-size）

background-size:属性值1 属性值2;

background-size可以设置一个或两个值定义背景图像的宽高，其中属性值1为必选属性值，属性值2为可选属性值。属性值可以是像素、百分比或"cover"和"contain"关键字。

属性值描述
百分比以父标签的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第2个值设置高度。如果只设置一个值，则第2个值会默认为auto
cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

（2）设置背景图像的显示区域（background-origin）

默认情况下，background-position属性总是以标签左上角为坐标原点定位背景图像，用background-origin属性可以改变这种定位方式，自行定义背景图像的相对位置。

background-origin:属性值;
padding-box背景图像相对于内边距区域来定位
border-box背景图像相对于边框区域来定位
content-box背景图像相对于内容框区域来定位

（3）设置背景图像的裁剪区域（background-clip）

background-clip:属性值;
border-box默认值，从边框区域向外裁剪背景
padding-box从内边距区域向外裁剪背景
content-box从内容区域向外裁剪背景

元素的类型和转换

元素的类型

块元素

通常独占一行，可以设置宽高和对齐属性，常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。

行内元素（内联元素或内嵌元素）

不会占据一行，也不强迫其他标签在新的一行显示。一个行内标签通常会和其他行内标签显示在同一行中，它们不占有独立的区域，仅仅靠自身的文本内容大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，

有几个特殊的标签，如<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>块元素和行内元素</title>
    <style type="text/css">
      h2{
        background: #39f;
        width: 350px;
        height: 50px;
        text-align: center;
      }
      p{background: #060;}
      strong{
        background: #66f;
        width: 360px;
        height: 50px;
        text-align: center;
      }
      em{background: #ff0;}
      del{background: #ccc;}
    </style>
  </head>
  <body>
    <h2>h2标签定义的文本</h2>
    <p>p标签定义的文本</p>
    <p>
      <strong>strong标签定义的文本</strong>
      <em>em标签定义的文本</em>
      <del>del标签定义的文本</del>
    </p>
  </body>
</html>

<div>和<span>标签 

<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>div标签</title>
    <style type="text/css">
      .one {
        width: 600px; /*盒子模型的宽度*/
        height: 50px; /*盒子模型的高度*/
        background: aqua; /*盒子模型的背景*/
        font-size: 20px; /*字体大小*/
        font-weight: bold; /*字体加粗*/
        text-align: center; /*文本内容水平居中对齐*/
      }
      .two {
        width: 600px;
        height: 100px;
        background: lime;
        font-size: 14px;
        text-indent: 2em; /*首行文本缩进2字符*/
      }
    </style>
  </head>
  <body>
    <div class="one">用div标签设置标题文本</div>
    <div class="two">
      <p>div标签中嵌套p标签的文本内容</p>
    </div>
  </body>
</html>

<span>

用于定义网页中某些特殊显示的文本，配合class属性使用。<span>标签本身没有结构特征，只有在应用样式时，才会产生视觉上的变化。

<!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>span标签的使用</title>
    <style type="text/css">
      #header{    /*设置当前div中文本的通用样式*/
        font-family: "微软雅黑";
        font-size: 16px;
        color: #099;
      }
      #header .main{  /*控制第1个span中的特殊文本*/
        color: #63f;
        font-size: 20px;
        padding-right: 20px;
      }
      #header .art{   /*控制第2个span中的特殊文本*/
        color: #f33;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <span class="main">木偶戏</span>是中国一种古老的民间艺术，<span class="art">乡土艺术的瑰宝。</span>
    </div>
  </body>
</html>

元素类型的转换

网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元素的类型进行转换。

inline此元素将显示为行内元素（行内元素默认的dispaly属性值）
block此元素将显示为块元素（块元素默认的dispaly属性值）
inline-block此元素将显示为行内元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行
none此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在
<!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 type="text/css">
      div,span{   /*同时设置div和span的样式*/
        width: 200px;
        height: 50px;
        background: #fcc;
        margin: 10px; /*外边距*/
      }
      .d_one,.d_two{display: inline;} /*将前两个div转换为行内元素*/
      .s_one{display: inline-block;} /*将第1个span转换为行内块元素*/
      .s_three{display: block;} /*将第3个span转换为块元素*/
    </style>
  </head>
  <body>
    <div class="d_one">第1个div中的文本</div>
    <div class="d_two">第2个div中的文本</div>
    <div class="d_three">第3个div中的文本</div>
    <span class="s_one">第1个span中的文本</span>
    <span class="s_two">第2个span中的文本</span>
    <span class="s_three">第3个span中的文本</span>
  </body>
</html>

行内元素只可以定义左右外边距，定义上下外边距无效。

块元素垂直外边距的合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的标签有下外边距margin-bottom,下面的标签有上外边距margin-top,则它们之间的重直间距不是margir-bottom与margin--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>相邻块元素垂直外边距的合并</title>
    <style type="text/css">
      .one {
        width: 150px;
        height: 150px;
        background: #fc0;
        margin-bottom: 20px; /*定义第1个div的下外边距为20px*/
      }
      .two {
        width: 150px;
        height: 150px;
        background: #63f;
        margin-top: 40px; /*定义第2个div的上外边距为40px*/
      }
    </style>
  </head>
  <body>
    <div class="one">1</div>
    <div class="two">2</div>
    <!-- 两者之间的垂直间距是40px -->
  </body>
</html>

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父标签没有上内边距及边框，则父标签的上外边距会与子标记的上外边距发生合并，合并后的外边距为两者中的较大者，即使父标签的上外边距为0，也会发生合并。

<!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 type="text/css">
      * {
        margin: 0;
        padding: 0;
      } /*使用通配符清除所有HTML标记的默认边距*/
      div.father {
        width: 400px;
        height: 400px;
        background: #fc0;
        margin-top: 20px; /*定义第1个div的上外边距为20px*/
        /* 如果希望外边距不合并，可以为父标记定义1像素的上边框或上内边距 */
        /* border-top: 1px solid black; */
      }
      div.son {
        width: 200px;
        height: 200px;
        background: #63f;
        margin-top: 40px; /*定义第2个div的上外边距为40px*/
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

案例——制作音乐排行榜

<!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>
    <link rel="stylesheet" type="text/css" href="style01.css" />
  </head>
  <body>
    <div class="bg">
      <div class="sheet">
        <p class="tp"></p>
        <p>起风了</p>
        <p>一路生花</p>
        <p>绅士</p>
        <p>典狱司</p>
        <p class="yj">把回忆拼好给你</p>
      </div>
    </div>
  </body>
</html>

*{
    margin: 0;
    padding: 0;
}
/*整体控制歌曲排行榜模块*/
.bg{
    width: 600px;
    height: 550px;
    background-image: repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
    margin: 50px auto;
    padding: 40px;
    border-radius: 50%;
    padding-top: 50px;
    border: 10px solid #ccc;
}
/*歌曲排名部分*/
.sheet{
    width: 372px;
    height: 530px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 15px 15px 12px #000;
    margin:0 auto;
}
.sheet p{
    width: 372px;
    height: 55px;
    background: #504d58 url(photo.png/买辣椒也用券_起风了_4.jpg) no-repeat 70px 20px;
    margin-bottom: 2px;
    font-size: 18px;
    color: #d6d6d6;
    line-height: 55px;
    text-align: center;
    font-family: "微软雅黑";
}
/* 需要单独控制的列表项 */
.sheet .tp{
    width: 372px;
    height: 247px;
    background: #fff;
    background-image: url(photo.png/买辣椒也用券_起风了_4.jpg) url(photo.png/温奕心_一路生花_4.jpg);
    background-repeat: no-repeat;
    background-position: 87px 16px,99px 192px;
    border-radius: 30px 30px 0 0;
}
.sheet .yj{
    border-radius: 0 0 30px 30px;
}

hoλ ⺕^o丨
关注
对div盒子模型使用心得总结
09-22
在Web开发中，盒子模型是CSS布局的基础概念之一，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。了解盒子模型对于设计出适应不同屏幕尺寸和设备的响应式网页...
色深 抖动 色域 色准
qq_29894575的博客
12-31 1万+
色深越低就可能出现断层现象 色深越高 ，画面越顺滑 抖动是在两个色深之间频繁切换 ，借助视觉暂留效应
盒子模型重点知识
最新发布
梁恒嘉的博客（https://blog.crazymen.cn/）
12-15 742
学习前端里面的盒子模型，主要记录元素的浮动以及定位相关知识。
【CSS】盒子模型及其相关属性、元素的类型与转换
南栀的博客
04-21 972
文章目录盒子模型1、认识盒子模型2、盒子模型相关属性2.1 边框(border)属性边框样式：`border-style: 上边[右边 下边 左边]`边框宽度：`border-width: 上边[右边 下边 左边]`边框颜色：`border-color: 上边[右边 下边 左边]`综合设置边框：`border: 四边宽度 四边样式 四边颜色`圆角边框：`border-radius: 水平参数半径/垂直参数半径`图片边框：`border-images: 图片路径 裁切方式/边框宽度/边框扩展距离 重复方式`2
关于盒子模型的前端总结
zjt200013的博客
07-13 383
目录1.Css的基本样式字体样式图像的宽高颜色的选择2.盒子模型什么是盒子模型？盒子模型的特性 标准盒子与怪异盒子模型的表现效果的区别3.盒子模型的外边距与内边距 margin：外边距padding：内边距 4.margin合并的解决办法margin-top合并解决办法margin-bottom合并的解决办法不让空div合并的方法5.元素转换 块元素的特点行元素的特点行内块元素的特点 总结 css的基本样式有很多很多，但平时能够经常用到的样式可以分为字体、图像的宽高
CSS样式属性（一）
40128682的博客
05-10 2万+
字体样式 font-size:字号大小 font-size属性 设置字号 该属性的值可以使用相对长度单位 也可以使用绝对长度单位 其中相对长度单位比较常用 推荐使用px像素单位 相对长度单位 说明 em 相对于当前对象内文本的字体尺寸 px 像素，最常用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 p 点 font-family:字体 fon...
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局的基础，它定义了元素如何占据空间并与其他元素交互。这个模型将每个HTML元素视为一个矩形盒子，包含了内容区、内边距、边框和外边距四部分。 1. **内容区（Content Area）*...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS 理解盒子模型
09-25
CSS盒模型是网页布局的基础，它是CSS样式中用于描述元素占据空间的方式。理解盒模型对于任何想要精通网页设计的人来说都是至关重要的。盒模型定义了元素的总尺寸，包括内容(content)、内边距(padding)、边框(border)...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
盒子模型.xmind
05-12
这是盒子模型的思维导图，便于理解CSS这一核心，通过思维导图我们可以成体系的理解盒子模型，便于学习和记忆
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
ui设计的色彩_设计中的色彩综合介绍
热门推荐
Web design 教程小屋
07-07 17万+
本文旨在向您全面介绍最深的设计兔子洞：颜色。 它将向您介绍最重要的术语和概念，以帮助您入门，并帮助您在设计中应用色彩时做出更好的决策。 主题 与这些指南一样，我们将涵盖很多内容，包括： 颜色？ 色调 色调，阴影和色调 值 饱和度/色度 色轮 配色 单色 颜色种类 配色 重点 颜色一致性 颜色含义 颜色相关性 颜色？ 没有光...
盒子模型1
weixin_45729175的博客
12-19 771
认识盒子模型 每个矩形都有元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。 （1）网页是有多个盒子嵌套排列的结果。 （2）内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 （3）外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。 （4）虽然盒子模型拥有内边距、边...
【资源分享】综合性的导航网站
cccccww的博客
06-09 7万+
网址导航，是一个集合较多网址，并按照一定条件进行分类的一种网址站，是互联网最早的网站形式之一。
CSS盒子模型
smell201611010513的博客
04-09 1578
CSS盒模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。 1.盒子模型概述 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 背景应用于内容和内边距、边框组成的区域。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理...
CSS盒子模型：网页布局新规则
传统的表格布局依赖于大小不一的单元格和嵌套表格来控制元素的位置和尺寸，但CSS盒子模型提供了一种更为灵活和标准化的方法。 盒子模型将每个HTML元素视为一个矩形的“盒子”，包含四个主要部分：内容(content)、内...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值