当前位置：首页 > news >正文

前端-CSS盒模型

news 2025/7/19 6:57:02

盒模型：Box-Model。

在css中，将任意一个元素，都视作一个盒子（可以层层嵌套）。

总宽度=内容区域宽+左右内边距+左右边框+左右外边距

总高度=内容区高宽+上下内边距+上下边框+上下外边距

在CSS中，所有的HTML元素都可以被看作是一个盒子，这个盒子由内容区、内边距（padding）、边框（border）和外边距（margin）组成。通过盒模型，浏览器能够确定元素的大小以及元素与其他元素之间的间距。

具体来说，盒模型由以下几个部分构成：

1、内容区（Content）：这是盒子的核心区域，包含元素的文本、图片等内容。它的大小由元素的 width 和 height 属性决定。

2、内边距（Padding）：位于内容区和边框之间的区域。它为内容提供了空白空间，不影响元素的实际大小，但会影响盒子的总体占用空间。

3、边框（Border）：包围内边距的边框区域，可以设置不同的宽度、样式和颜色。它会占用空间并影响元素的整体尺寸。

4、外边距（Margin）：在元素的边框之外，创建元素之间的间距。外边距不会影响元素的尺寸，但会影响元素的定位。

margin：外边距，可以单独分别指定四个方向的边距：

            margin-left: 10px;margin-right: 20px;margin-top: 30px;margin-bottom: 40px;

padding：内边距，也可以单独指定四个方向的。

 			padding-top: 10px;padding-bottom: 20px;padding-left: 30px;padding-right: 40px;

写的参数不同，代表的不同：

4：上，右，下，左
3：上，左右，下
2：上下，左右
1：上下左右

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型</title><style>.outer{/* 内容区域 */width: 300px;height: 200px;background-color: pink;border: 10px solid green;/* 外边距：margin */margin:30px;/* 内边距： */padding: 30px;/*四个单独写：分别指定上下左右外边距，每个方向都可以单独指定*//* margin-top: 30px;margin-bottom: 30px;margin-left: 30px;margin-right: 30px; *//*写四个 顺时针方向  上右下左 *//* margin: 10px 20px 30px 40px; *//* 写三个 ：上 左 右 *//* margin: 10px 20px 30px; *//* 写两个 上下 左右 *//*四个单独写:分别指定上下左右内边距，每个方向都可以单独指定 *//* padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px; *//*分别指定上下左右边框，每个方向都可以单独指定 *//* border-top: 10px solid green;border-bottom: 10px solid green;border-left: 10px solid green;border-right: 10px solid green; *//* 边框的宽度、style、color可以直接写四个方向的 *//* border-width: 10px 10px 10px 10px;border-style: solid solid solid solid;border-color: green; */}</style>
</head>
<body><div class="outer"></div>
</body>
</html>

如何给块元素添加背景图片

background-img

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 800px;height: 900px;background-color: pink;background-image: url(./imgs/壁纸.jpeg);/* 平铺模式 *//* 不平铺 */background-repeat:no-repeat ;/* 横向平铺 *//* background-repeat: repeat-x; *//* 纵向平铺 *//* background-repeat: repeat-y; *//* 大小  宽 高 *//* 背景图的尺寸 *//* background-size: 30px 30px; *//* background-size: auto 50px; *//* 缩放到背景图片正好能被包含，确保整个背景图片都显示在元素背景中，以最小边为基础（缩放），图片不会被裁剪，但这可能导致元素中留有空白区域。 */background-size: contain;/* 缩放到正好覆盖整个元素背景 *//* background-size: cover; *//* 控制位置 *//* background-position: 10px 100px; *//* background-position:  center; *//* background-position: 10% center; *//* 或者 上面四个background合并成一条语句,最常用： */background: url(imgs/壁纸.jpeg) no-repeat center center}</style>
</head>
<body><div class="outer"></div>
</body>
</html>