013CSS之盒子模型（Box Model）

已于 2022-02-05 18:14:53 修改
阅读量809 收藏
点赞数 2
分类专栏： HTML5 文章标签： css css3 html
于 2022-02-05 17:33:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hyc_cheng/article/details/122790624
版权

一、简介

所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

在这里插入图片描述
在这里插入图片描述

1、边框（border）

在这里插入图片描述
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色

语法：

border : border-width || border-style || border-color

在这里插入图片描述
CSS 边框属性允许你指定一个元素边框的样式和颜色。

边框样式 border-style 可以设置如下值：

  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:

  1. 测量盒子大小的时候,不量边框.
  2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
2、内边距(padding)

padding 属性用于设置内边距，即边框与内容之间的距离。
在这里插入图片描述
padding 属性（简写属性）可以有一到四个值。
在这里插入图片描述
以上 4 种情况，我们实际开发都会遇到。

当我们给盒子指定 padding 值之后，发生了 2 件事情：

  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。
    也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素 此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>
</html>

注意：
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度
如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小

3、外边距(margin)

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
在这里插入图片描述
margin 简写方式代表的意义跟 padding 完全一致。

4、外边距(margin)的应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。

.header{ 
width:960px; 
margin:0 auto;
}

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

4、外边距(margin)合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:

  1. 相邻块元素垂直外边距的合并
  2. 嵌套块元素垂直外边距的塌陷

1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有
上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
在这里插入图片描述
解决方案：
尽量只给一个盒子添加 margin 值。

