css盒子模型学习记录

最新推荐文章于 2024-07-20 18:05:02 发布

ATRI_555

最新推荐文章于 2024-07-20 18:05:02 发布

阅读量1k

点赞数 24

文章标签： css 学习前端

本文链接：https://blog.csdn.net/ATRI_555/article/details/140282207

版权

1.盒子模型介绍

所有HTML元素可以看作盒子,CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型结构图

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

2.盒子模型的四个内容

width：内容区域的宽度
height：内容区域的高度
border：可以定义盒子边框的大小、形状和颜色
padding：内边距
margin：外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型示例</title>
</head>
<body>
    <div style="width: 200px; height: 200px; padding: 10px; margin: 10px; border: 1px solid red">这是一个div盒子</div>
    <div style="width: 200px; height: 200px; padding: 10px; margin: 10px; border: 1px solid red">这是一个div盒子</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型示例</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>这是一个div盒子</div>
    <div>这是一个div盒子</div>
</body>
</html>

下面四张截图分别展示了盒子模型的内容、内边距、边框和外边距

从这四张截图可以看到我定义的内容区域大小、内边距大小、边框大小和外边距大小都生效了。

3.内容模块

作用：利用width和height属性来设置盒子模型的内容区域的大小
属性名：width和height
取值：数字+px---px是像素

下图中就给width和height属性取了200px的大小来定义了一个200×200的正方形的内容区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型示例</title>
</head>
<body>
    <div style="width: 200px; height: 200px; padding: 10px; margin: 10px; border: 1px solid red">这是一个div盒子</div>
    <div style="width: 200px; height: 200px; padding: 10px; margin: 10px; border: 1px solid red">这是一个div盒子</div>
</body>
</html>

4.内边距模块和外边距模块

属性名：内边距:padding 外边距:margin
取值：例如10px、10%等，有多种方法

注意：外边距取值个数对效果的影响与内边距一致。

5.盒子大小的计算

盒子的大小并不只有内容区域的大小，当给盒子设置了border和padding时，盒子会被撑大

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

盒子大小如下图：为130×90

盒子的面积大小就已经包括了border和padding在内的面积

而外边框margin不会影响盒子面积的大小，但是会影响盒子在页面中占位的尺寸大小

例如：

假设有一个CSS规则如下：

	`div {`
	`width: 300px;`
	`border: 10px solid black;`
	`padding: 20px;`
	`margin: 15px;`
	`}`

盒子的宽度 = 300px（内容宽度） + 10px（左边框） + 10px（右边框） + 20px（左内边距） + 20px（右内边距） = 360px。
盒子的高度（假设内容高度为auto或未设置）将取决于内容的高度，但同样会加上上内边距、下内边距、上边框和下边框的宽度。
盒子在页面中占位的总宽度 = 360px（盒子宽度） + 15px（左外边距） + 15px（右外边距） = 390px。
盒子在页面中占位的总高度将取决于内容的高度以及上下内边距、边框和外边距的总和。

6.内减模式

如果不想让盒子被撑大,有两种办法:

手动减去border和padding的大小(很麻烦,需要大量的计算)
使用内减模式(浏览器会自动帮我们计算多余的大小,在内容区域减去)

使用方法:给盒子设置 box-sizing: border-box; 即可；不过，内容区域会被缩小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 60px;
      background-color: blue;
      border: 5px solid #000;
      padding: 10px;
      /*使用内减模式*/
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>这是一个div</div>
</body>
</html>

可以看出原本的内容区域应该是200×150的，现在使用内减模式后缩小了

7.外边距的合并问题

现有两个div盒子，分别为div1和div2，div1的底部外边距为20px，div2的顶部外边距为20px，它们两个的外边距是会合并在一起还是互相隔离变为40px呢？
答案是会变为20px，这就是外边距的合并现象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: blue;
    }
    
    .div1{
      margin-bottom: 20px;
    }
    .div2{
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div class="div1">这是一个div</div>
<div class="div2">这是一个div</div>
</body>
</html>

可见两个div之间的外边距显示的效果仍为20px，而不是40px，这就是外边距的合并现象。
外边距合并时,会取两个margin的最大值。
解决方法:尽量避免,只给一个盒子设置外边距就好。

ATRI_555

关注

24
点赞
踩
27

收藏

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

所有HTML元素可以看作盒子,CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子模型结构图。
复制链接

扫一扫