在网页设计中，css中的盒子模型是一种用来描述元素如何布局和定位的概念。盒子模型将每个元素看作一个由内容、内边距、边框和外边距组成的矩形盒子。这些部分可以通过css属性来控制它们的大小、颜色、样式和位置。
1、盒模型结构
下面图片是盒模型的组成结构：
1.1 内容
内容（content）是元素的实际内容，比如文本、图片或其他元素。内容的宽度和高度可以通过 width 和 height 属性来设置，也可以根据内容的自然大小来自适应。
1.2 内边距
内边距（padding）是内容和边框之间的空白区域，可以通过padding属性来设置。内边距会影响元素的总大小，因为它会增加内容的宽度和高度。
属性值的4种方式：
四个值：上 右 下 左 {padding:0px 0px 0px 40px;} 从上方向开始，顺时针定义
三个值：上 左右 下 {padding:10px 20px 30px ;} 从上方向开始，先两边，再下边
二个值：上下 左右 {padding:10px 20px ;} 上下左右这个好记
一个值：四个方向 padding:2px; 定义元素四周填充为2px
说明：
可单独设置一方向填充，如：上方向：padding-top:10px; 右方向：padding-right:10px; 下方向：padding-bottom:10px; 左方向：padding-left:10px;
1.3 边框
边框（border）是元素的可见边界，可以通过border属性来设置。边框也会影响元素的总大小，因为它会增加内边距的宽度和高度。
属性值定义的4个方式：
四个值：上 右 下 左 从上方向开始，顺时针定义
三个值：上 左右 下 从上方向开始，先两边，再下边
二个值：上下 左右上下左右这个好记
一个值：四个方向 定义元素四周边框
1.4 外边距
外边距（margin）是元素和其他元素之间的空白区域，可以通过margin属性来设置。外边距不会影响元素的总大小，但会影响元素的位置和排列。
属性值定义的4个方式：
四个值：上 右 下 左 从上方向开始，顺时针定义
三个值：上 左右 下 从上方向开始，先两边，再下边
二个值：上下 左右上下左右这个好记
一个值：四个方向 定义元素四周统一外边距
2、元素宽高
当我们指定元素的宽高的时候，只是设置的content中的宽高，此外我们还可以对padding、border、margin进行配置
div{
width: 100px;
height: 100px;
border: 20px solid skyblue;
padding: 10px;
margin: 25px;
background: lightblue;
}
效果图：
元素最终占用的总宽度的计算公式是这样的：
元素的宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素最终占用的总高度的计算公式是这样的：
元素的高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
那div这个元素现在总共占用多少像素空间呢？
宽度 = 高度 = 100px(宽) + 10px(内边距) * 2 + 20px(边框) * 2 + 25px(外边距) * 2 = 210px
假如我们只有150px * 150px的空间该如何放下这个元素呢？
在不考虑将div进行缩放的情况下，可以修改元素的样式：
div{
width: 90px;
height: 90px;
border: 10px solid skyblue;
padding: 5px;
margin: 15px;
background: lightblue;
}
3、文本溢出相关的属性
3.1 溢出属性（容器的）
-
overflow:visible/hidden(隐藏)/scroll(滚动)/auto(自动)/inherit(继承);
-
visible:默认值，内容不会被修剪，会成现在元素框之外；
-
hidden：内容会被修剪，并且其余内容是不可见的；
-
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
-
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
-
inherit：规定应该从父元素继承overflow属性的值。
3.2 空余空间
-
white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；
-
normal：默认值，空白会被浏览器忽略，
-
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
-
标签为止；
-
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
-
pre-wrap：保留空白符序列，但是正常的进行换行；
-
pre-line:合并空白符序列，但是保留换行符；
-
inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)
3.3 省略号显示
-
text-overflow:clip/ellipsis
- clip：不显示省略号（…），而是简单的裁切;
- ellipsis：当对象内文本溢出时，显示省略标记；
text-overflow属性仅是…，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
//单行文字显示不全以省略号的形式进行展现
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
//多行文字显示不全以文字形式进行展现
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
了解css中的盒子模型对于网页设计非常重要，因为它可以帮助我们控制元素的布局和定位，以及实现各种视觉效果。
评论区