前端css中盒子模型的各种属性

小蜗牛764号

已于 2024-04-28 16:17:58 修改

阅读量1.3k

点赞数 28

分类专栏： # css 文章标签：前端 css 盒子模型

于 2024-04-28 16:04:57 首次发布

本文链接：https://blog.csdn.net/qq_44925904/article/details/138229356

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端css中盒子模型

一、前言
二、流程图
三、盒子模型的各属性
四、结语
五、定位日期

一、前言

本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。
其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定把布局的内容放到弹性盒子模型中讲。
部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。本文把他当作第一阶段，内容的初衷解释已完成，那深入拓展作为后面的阶段，则笔者会根据内容需要出相关的属性用法+举例+例子效果的博文。

二、流程图

三、盒子模型的各属性

（一）、模型计算方式（box-sizing）

box-sizing:content-box;/默认情况下为此，边框宽度和内边距增加会使元素宽度增加/
box-sizing:border-box;/元素和宽度已固定，边框合内边距增加不会增加元素的宽度/
举个例子，在默认 box-sizing:content-box; 的情况下，盒子元素的长宽=盒子的长宽+内边距+边框的宽度。box-sizing:content-box;不设置盒子模型默认使用该方式，下方代码为显示效果先写的，以设置参数后进行对比。
如下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <!-- 元数据：定义视窗和网页的相关信息 -->
  <meta charset="UTF-8"> <!-- 设置文档的字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视窗宽度，使网页适配各种设备 -->
  
  <title>盒子模型示例</title> <!-- 网页标题 -->

  <style>
    /* 定义盒子的样式 */
    .box {
      width: 200px; /* 设置盒子的宽度 */
      height: 200px; /* 设置盒子的高度 */
      margin: 100px 200px; /* 设置外边距，上下100px，左右200px */
      background-color: aqua; /* 设置背景颜色 */
      border: 100px solid yellowgreen; /* 设置边框，宽度100px，颜色yellowgreen */
      padding: 50px; /* 设置内边距 */
      box-sizing:content-box;/*默认情况下为此，边框宽度和内边距增加会使元素宽度增加*/
    }
  </style>
</head>

<body>
  <!-- 定义内容部分 -->
  <div class="box">
    我是一个盒子，长200px，宽200px，边框宽度100px，内边距50px。
  </div>
</body>
</html>

效果如下：
在这里插入图片描述
当使用box-sizing:border-box; ,盒子的长宽不会随边框宽度和内边距的变换而变换，只要预选设定好盒子宽高，后面盒子的宽高会一直固定不变。设置边框和内边距只会往盒子内部不断挤压。举例如下代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <!-- 元数据：定义视窗和网页的相关信息 -->
  <meta charset="UTF-8"> <!-- 设置文档的字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视窗宽度，使网页适配各种设备 -->
  
  <title>盒子模型示例</title> <!-- 网页标题 -->

  <style>
    /* 定义盒子的样式 */
    .box {
      width: 200px; /* 设置盒子的宽度 */
      height: 200px; /* 设置盒子的高度 */
      margin: 100px 200px; /* 设置外边距，上下100px，左右200px */
      background-color: aqua; /* 设置背景颜色 */
      border: 20px solid yellowgreen; /* 设置边框，宽度20px，颜色yellowgreen */
      padding: 20px; /* 设置内边距 */
      box-sizing:border-box;/*元素和宽度已固定，边框合内边距增加不会增加元素的宽度*/
    }
  </style>
</head>

<body>
  <!-- 定义内容部分 -->
  <div class="box">
    我是一个盒子，长200px，宽200px，边框宽度20px，内边距20px。
  </div>
</body>
</html>

运行效果如下：
在这里插入图片描述

（二）、边框（border）

css中可以直接使用简写属性，如：
border: 3px solid red;/*边框宽度3px，实线，红色*/
也可以分别设置某个方向的边框简写属性，即

border-top: 3px solid red;/上边框宽度3px,实现，红色/
border-right: 3px solid red;/右边框宽度3px,实现，红色/
border-bottom: 3px solid red;/下边框宽度3px,实现，红色/
border-left: 3px solid red;/左边框宽度3px,实现，红色/

也可以使用border-（各内容的属性）的格式来具体设置边框的具体属性，常见的属性后面一一列举。

1.边框的颜色（border-color）

边框的颜色可以设置和改变。颜色可以取颜色的名称，如：red，blue，yellow。也可以取十六进制代码，如：#3aae1a。也可以取RGB值，如：rgb(27,29,169)。red，green，blue前面首字母的缩写词rgb。也可以设置透明边框，使用transparent属性。
当
border-color:red;
效果如下：
在这里插入图片描述
当
border-color:#3aae1a;
效果如下：

当
border-color:(27, 25, 169);
效果如下：

