css盒子模型

一、什么是css盒子模型

CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。行内盒子使用的只是盒模型中定义的部分行为。

为了增加复杂性，有一种标准盒模型和一种替代盒模型。默认情况下，浏览器使用标准盒模型。

 二、css盒子模型的组成

在 CSS 盒子模型中，每个的 HTML 元素都会被当作是一个矩形的盒子，然后对它们进行从上到下，从左到右的布局。

一个盒子通常包括四个区域，从里到外分别是：

• 内容区域 - 代表盒子的实际内容部分，用来显示文本和图像，它是由 width 宽度和 height 高度来确定的
• 内间距区域 - 代表盒子与实际内容之间的空白区域，且内边距是透明的，由 padding 属性设置
• 边框区域 - 代表盒子的边框，是内间距区域和外边距区域的边界，由 border 属性设置
• 外边距区域 - 代表此盒子的边框与相邻的其他盒子边框之间的距离，且外边距是透明的，由 margin 属性设置

                        

三、盒子的类型：

CSS 中的盒子模型有两种类型，一种是 content-box，内容盒子，一种是 border-box 边框盒子，通过 css 属性 box-sizing 来设置。这两种盒子计算宽高的方式不一样。我们先来看一下 content-box 。
content-box 是 box-sizing 的默认值，也就是说所有的盒子默认都是内容盒子，那么这里 css 属性中的 width 和 height 设置的是它内容区域的宽高，而盒子的宽高需要加上内间距和边框，外边距不算在内。

如果把 box-sizing 的值改成 border-box，那么 width 和 height 属性就是分别设置盒子的最终宽度和高度

四、宽高的计算：

宽度的计算方式是：内容的宽度+左右内间距+左右边框的宽度

高度的计算方式则是：内容的高度+上下内间距+上下边框的宽度

五、背景颜色：

        大家小时候都玩过填色游戏吧，相当于将一个区域用画笔填上一种相同的颜色用来增加显示效果。对应的属性是：background-color 。但是问题来了我颜色要写什么值呢？这里介绍几个常用的颜色写法。

颜色名称：可以使用预定义的颜色名称来表示颜色，例如：background-color: red;表示红色背景。

RGB表示法：RGB表示红、绿、蓝三种颜色的组合值。可以使用十进制或十六进制表示。例如：

十进制表示法：background-color: rgb(255, 0, 0);表示红色背景。
十六进制表示法：background-color: #FF0000;表示红色背景。
RGBA表示法：RGBA在RGB的基础上增加了第四个参数，即alpha通道，用于控制颜色的透明度。取值范围是0到1，其中0表示完全透明，1表示完全不透明。例如：

background-color: rgba(255, 0, 0, 0.5);表示红色半透明背景

六、背景图片：

单一的背景颜色比较单调，我们需要为网页增加一个背景图片，以达到好看的效果
属性名称:background-image:url(具体路径);
大家思考一个问题，如果我的背景图片和给定的盒子大小不一样的时候我们该怎么办？

1.更改盒子大小

2.更改图片大小

这两种方法都是属于固定大小了，我们后续想要更改一些图片的话会比较麻烦，但是css刚好给了我们一些自动填充图片的属性

介绍
background-size是CSS背景属性中的一项，用于设置背景图像的大小。它可以接受多个不同的值，来决定如何调整背景图像的尺寸，以适应元素的大小和形状。

常见的background-size取值包括：

auto：保持背景图像的原始尺寸。
cover：缩放背景图像以完全覆盖容器，可能会被裁剪。
contain：缩放背景图像以适应容器，完整显示图像，可能会有空白部分。
length：指定背景图像的尺寸为一个固定的长度值，可以使用像素、英寸或厘米等单位。
percentage：指定背景图像的尺寸为一个百分比值，相对于背景容器的大小。
background-repeat是CSS背景属性中的一项，用于定义背景图像被如何重复或平铺。

repeat：默认属性值，背景图像会在水平和垂直方向上重复平铺，直到填满整个背景区域。
repeat-x：只在水平方向上重复平铺背景图像。
repeat-y：只在垂直方向上重复平铺背景图像。
no-repeat：只在水平和垂直方向上显示一次背景图像。
space：在水平和垂直方向上重复平铺背景图像，但是最后一行和列不进行重复，在最边缘留出空白。
背景图片一般搭配我标记的两种颜色的属性使用。覆盖和取消平铺

七、内外边距：

1. 内边距（padding）
作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

取值	示例	含义
一个值	padding: 10px;	上右下左都设置为10px
两个值	padding: 10px 20px;	上下设置为10px、左右设置为20px
三个值	padding: 10px 20px 30px;	上设置为10px、左右设置为20px、下设置为30px
四个值	padding: 10px 20px 30px 40px;	上设置为10px、右设置为20px、下设置为30px、左设置为40px

2.外边距（margin）

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

取值	示例	含义
一个值	margin: 10px;	上右下左都设置为10px
两个值	margin: 10px 20px;	上下设置为10px、左右设置为20px
三个值	margin: 10px 20px 30px;	上设置为10px、左右设置为20px、下设置为30px
四个值	margin: 10px 20px 30px 40px;	上设置为10px、右设置为20px、下设置为30px、左设置为40px

八、边框的使用：

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；
边框样式 border-style 可以设置如下值：

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框的颜色

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

2、边框的合写分写

边框简写：

 border: 1px solid red;  

边框分开写法：

border-top: 1px solid red;  /* 只设定上边框， 其余同理 */   

3、表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候,不量边框。
如果测量的时候包含了边框,则需要 width/height 减去边框宽度

九、特殊的盒子-替换元素

css 盒子模型中还有一种特殊的盒子：替换元素。替换元素是说，它们加载的是外部内容，并不会受现有的 CSS 属性的影响。常见的替换元素有 <img> 、 <iframe> 、 <video> 等，这些标签都是用来加载外部文件的，当前 HTML 页面中的 CSS 样式并不会影响它们的内容，比如说 <iframe> 标签加载的子页面，不会受当前页面的 CSS 影响。不过，可以通过 CSS 来控制替换元素在盒子中的位置，比如说用 <img/> 加载一张图片，我们可以限制 <img/> 盒子的宽高，然后利用 object-fit 属性，让图片等比例占满整个盒子，裁掉显示不下的部分，然后通过 object-position 来设置图片在盒子中的位置，可以是靠下或者居中等：