盒子模型：盒子模型概念、margin外边距概念以及外边距合并、border边、padding内边距

最新推荐文章于 2022-01-17 17:21:24 发布

不及你笑靥如花

最新推荐文章于 2022-01-17 17:21:24 发布

阅读量860

点赞数 1

分类专栏： HTML+CSS基础知识文章标签： css html

本文链接：https://blog.csdn.net/qq_43775721/article/details/110368248

版权

HTML+CSS基础知识专栏收录该内容

10 篇文章 2 订阅

订阅专栏

盒子模型

一、盒子模型概念
二、margin外边距
三、border边
- 1、基本概念
四、padding内边距
- 基本概念
- - padding内边距属性
  - padding内边距各个数值代表含义

一、盒子模型概念

所有HTML元素可以看作盒子，它包括

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

二、margin外边距

基本概念

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

margin外边距属性

属性	描述
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

margin外边距离各个数值代表含义

值	含义
一个值	上下左右
两个值	上下左右
三个值	上左右下
四个值	上右下左 (顺时针方向)

2、、外边距合并

基本概念

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
　　注释：
　　只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
　　垂直边框合并，左右边框不合并。
　　合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
　　如果外边距为负数。则取负数绝对值较大的。

相邻的兄弟合并

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子塌陷</title>
    <style type="text/css">
        .wrap1,
        .wrap2 {
            width: 100px;
            height: 100px;
            background-color: violet;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap1">我的所有外边距为10px</div>
    <div class="wrap2 ">我的所有外边距为10px</div>
</body>

</html>

祖先合并（级父元素与其第一个/最后一个子元素）

如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性(也可以说，当上边框宽度及上内边距距离为0时)，那么这个块级元素和其第一个子元素的上边距就可以说“挨到一起
了”。此时这个块级父元素和其第一个子元素就会发生上边距合并。即这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border、padding、 inlinecontent、height、 min-height、 max-height分隔时，就会发生下边距合并现象。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子塌陷</title>
    <style type="text/css">
        .wrap1,
        .wrap2 {
            width: 200px;
            height: 200px;
            background-color: violet;
            margin: 10px;
            color: white;
        }
        
        .class1 {
            width: 100px;
            background-color: yellow;
            margin: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="wrap1">我的外边距是10px</div>
    <div class="wrap2 ">
        <div class="class1">我的外边距是20px</div>
        我的外边距是10px
    </div>
</body>

</html>

三、border边

1、基本概念

在这里插入图片描述

四、padding内边距

基本概念

内边距在边框线和内容之间。

padding内边距属性

属性	描述
padding-bottom	设置元素的下外边距。
padding-left	设置元素的左外边距。
padding-right	设置元素的右外边距。
padding-top	设置元素的上外边距。

padding内边距各个数值代表含义

值	含义
一个值	上下左右
两个值	上下左右
三个值	上左右下
四个值	上右下左 (顺时针方向)

不及你笑靥如花

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型：盒子模型概念、margin外边距概念以及外边距合并、border边、padding内边距

盒子模型一、盒子模型概念二、margin外边距1、基本概念margin外边框属性margin外边框各个数值代表含义2、、外边距合并基本概念相邻的兄弟合并祖先合并（级父元素与其第一个/最后一个子元素）一、盒子模型概念所有HTML元素可以看作盒子，它包括Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。也是我们所
复制链接

扫一扫

专栏目录