使边框透明，即
border-color:transparent;
效果如下：

2.边框的宽度（border-width）

当觉得边框的宽度太小，需要加大为10px的边框，则可如下设置：
border-width:10px;
为了能对比观察效果，我们先生成一个默认边框的盒子，此时边框还未变换，如下：
在这里插入图片描述
边框宽度变为10px的效果如下：

只有一个值表示边框上、下、左、右都为这个值的宽度。
若有两个值，则第一个值为上、下边框宽度值，第二个值为左、右边框宽度值。举例如
border-width:10px 20px;
效果如下：
在这里插入图片描述
也可以给边框的宽度属性设置3个值。第一个值为上，第二个值为左、右，第三个值为下。举例如：
border-width:20px 10px 30px;
效果如下：

4个值不难猜了，那边框就4个边，从上开始，顺时针一一对应便可，即上、右、下、左。举例如：
border-width:10px 20px 30px 40px;
效果如下：
在这里插入图片描述

3.边框的样式（border-style）

“border-style:”------边框的样式。
常见的属性：solid(实线)、dashed(虚线)、dotted(点状)、double(双线)、groove(框凹槽)、ridge(框凸起)、inset(盒子内凹)、outset(盒子外凸)。

（1）、实线边框样式（solid）

当使用实线边框，即
border-style:solid;
效果如下：
在这里插入图片描述

（2）、虚线边框样式（dashed）

当使用虚线边框，即
border-style:dashed;
效果如下：
在这里插入图片描述

（3）、点状边框样式（dotted）

当使用点状边框，即
border-style:dotted;
效果如下：
在这里插入图片描述

（4）、双线边框样式（double）

当使用点状边框，即
border-style:double;
效果如下：
在这里插入图片描述

（5）、框凹槽样式边框（groove）

关于后面这些有凹凸效果的边框，也可以使用阴影等一些效果给他设置出来。本文只是对属性进行介绍记录，便不详细说明。
当使用框凹槽样式边框，即
border-style:groove;
为了让效果更明显，我们给边框增加了宽度20px，即
border-width:20px
效果如下：
在这里插入图片描述

（6）、框凸起样式边框（ridge）

当使用框凸起样式边框，即
border-style:ridge;
为了让效果更明显，我们给边框增加了宽度20px，即
border-width:20px
效果如下：

在这里插入图片描述

（7）、盒子内凹样式边框（inset）

当使用盒子内凹样式边框，即
border-style:inset;
为了让效果更明显，我们给边框增加了宽度20px，即
border-width:20px
效果如下：
在这里插入图片描述

（8）、盒子外凸样式边框（outset）

当使用盒子外凸样式边框，即
border-style:outset;
为了让效果更明显，我们给边框增加了宽度20px，即
border-width:20px
效果如下：
在这里插入图片描述

4.边框的圆角（border-radius）

边框可以对边框的4个直角做圆角处理，取像素值px，也可以取百分值。所取值越大圆角幅度和效果也越大。取50%的圆角时，为圆形效果。先生成一个默认的盒子边框，以更好对比效果。
默认盒子边框如下：
在这里插入图片描述
取一个5px的圆角边框，即
border-radius:5px;
效果如下：

取一个50%的圆角边框，即
border-radius:50%;
效果如下：

5.图片边框（border-image）

边框还可以插入图片，选取图片的切块来设置边框。为了显示效果好进行对比，我们自己用sai2画了200px × 200px 的方形图片，以导入代码中，如下图：
请添加图片描述

（1）、边框导入图片（border-image-source）

图片可以是图片的URL、内嵌的图片、或其他资源。
我们在同目录下添加图片，然后导入图片，如
border-image-source:url("./分布图jpg");
效果如下：
在这里插入图片描述

（2）、图像切片（border-image-slice）

选择在图片的上下左右切取设置的数值设置图片边框。值可以取整数，如40，则表示切取40像素作为边框。或取百分数也可以，如25%，即给图片切取25%作为边框。如果切取40像素，取的为图片内容区域，若布置于100像素的边框上，则它会成拉伸成100像素的状态。切取的只是某部分指定像素内容，不一定等于边框的宽度，宽度设置可以用width属性设置。
如果是40px，按理也是可以的，效果按理应该是和40的效果相同，但笔者运行40px状态下都是初始导入图片的模样，或许是浏览器版本或其他问题，因此后面关于切片的数值选择均选择没有px的整数值或百分号的数值，而不使用有px的数值了。
切片的数值设置的方法同样有4种，单值，双值，三值，四值。
单值情况下，如：
border-image-slice: 50; /* 设置切片为 50 像素 */
则图片从上边往下50px切取图片的上部，作为盒子的上边框。右边往左50px切取图片的右部，作为盒子的右边框。下部和左部同理。假设下图的黑线是上下左右分别向里50px切片的线，那么外部则是作为盒子的边框了。因为每个盒子的长宽会有差异，那么边框也会进行拉伸等效果。
请添加图片描述
切片为50px的效果如下：
在这里插入图片描述
若要显示中间的内容，在参数后添加fill便可，后面的二值到四值都可添加fill，举上例的基础上添加fill
border-image-slice: 50 fill; /* 设置切片为 50 像素中间显示*/
效果如下：

