css盒子模型

Ytyouzzz

于 2024-06-22 17:15:40 发布

阅读量1k

点赞数 10

文章标签： css html 前端

本文链接：https://blog.csdn.net/2301_80840100/article/details/139882138

版权

一、盒子模型简介

CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。一个盒子由四个部分组成：

Content(内容) - 盒子的内容，显示文本和图像。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Margin(外边距) - 清除边框外的区域，外边距是透明的。

把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。理解盒子模型的概念对于掌握网页布局至关重要。

二、盒子模型的组成部分

（1）内容（Content）

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
      div {
           width: 200px;
           height: 200px;
           background-color: aquamarine;
      }
    </style>
</head>
<body>
    <div>这里是内容 </div>
</body>
</html>

在浏览器中单击右键检查或按住Fn+F12键查看。

（2）内边距（Padding）

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

1.属性值：padding

2.取值：数值+px

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

取值个数	效果
1个	给上下左右同时设置相同的内边距
4个	分别对应盒子的 `上右下左` (顺时针的顺序)
3个	对应盒子的 `上左右下`
2个	对应盒子的 `上下左`

padding分为padding-top，padding-right，padding-bottom和padding-left

1.padding-top:50px;
2.padding-right:50px;
3.padding-bottom:50px;
4.padding-left:50px;

（3）边框（Border）

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

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

边框宽度 border-width: 50px;

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

边框颜色 border-color: aqua;

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <style>
        .A{
            width: 250px;
            height: 300px;
            background-color: aquamarine;
            border-color: aqua;
            border-width: 10px;
            border-style: solid;
            border-radius: 50px;
            box-shadow:10px 10px 10px grey;
        }
    </style>
</head>
<body>
    <div class="A">
        <div>这是一个div</div>
    </div>
</body>
</html>

border可以给指定范围设置边框：border + top/bottom/left/right

border-top: 10px solid red;
border-bottom: 10px solid red;

（4）外边距（Margin）

外边距位于盒子与其他元素之间，用于设置盒子之间的间隔。可以通过margin属性设置外边距的大小。

属性名：margin

属性值：数值+px

外边距与内边距同理

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

三、盒子模型的类型

CSS盒子模型分为两种类型：标准盒模型和IE盒模型。

1.标准盒模型（W3C盒模型）

在标准盒模型中，width和height属性仅包括内容的尺寸，不包括内边距、边框和外边距。这种盒模型在大多数现代浏览器中默认使用。

2.IE盒模型（怪异盒模型）

在IE盒模型中，width和height属性包括内容的尺寸、内边距和边框，不包括外边距。可以通过box-sizing属性设置为border-box来使用IE盒模型。

（1）怪异盒模型与普通模型的区别：

在标准的W3C盒子模型中，一个元素的宽度和高度只包括内容（content）的宽度和高度，不包括内边距（padding）、边框（border）和外边距（margin）。也就是说，如果你给一个元素设置了宽度为100像素，那么这100像素只包含内容区域，内边距、边框和外边距会在这个尺寸之外被添加。

而在怪异盒子模型中，一个元素的宽度和高度包括了内容、内边距和边框的总和。这意味着如果你给一个元素设置了宽度为100像素，这100像素将包括内容、内边距和边框的宽度，外边距会在这个尺寸之外被添加。

我们通过box-sizing：border：box来使普通盒子转变为怪异盒子

（2）怪异盒子模型的运用场景：

兼容旧版IE浏览器：在需要支持旧版Internet Explorer（特别是IE6、IE7）的网页设计中，可能需要使用怪异盒子模型来确保布局在这些浏览器中的表现一致。
精确控制元素尺寸：在某些情况下，开发者可能希望设置的宽度和高度就是元素在页面上的可视宽度和高度，包括内边距和边框。怪异盒子模型在这种情况下可以提供更直观的尺寸控制。
实现等宽布局：当需要创建等宽布局时，怪异盒子模型可以简化计算，因为不需要考虑内边距和边框会增加元素的总宽度。