案例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .div1{
            background-color: #ff0000;
            width: 200px;
            height: 200px;
            margin-bottom: 50px;
        }
        .div2{
            background-color: #00ff00;
            width: 200px;
            height: 200px;
            margin-top: 60px;
            
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
    <div class="div2">
        
    </div>
</body>

</html>

在这里插入图片描述

第一个盒子设置了50px的下外边距，第二个盒子设置了60px的上外边距，按照正常现象来说两个盒子的中间距离应该是110px,但是由于垂直外边距合并，所以取最大值60px，此时看到的现象是中间距离只有60px.

解决方法： 设置其中一个盒子的外边距为110px，另外一个盒子就不要设置了。

2. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

在这里插入图片描述
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。

案例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .div1{
            background-color: #ff0000;
            width: 400px;
            height: 400px;
            /* 给父级元素添加上外边距50px */
            margin-top: 50px;           
        }
        .div2{
            background-color: #00ff00;
            width: 100px;
            height: 100px;
            /* 子级元素添加上外边距100px */
            margin-top: 100px;                    
        }
    </style>
</head>

<body>
   
    <div class="div1">
        <div class="div2">
        
        </div>
    </div>

</body>

</html>

现象：
在这里插入图片描述
可以看到，子级元素的上外边距并没有生效，此时父子元素外边距已经塌陷，所以需要可以为父元素添加 overflow:hidden。

    <style>

        .div1{
            background-color: #ff0000;
            width: 400px;
            height: 400px;
            /* 给父级元素添加上外边距50px */
            margin-top: 50px;
            /* 给父级元素添加,避免父子元素外边距塌陷    */
            overflow: hidden;        
        }
        .div2{
            background-color: #00ff00;
            width: 100px;
            height: 100px;
            /* 子级元素添加上外边距100px */
            margin-top: 100px;                    
        }
    </style>

现象：
在这里插入图片描述

5、清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网
页元素的内外边距。

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内
块元素就可以了

小何在线
关注
专栏目录
盒子模型（Box Model）
chabc1999的博客
01-23 417
一、概述 网页布局的本质：利用CSS摆盒子，装内容。 盒子模型由：内容（content）、边框（border）、内边距（padding）、外边距（margin）构成。如图： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WkNnnNg3-1610444078995)(https://www.w3school.com.cn/css/css_boxmodel.asp#pic_center)] ...
盒子模型(Box Model)
小浩
01-21 1482
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名：内容（content），填充（padding），边框（border），边界（margin）,CSS 盒子模式都具备这些属性。 细节说明： ☛html 元素都可以看成一个盒子 ☛盒子模型的参照物不一样，则使用的 css 属性不一样。比如：从 div1 的角度看，是 margin-right，从 div2
盒子模型应用
kxindouhao5491的博客
08-24 1216
什么是盒子模型？   边框 border-color border-width border-style   border-color: 属性 说明 示例 border-top-color  上边框颜色 border-top-color:#369;  ...
CSS盒子
代码贩子、的博客
10-10 338
1.网页布局核心原理<搭建架子，布局盒子，填充内容> (1)搭建框架 就是创建html文件给的初始值 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
CSS 盒模型（Box Model）的学习和理解
09-25
CSS盒模型（Box Model）的学习和理解一直是学习DivCSS网页布局的基础内容。但有很多CSS初学者依然不够熟悉，虽然我们提供了很多相关的教程。大家可以多学习与思考。今天发布一篇一位CSS初学者对CSS盒模型（Box Model...
boxmodel:CSS盒模型编辑器界面构建器输入试用
05-14
BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...
HTML和CSS的关键:盒子模型(Box model)
12-09
HTML和CSS中的盒子模型（Box model）是网页布局的基础，它是理解CSS布局的关键。这个模型定义了元素在页面上的占用空间，包括元素的内容区域（Content）、内边距（Padding）、边框（Border）以及外边距（Margin）四...
网页设计—CSS 盒子模型(Box Model)
qq 2903359018博客
06-08 1416
各位小伙伴好，今天广州蓝景小编跟大家分享一下CSS 盒子模型(Box Model)的运用：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
box盒模型
Jruott的专栏
05-18 751
我们通常所说的box和模型的宽度L= width
盒子模型（box model）
Antoine__的博客
10-13 4896
盒子模型是css中特别重要的一个知识点，今天我和大家一起学习一下。
box model（盒子模型）
x1145540679的博客
03-09 354
1.frame(边框) 2.padding(内边距) 内容区和边框之间的距离是内边距，一共有四个方向的内边距 padding-top padding-right padding-bottom padding-left 内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上 html <!doctype html> <html> <head> <meta charset="UTF-8"> <title&g
css-box盒子模型
奔跑的皮卡丘
12-12 230
盒子模型分为四部分：内容区，内边距，外边距，还包括内外边距间的边界。如图所示：1 Content每个元素的内容，如文本，图像。内容和盒子边缘没有空间。2 padding内容和边框之间的空间。内边距是透明的，没有颜色和装饰。如果元素使用背景，背景会延伸到内边距，到边界截止。padding: 0px;3 border元素可以有一个可选边框，可以使用不同颜色，宽度和样式。 宽度： border-width
CSS 盒子
William Lin 的专栏
12-10 640
  这篇文章是转载的，对于理解css中的margin/padding/border这些概念很有帮助CSS 中有个重要的概念，就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。 盒子里由外至里依次是：·       marg
CSS盒子模型、浮动、定位
qq_42227428的博客
06-01 3782
一、盒子模型1、css背景（background）：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背...
CSS 盒子模型（Box Model）
瓜冬瓜的博客
05-27 1466
CSS 盒子模型（Box Model） 由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。 有两种标准，一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。 当对一个文档进行布局的时候，浏览器的渲染引擎会根据这两个标准的其中一个将所有元素表示为一个个矩形的盒子。 这两种标准对 height 和 width 的计算方式...
理解HTML和CSS布局的关键：盒子模型(Box Model)
"这篇文章主要介绍了HTML和CSS中的关键概念——盒子模型(Box Model)，以及margin和padding属性对于理解和使用CSS布局的重要性。文章指出，不翻译margin和padding的原因是这两个术语在汉语中没有直接对应的词语，且在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值