双值，举例如
border-image-slice: 50 30; /* 设置切片为上下50 像素左右30像素 */
因为左右像素截取小，所以显示的会比原来稍大一些。效果如下：
在这里插入图片描述
三值，举例如
border-image-slice: 50 30 40; /* 设置切片为上50 像素左右30像素下40像素 */
效果如下：

四值，举例如
border-image-slice: 50 30 40 20; /* 设置切片为上50 像素右30像素下40像素左20像素 */
效果如下：
在这里插入图片描述

（3）、边框外部扩展量（border-image-outset）

border-image-outset设置增加后，边框则是往外撑的效果。它会影响边框的占用空间，让边框看起来突出。
先生成一个盒子，高宽200px，边框宽100px。如下图：
在这里插入图片描述
当想边框扩展50px，则
border-image-outset: 50px;
效果如下：

两图比较，后图明显高度上边和下部都扩展了50px，则高度由原来的300px变为300px+100px。左右宽度也同理。扩展的数值设置可以选1值~4值，方法和内外边距设置的方式类似。可以参考后面的内外边距的设值方式。

（4）、图片边框的宽度（border-image-width）

border-image-width这个属性会影响边框的宽度。若不设置border-image-width这个值，则这个值会默认等于border-width的值。图片边框的宽度可以设置像素值、百分比和比率。其实百分比和比率效果可以相同，比如0.4的比率不也是40%。
单个值，举例如下
border-image-width:100px;
使边框宽度变为100px，效果如下：
在这里插入图片描述

比率效果，如
border-image-width:10%;
效果如下：
在这里插入图片描述
双值，如
border-image-width:10% 100px;
上下边框宽度取10%，左右边框宽度100px，效果如下：

三值，如
border-image-width:10% 100px 20%;
上边框宽度取10%宽度，左右边框宽度100px，下边框宽度取20%，效果如下：

四值，如
border-image-width:10% 100px 20% 50px;
上边边框宽度取10%宽度，右边框100px，下边框取20%宽度，左边框取50px。效果如下：
在这里插入图片描述

（5）、图像边框的重复方式（border-image-repeat）

border-image-repeat:stretch;/* 拉伸以适应边框*/
border-image-repeat:repeat;/* 重复图像*/
border-image-repeat:round;/* 与repeat类似，图像会调整避免产生边框上的空虚*/
border-image-repeat:space;/* 按原始大小重复，图像间可能有空隙*/

当不设置边框的重复方式时，默认效果为stretch的拉伸效果。
我们先生成一个长200px，宽200px，边框宽度100px的盒子，如下：
在这里插入图片描述
默认情况下是拉伸stretch效果，我们也设置
border-image-repeat:stretch;
然后把长变为600px，宽变为300px，则效果如下：

明显盒子中间部分已拉伸。然后我们改成重复repeat的效果，如
border-image-repeat:repeat;
效果如下：
在这里插入图片描述
再改成round，效果为在repeat基础上对图片进行调整，如
border-image-repeat:round;
效果如下：

最好再看看space的效果，如
border-image-repeat:space;
按原始大小重复，图像间可能有空隙
效果如下：

6.边框的坍塌（border-collapse）

边框的坍塌常用于表格中两相邻单元格的两边框合并，具体可以看往期css关于table表格的博文。属性值如下
border-collapse:collapse;/*边框合并*/
border-collapse:separate;/*边框分开*/

（三）、内间距（padding）

内间距为边框到内容间的举例，当我们在盒子里设置一个元素，若不想让元素离边框太近，可以调大内间距，使得边框与元素内容间有一定的距离。
内间距可以用像素值，百分号来设置如：40px，10%；也可以用vh、wh这些视窗宽高的的数值来设置，如10vh。可以简单的用“padding:（1值~4值)”格式来设置参数。如

padding:50px;/*上下左右内间距都为50px*/
padding:50px 40px;/*上下内间距50px，左右内间距40px*/
padding:50px 10% 40px;/*上内间距50px，左右内间距取10%，下内间距50px*/
padding:50px 40px 30px 20px;/*上50px，右40px，下30px，左20px*/

也可以用padding-top、padding-bottom、padding-left、padding-right来分别设置上、下、左、右的内间距。

（四）、外间距（margin）