以下举一个简单的例子，展示怪异盒子模型的应用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .container {
    display: flex;
    width: 600px; /* 总宽度 */
    border: 1px solid #000; /* 容器边框 */
  }

  .box {
    box-sizing: border-box; /* 使用怪异盒子模型 */
    width: 200px; /* 子元素宽度 */
    padding: 20px; /* 内边距 */
    border: 5px solid #333; /* 边框 */
    margin: 10px; /* 外边距 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
</body>
</html>

在这个例子中，我们有三个子元素（.box），每个子元素的宽度设置为200像素，内边距为20像素，边框为5像素，外边距为10像素。如果我们不使用怪异盒子模型（即使用box-sizing: content-box），每个子元素的总宽度将是200像素（内容宽度）+ 2 * 20像素（左右内边距）+ 2 * 5像素（左右边框）+ 2 * 10像素（左右外边距）= 270像素。这样，三个子元素的总宽度将是810像素，超过了容器的600像素宽度，导致布局错乱。

然而，通过将box-sizing属性设置为border-box，子元素的宽度包括了内边距和边框的宽度，因此每个子元素的实际占用宽度仍然是200像素。这样，三个子元素的总宽度正好是600像素，与容器的宽度相匹配，布局就不会出现问题。

使用怪异盒子模型可以更容易地控制元素的尺寸，尤其是在需要精确布局的场合。

3.弹性盒子模型

弹性盒子模型（Flexbox）是一种CSS布局模型，用于在一个容器内分配和对齐项目，即使它们的大小是未知或者是动态的。Flexbox布局的主要目的是提供一种更加有效的方式来排列、对齐和分配容器内元素的空间，即使它们的大小是未知或者是动态的。使用Flexbox可以轻松实现各种布局。

（1）弹性盒子模型的组成

弹性盒子模型由两个主要的部分组成：弹性容器（flex container）和弹性子项（flex items）。

弹性容器：通过设置display属性为flex或inline-flex来创建一个弹性容器。它的直接子元素将成为弹性子项。
弹性子项：弹性容器内的子元素自动成为弹性子项，它们可以使用Flexbox的属性来调整布局

（2）如何实线弹性盒子

1.创建弹性容器:

.flex-container {
  display: flex; /* 或 inline-flex */
  /* 其他样式 */
}

2.设置弹性子项的排列方向

.flex-container {
  flex-direction: row; /* 默认值，水平方向 */
  /* flex-direction: column; /* 垂直方向 */
  /* 其他样式 */
}

3.设置弹性子项的换行方式

.flex-container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  /* flex-wrap: wrap; /* 换行 */
  /* 其他样式 */
}

4.设置弹性子项的对齐方式

.flex-container {
  justify-content: flex-start; /* 默认值，起点对齐 */
  /* justify-content: flex-end; /* 终点对齐 */
  /* justify-content: center; /* 居中对齐 */
  /* justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */
  /* justify-content: space-around; /* 每个项目两侧的间隔相等 */
  /* 其他样式 */
}

5.设置弹性子项的顺序和弹性

.flex-item {
  order: <integer>; /* 默认值为0，数值越小，排列越靠前 */
  /* 其他样式 */
  
  flex: <flex-grow> <flex-shrink> <flex-basis>; /* 简写属性 */
  /* flex-grow: <number>; /* 定义项目的放大比例，默认值为0 */
  /* flex-shrink: <number>; /* 定义项目的缩小比例，默认值为1 */
  /* flex-basis: <length> | auto; /* 定义在分配多余空间之前，项目占据的主轴空间，默认值为auto */
  /* 其他样式 */
}

下面是弹性盒子运用实例：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .flex-container {
    display: flex; /* 设置为弹性容器 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 300px; /* 容器高度 */
    background-color: #f0f0f0; /* 容器背景颜色 */
  }

  .flex-item {
    padding: 20px;
    border: 1px solid #333;
    background-color: #ffffff;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">这是一个弹性子项</div>
  <div class="flex-item" style="width: 200px;">另一个弹性子项</div>
</div>
</body>
</html>

在这个例子中，我们创建了一个.flex-container的弹性容器，它将子元素.flex-item水平垂直居中。无论屏幕尺寸如何变化，.flex-item都会保持在容器的中心。这种布局对于创建卡片、模态窗口或导航栏等元素非常有用。

弹性盒子模型的另一个优点是它可以轻松地处理不同大小的元素。例如，如果我们想要在.flex-item旁边添加另一个不同大小的元素，我们只需要添加另一个带有flex-item类的div，Flexbox会自动处理它们的空间分配。

四、盒子模型的布局应用

掌握盒子模型后，可以轻松实现网页的布局。以下是一些常见的布局方法：

（1）浮动布局

通过设置元素的float属性，可以实现元素的水平排列。浮动布局是早期网页布局的主要手段，但需要注意清除浮动带来的影响。

（2）定位布局

通过设置元素的position属性，可以实现元素的定位。定位布局包括相对定位、绝对定位和固定定位，可以创建复杂的布局结构。

（3）Flex布局

Flex布局是一种现代的布局方法，通过设置display属性为flex，可以轻松实现垂直和水平方向上的布局。Flex布局具有灵活性、响应性和简洁性，是当前网页布局的首选方案。

五、盒子模型的注意事项

在学习盒子模型的过程中，需要注意以下几点：

（1）盒子模型的默认宽度

在标准盒模型中，盒子的默认宽度为auto，即自适应内容的宽度。在IE盒模型中，盒子的默认宽度为内容的宽度加上内边距和边框的宽度。

（2）盒子模型的层叠顺序

在布局过程中，盒子之间可能会出现重叠现象。了解盒子模型的层叠顺序，可以更好地控制元素的显示效果。

（3）盒子模型的兼容性

不同浏览器对盒子模型的支持程度有所差异，因此在实际开发中需要注意浏览器的兼容性问题。

Ytyouzzz

关注

10
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
复制链接

扫一扫