css盒子模型

酥暮沐

已于 2024-06-12 21:13:03 修改

阅读量985

点赞数 12

文章标签： css 前端 css3 html5

于 2024-06-12 21:12:06 首次发布

本文链接：https://blog.csdn.net/2401_83342251/article/details/139583478

版权

一、标准盒子模型

所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、内边距(padding)、边框(border)、外边距（margin），盒子从另一个角度来说就是元素占用的位置。

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

盒子模型结构图：

1.盒子模型内容部分（content）

作用：利用width和height属性设置内容区域的大小，默认是和字内容区域的大小

<!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>

在浏览器中鼠标右键进行检查,就可以看到盒子的内容区域正是我设置的 width: 200px; width: 200px;

、、

2.盒子模型内边距（padding）

语法： padding：值；

单边设置：

padding-top/bottom/left/right:值；

值可以为像素、百分比

内边距复合写法：

padding:值;(上下左右)

padding:值1（上下），值2（左右）；

padding：值1（上），值2（左右），值3（下）；

padding：值1（上），值2（右），值3（下），值4（左）；

比如 padding：50px;

3.盒子模型边框（border）

边框border样式:

边框宽度 border-width: 50px;

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

边框颜色 border-color: aqua;

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

如下图：双实线所占的地方便是border部分

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

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

代码如下：

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

           padding: 50px;

           border: 5px solid red;
           border-radius: 5%;
           box-shadow: 10px 10px 10px;

      }
    </style>
</head>
<body>
    <div>这里是内容 </div>
</body>
</html>

效果图：

4.盒子模型外边距（margin）

margin：盒子的外边距，即元素与其周围元素之间的空间

语法： margin：值；

单边设置：

margin-top/bottom/left/right:值；

值可以为像素、百分比

外边距复合写法：

margin:值;(上下左右)

margin:值1（上下），值2（左右）；

margin：值1（上），值2（左右），值3（下）；

margin：值1（上），值2（右），值3（下），值4（左）；

例如：

margin：50px; （橙色部分便是边框部分）

另外还可以通过margin设置居中 margin：auto；

二、怪异盒子模型

1.什么是怪异盒模型？

之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。

width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。

注意：外边框不受影响，和原来盒子模型一样

下面通过案例加深理解：

我们通过box-sizing:border-box;将普通盒子变成怪异盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width:200px;
                height:200px;
                background:aqua;
                border:5px solid red;
                padding:20px;
                box-sizing: border-box;/* 转换成怪异盒模型 */
            }
        </style>
    </head>
    <body>
        <div class="box">这里是内容</div>
    </body>
</html>

修改左右内边距的时候，最里边的左右部分就会减小

2. 怪异盒子有哪些运用场景呢？

比如说现在有一个大盒子里面有三个小盒子，让他们都浮动起来，向上图这样排列，刚好能放下三个，但是当我们给三个盒子增加内边距和边框时他们的盒子整体都会变大，然后就可能第三个盒子放不下了，就被挤到下面去了，如果这时候我们将三个盒子都设置成怪异盒模型，那么提前设置好他们每个盒子的大小，在设置内边距和边框就只从他们里面去挤压设置了，整体的盒子大小不变，那么第三个盒子也就不会被挤下去了。

三、弹性盒子模型

弹性盒是一种新的布局方式，特别适合移动端布局，主要用来做对齐方式的，且一般情况下处理的是水平或垂直方向的一行或一列-----2D

1.开启弹性盒模型

flex-container是一个Flex容器，它的子元素.flex-item是Flex项目。通过设置display:flex;，我们可以开启Flexbox布局。

display：inline-flex; 使容器为行内容器

display：flex; 使容器为块级容器

2.如何对弹性容器里面的子元素进行布局

配置Flex容器的属性：

例如：

flex-direction：主轴方向 (默认水平row，垂直colum)。

flex-wrap：是否换行。

justify-content：在主轴上的对齐方式。(

start：主轴的开始位置，如果是x则为最左边，如果为y则为最上边

end：主轴的结束位置，如果是x则为最右边，如果为y则为最下边

center：在主轴上居中

space-around：平均分布在主轴上，并且两端留白

space-between：平均分布在主轴上，并且两端不留白

)

align-items：在交叉轴上的对齐方式。(

。。。其他的和主轴道理一样

baseline：按照基线对齐，如果有文本，则按照文本的地步对齐，如果没有文本，则按照盒子的底部对齐

stretch：元素拉伸至自适应整个容器，默认的---测试时需要去除子项的固定宽高

)

配置Flex项目的属性：

例如：

flex-grow：3; 弹性子项目放大比率

flex-shrink:10;子项目缩小比率

flex-basis：200px;子项目基础尺寸

align-self：self-start;子项目在交叉轴对齐方式---当前单个子项目。

复合写法 :基础尺寸、放大和收缩比率

flex:200px 3 10;

综合代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style>
  .flex-container {
    max-width: 1000px;
    height: 600px;
    display: flex;
    flex-direction: row; /* 或者 column */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 允许换行 */
    border: 1px solid red;
  }
  .flex-item {
    width: 200px;
    height: 200px;
    background: lightblue;
    padding: 10px;
    margin: 10px;
    text-align: center;
    /* flex: 1; 等比例分配空间 */
  }
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">内容 1</div>
  <div class="flex-item">内容 2</div>
  <div class="flex-item">内容 3</div>
  <!-- 更多的Flex项目 -->
</div>

</body>
</html>

图片展示：

PS：盒子模型的知识非常重要，大家一定要好好学一下。

酥暮沐

关注

12
点赞
踩
12

收藏

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

之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。
复制链接

扫一扫