外间距的设置方法和内边距类似，是边框往外的距离。当我们设置一个盒子，不想让盒子离我们的窗体边太近，可以设置外边距，使得外间距和窗体边有一定的距离。同时也是窗体间用于分隔各盒子元素的方法之一。
外间距也可以用像素值，百分号来设置如：50px，50%；也可以用vh、wh这些视窗宽高的的数值来设置，如50vh。可以简单的用“margin:（1值~4值)”格式来设置参数。如

margin:50px;/*上下左右外间距都为50px*/
margin:50px 40px;/*上下外间距50px，左右外间距40px*/
margin:50px 10% 40px;/*上外间距50px，左右外间距取10%，下外间距50px*/
margin:50px 40px 30px 20px;/*上50px，右40px，下30px，左20px*/

也可以用margin-top、margin-bottom、margin-left、margin-right来分别设置上、下、左、右的外间距。

（五）、盒子模型的内容部分（content）

前面我们讲了边框、内外边距的部分，盒子里还有设置内容的部分。内容可以是我们设置的文本、图片等各元素组件。下面则为内容部分的各种属性。

1.宽和高（width、height）

width:100px;/* 宽100px*/
height:200px;/* 高200px*/

除了可使用像素值的px，还可以使用百分号%设置，以表示长或宽占了窗体宽高的百分之几。还可以用vw和wh根据窗体比率设置宽高。

2.文本属性（font、text）

（1）、字体（font）

font-size:16px;
设置字体大小为16px
font-family:字体类型，泛型字体家族；
可以只填字体类型，如宋体。泛型字家族指定多种字体用于在前面字体类型无法显示时显示
font-weight:bold;
字体粗细，有bold(加粗)、normal(正常的)
font-style:italic;
字体样式，如italic(斜体)、normal(正常的)

（2）、文本设置（text）

text-align:left;
文本的水平对齐方式，上代码表示文本向左对齐。总和有left（文本向左对齐）、right（文本向右对齐）、center（居中对齐）、justify(两端对齐)。
vertical-align:top;
文本的垂直对齐方式，上代码表示文本顶部对齐。总和有top（顶部）、middle（垂直居中）、bottom（底部）、baseline（沿基线对齐内容）、sub（下标）、super（上标）。
line-height:1.6;
设置行高,1.6比率。
text-decoration:underline;
设置文本的装饰，如 underline(下划线)、line-through(删除线)、overline(文本上方一条线)、none(去除所有装饰)。
letter-spacing:2px
控制字符之间的间距。
word-spacing:5px
控制单词之间的间距,上代码为设置5px间距。
text-transform:uppercase;
控制文本的大小写，如 uppercase(大写)、lowercase(小写)、capitalize(首字母大写)、none(原本样式)。
white-space:normal;
控制空白字符和换行的处理方式，如
------ nowrap(默认值，自动换行)
------ pre-wrap(文本不会换行)
------ pre(保留空格、制表符、换行符)
------ pre-line(保留空格、制表符、换行符，允许自动换行)
------ break-space(保留空格、制表符、换行符，允许长词在空格处换行)

3.颜色和背景属性（background）

color:red;
将文本设置为红色。也可以使用16进制或rgb参数来设置颜色。
background-color:aque;
设置背景颜色为天蓝色。也可以使用16进制或rgb参数来设置颜色。
background-image: url("这里放图片的路径");
背景导入图片。
background-position:center;
定义背景图像的位置,上代码为图片居中显示。总和有：top（上部）、bottom（下部）、left（左）、right（右）、center（居中）。也可以用百分比、像素来定位。
background-size:cover;
设置背景图像的大小，上代码表示图像拉伸至整个元素。可以设置百分数和像素值来设置图片大小，也可以使用cover裁剪按比例拉伸以铺满这个背景区域，也可以使用contain保持比率完全显示在容器中。contain是保持比例显示，因此可能会出现空白的区域以保持比例。
background-repeat: no-repeat;
控制背景图像的重复方式,上代码表示背景图像不重复。总和
------ repeat 为默认设置，水平和垂直重复背景图像。
------ repeat-x 仅水平重复背景图像
------ repeat-y 仅垂直重复背景图像
------ no-repeat 不重复背景图像

4.超出容器范围的显示方式（overflow）

overflow: hidden;
控制容器的内容处理超出的部分，上代码表示溢出的内容隐藏掉。属性值总和如下：
------ visible 默认值，内容显示在容器外
------ hidden 溢出的内容被隐藏
------ scroll 显示滚动条，内容未超出也显示滚动条
------ auto 当内容超出时自动显示滚动条

四、结语

愿以为花一天时间可以搞定这部分的内容，结果没想到盒子模型的内容深入拓展后有这么多。表面上好像只有边框、外边距、内边距、内容简单的几部分，没想到这几部分之下还有那么多隐藏功能。就像冰山一样，它显示的只是一角，深水之下还有它的诸多内容。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！