css盒子

小k鏖

已于 2024-10-11 21:50:21 修改

阅读量425

点赞数 9

文章标签： css 前端

于 2024-10-10 23:35:53 首次发布

本文链接：https://blog.csdn.net/2301_79765198/article/details/142834800

版权

一、CSS 盒子模型简介

在CSS中，盒子模型是一个核心概念，它描述了如何将HTML元素渲染成矩形框，并定义了这些框的不同组成部分及其相互之间的关系。盒子模型主要包括以下几个部分：

内容（Content）：元素的实际内容区域，可以通过width和height属性来设置。
边框（Border）：围绕在内边距外侧的线条，可以通过border属性来设置。
内边距（Padding）：内容区域与边框之间的空白区域，可以通过padding属性来设置。
外边距（Margin）：边框外侧的空白区域，用于与其他元素分隔，可以通过margin属性来设置。

例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid red;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h1>例子</h1>

<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。我添加了 50px 的内边距，20px 的外边距和 15px 的红色边框。</div>

</body>
</html>

运行结果

二、盒子模型的组成部分

（1）内容（Content）

内容是盒子的核心部分，包括文本、图片或其他媒体元素。

1.作用：利用width和height属性设置内容区域的大小，默认是和字内容区域的大小
2.取值:数字+px

例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: red;
  width: 300px;
  height:300px;
  
}
</style>
</head>
<body>

<h1>例子</h1>

<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。我添加了 300px的宽和高，背景颜色为红色。</div>

</body>
</html>

（2）边框（Border）

边框是盒子的轮廓，可以设置颜色、宽度和样式。通过border属性可以设置边框的样式、宽度和颜色。

1.属性名:border (这是一个复合属性)
2.属性值:数字+px 线条的种类和颜色(不分先后顺序)

            边框宽度 border-width: 50px;

                边框样式 border-style: double;（solid 单实线）

                边框颜色 border-color: red;

                边框的复合写法：border:50px double red;

                border的圆角效果：border-radius：5%（百分比/像素）；

                盒子的阴影效果：  box-shadow:10px 10px 10px rgb;

<!DOCTYPE html>
<html>
<head>
<style>
div {
            width: 300px;
            height: 300px;
            background-color: red;
            border: 15px solid green;
            border-radius: 50px;
            box-shadow:10px 10px 10px grey;

}
</style>
</head>
<body>

<h1>例子</h1>

<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。我添加了 300px的宽和高，背景颜色为红色，绿色边框，50像素圆角，灰色阴影。</div>

</body>
</html>

运行结果

（3）内边距（Padding）

内边距位于内容和边框之间，用于增加盒子内部的空白区域。可以通过padding属性设置内边距的大小。

1.属性值：padding

padding（上、右、下、左）分为padding-top，padding-right，padding-bottom，padding-left

2.取值：数值+px

padding可以当做复合属性来使用，可以给单独的方向设置内边距（最多取四个值，上右下左，顺时针的顺序，）

1个值	它会被应用到盒子的所有四边，即上、右、下、左。
2个值	第一个值应用于上下（垂直方向），第二个值应用于左右（水平方向）。
3个值	顺序是上、左右、下。左右值相同。
4个值	按照顺时针方向分别对应上、右、下、左。

例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
            width: 300px;
            height: 300px;
            background-color: red;
            border: 15px solid green;
            border-radius: 50px;
            box-shadow:10px 10px 10px grey;
            padding: 100px;

}
</style>
</head>
<body>

<h1>例子</h1>

<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。我添加了 300px的宽和高，背景颜色为红色，绿色边框，50像素圆角，灰色阴影，内容和边框的距离100像素。</div>

</body>
</html>

（4）外边距（Margin）

外边距位于盒子与其他元素之间，用于设置盒子之间的间隔（设置边框外侧空白区域的属性）。可以通过margin属性设置外边距的大小。

属性名：margin

属性值：数值+px

外边距与内边距同理,外边距是边框距离页面边缘和元素的距离。

外边距可以在父级元素中自适应居中：margin：auto；

例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
            width: 300px;
            height: 300px;
            background-color: red;
            border: 15px solid green;
            border-radius: 50px;
            box-shadow:10px 10px 10px grey;
            padding: 100px;
            margin: 200px;

}
</style>
</head>
<body>

<h1>例子</h1>

<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。它包括：边框、内边距（填充）、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。我添加了 300px的宽和高，背景颜色为红色，绿色边框，50像素圆角，灰色阴影，内容和边框的距离100像素，盒子边框距离整个页面和元素200像素。</div>

</body>
</html>

运行结果

三、盒模型的工作原理

当你为一个元素设置width和height属性时，这些值仅适用于内容区域。如果加上内边距、边框和外边距，元素的总体尺寸会更大。在标准盒模型中，元素的总宽度等于内容宽度加上左右内边距、边框和外边距的总和。同理，总高度也是如此计算的。
box-sizing属性
CSS提供了box-sizing属性，它可以改变盒模型的计算方式。box-sizing: border-box使得元素的width和height属性包括内容、内边距和边框，而box-sizing: content-box则保持标准盒模型的行为，即宽度和高度仅指内容区域的大小。
盒模型的实际应用
在实际的网页设计中，理解和掌握盒模型是非常重要的，因为它直接影响到元素的布局和响应式设计。通过合理使用内外边距和边框，开发者可以创建灵活且适应不同屏幕尺寸的布局。

四、CSS 盒子模型的全部属性总结

CSS盒子模型涉及的属性主要分为四类：内容、内边距、边框、外边距，以及控制盒模型解析方式的属性。下面详细列出这些属性及其作用：
1. 内容（Content）
1.width：设置元素的宽度。
2.height：设置元素的高度。
2. 内边距（Padding）
1.padding：设置所有四个方向的内边距。
2.padding-top：设置顶部内边距。
3.padding-right：设置右侧内边距。
4.padding-bottom：设置底部内边距。
5.padding-left：设置左侧内边距。
3. 边框（Border）
1.border：设置所有四个方向的边框宽度、样式和颜色。
2.border-width：设置所有四个方向的边框宽度。
3.border-style：设置所有四个方向的边框样式。
4.border-color：设置所有四个方向的边框颜色。
5.border-top：设置顶部边框宽度、样式和颜色。
6.border-right：设置右侧边框宽度、样式和颜色。
7.border-bottom：设置底部边框宽度、样式和颜色。
8.border-left：设置左侧边框宽度、样式和颜色。
9.border-radius：设置边框的圆角半径。
4. 外边距（Margin）
1.margin：设置所有四个方向的外边距。
2.margin-top：设置顶部外边距。
3.margin-right：设置右侧外边距。
4.margin-bottom：设置底部外边距。
5.margin-left：设置左侧外边距。
5. 盒模型解析方式
1.box-sizing：定义宽度和高度的计算方式。可选值为content-box（标准模型）和border-box（边框模型）。
6. 其他相关属性
1.background-clip：定义背景的绘制区域。
2.background-origin：定义背景图片的位置参考点。
这些属性共同作用于CSS盒模型，帮助开发者精确控制元素的尺寸和布局。