CSS必学:你需要知道的盒子模型的秘密

这篇具有很好参考价值的文章主要介绍了CSS必学:你需要知道的盒子模型的秘密。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者:WangMin
格言:努力做好自己喜欢的每一件事

作为前端开发来说,要掌握的CSS基础一定很多,那么CSS中盒子模型肯定是必考必问必掌握的前端知识点,因为它是CSS基础中非常重要的内容,接下来我们就一起来了解一下盒子模型吧!

CSS必学:你需要知道的盒子模型的秘密

什么是盒子模型?

CSS 所有的HTML 标签元素在网页中都生成了一个描述该元素在HTML文档布局中所占空间的矩形框,我们可以形象地将它看作是一个盒子,它会把各种html元素按照设计需求包裹起来,将html元素进行封装,就组成了各式各样好看的网页。

简单一点来说,页面中的每一个标签,都可以看作是一个盒子,通过盒子的视角我们可以更直观地进行网页排版布局.

盒子模型的组成以及大小的计算

盒子模型的四个组成属性:内容区域(content)、填充区域(padding)、边框(border)以及 外边距区域(margin)

下面来分别了解一下这四个属性!

内容区(content)

内容区域(content)是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以你想要展示的任何东西,例如文本、图片等等多种类型。

这时候你会有一个疑问"内容区的大小如何确定呢?" 那么这里就可以提到width属性和height属性,这两个属性大家应该不陌生吧!

内容区域(content)就是由这两个属性组成的,使用width属性和height属性可以指定盒子内容区域的高度和宽度,如图所示

CSS必学:你需要知道的盒子模型的秘密

案例1:

只给元素设置width属性和height属性,我们来看看盒子模型的大小是多少?

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        background:#f00;
    }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

CSS必学:你需要知道的盒子模型的秘密

从上图中我们可以明显地看出盒子模型的大小为200 * 200,正是元素的高度与宽度。

由此可以的出一个结论:当一个元素只有width属性和height属性时,那么这个元素的内容区域的大小就是盒子模型的大小,

即盒子模型的大小=内容区域的大小.

边框(border)

边框是围绕在内容区和填充四周的边界

相信大家对border属性应该十分熟悉吧!border属性其实是 border-style、border-width和border-color 这三个属性的简写方式,

它们分别对应的含义与属性值如下表:

属性 含义 属性值
border-style 指定边框样式,是边框最重要的属性。如果没有指定边框样式,其他的边框属性都会被忽略,边框将不会显示 dotted(点线)、dashed(虚线)、solid(实线)等等
border-width 指定边框的宽度 任意数值,通常单位为px
border-color 指定边框的颜色 css中任何一种颜色表示方法都可以

CSS必学:你需要知道的盒子模型的秘密

案例2:

在案例1的基础上,再给元素设置boder属性,我们来看看盒子模型的大小是多少呢?

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        background:#f00;
    }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

CSS必学:你需要知道的盒子模型的秘密

从上图中可以明显的看出,我设置的边框宽度明明是3px,为什么浏览器显示的是2.4px呢?大家这时候应该都很疑惑

这里我给大家解答一下:这可能是因为你的浏览器缩放比例不是100%,如果浏览器比例是100%而值还是对的话,那么可能是电脑的缩放比例不是100%,通常电脑比例都是125%,可以让用户视觉上由更好的体验。如果你想要浏览器显示出正确的数值,你可以将电脑的缩放比例改为100%。

那么此时从图中我们也可以看出盒子模型的大小为204.8 * 204.8

盒子模型的宽度=200(宽度)+ 2.4(左边框)+2.4(右边框)= 204.8

盒子模型的高度=200(高度)+ 2.4(上边框)+2.4(下边框)= 204.8

由此可以的出一个结论:当一个元素设置width属性、height属性以及border属性时,

那么这个元素的盒子模型的宽度 = width + 左边框 + 右边框,

元素的盒子模型的高度 = height + 上边框 + 下边框

元素的盒子模型的大小 = 元素的盒子模型的宽度 * 元素的盒子模型的高度

填充区域(padding)

填充区域是内容区域和边框之间的空间,填充区域也可以叫做内边距。

padding属性是padding -top(上内边距)、padding -bottom(下内边距)、padding -left(左内边距)、padding-right(右内边距)这四个属性的简写方式,常见的取值方式如下表:

取值个数 例子 含义
1 padding:10px 上右下左四个方向的内边距都设置为10px
2 padding:10px 30px 上下方向的内边距设置为10px、左右方向的内边距设置为30px
3 padding:10px 30px 40px 上内边距设置为10px、左右方向的内边距设置为30px、下内边距设置为40px
4 padding:10px 30px 40px 50px 上内边距设置为10px、右内边距设置为30px、下内边距设置为40px、左内边距设置为50px

CSS必学:你需要知道的盒子模型的秘密

案例3:

在案例1和案例2的基础上,再给元素的上下内边距设置为10px,左右内边距设置为20px,我们来看看盒子模型的大小是多少呢?

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        padding:10px 20px;
        background:#f00;
    }
</style>

结果如图所示:
CSS必学:你需要知道的盒子模型的秘密

CSS必学:你需要知道的盒子模型的秘密

那么此时从图中我们也可以看出盒子模型的大小为244.8 * 224.8

盒子模型的宽度=200(宽度)+ 20 (左内边距) + 2.4(左边框)+ 20 (右内边距) + 2.4(右边框) = 244.8

盒子模型的高度=200(高度)+ 10 (上内边距) + 2.4(上边框)+ 10 (下内边距) + 2.4(下边框) = 224.8

由此可以的出一个结论:当一个元素设置width属性、height属性、border属性以及padding属性时,

那么这个元素的盒子模型的宽度 = width + 左内边距 + 左边框 + 右内边距 + 右边框,

元素的盒子模型的高度 = height + 上内边距 +上边框 + 下内边距 + 下边框

元素的盒子模型的大小 = 元素的盒子模型的宽度 * 元素的盒子模型的高度

外边距区域(margin)

外边距区域位于盒子的最外面,是添加在边框外周围的空间,盒子与盒子之间的距离。外边距区域(margin)使盒子与盒子之间不会紧凑地挨在一起,是CSS 布局的一个很重要的属性。

margin属性跟padding属性类似,是**margin -top(上外边距)、margin -bottom(下外边距)、margin -left(左外边距)、margin-right(右外边距) **这四个属性的简写方式,常见的取值方式如下表:

取值个数 例子 含义
1 margin:10px 上右下左四个方向的外边距都设置为10px
2 margin:10px 30px 上下方向的外边距设置为10px、左右方向的外边距设置为30px
3 margin:10px 30px 40px 上外边距设置为10px、左右方向的外边距设置为30px、下外边距设置为40px
4 margin:10px 30px 40px 50px 上外边距设置为10px、右内外距设置为30px、下外边距设置为40px、左外边距设置为50px

CSS必学:你需要知道的盒子模型的秘密

案例4:

在案例1、案例2以及案例3的基础上,再给元素的上下外边距设置为10px,左右外边距设置为30px,我们来看看盒子模型的大小是多少呢?

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        padding:10px 20px;
        margin:10px 30px;
        background:#f00;
    }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

CSS必学:你需要知道的盒子模型的秘密

那么此时从图中我们也可以看出盒子模型的大小为244.8 * 224.8,跟案例3的结果一样没有改变。

由此可以的出一个结论::margin属性不会计算到盒子模型的大小里面去,也就是说它不会影响盒子模型的大小,它影响的是盒子与盒子之间的距离

默认宽度的情况下,盒子模型大小的计算

我们在没有设置宽度的情况下,浏览器显示的宽度就是默认宽度。

举个简单的例子来说明一下

<div id="box">今天天气真好啊!</div>
<style>
  #box{
       height: 100px;
       background:#ccc;
  }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

从上图中可以看到,在没有给元素#box设置宽度的情况下,它的默认宽度是1472px, 会铺满整个父元素,这里#box的父元素是body,而body的宽度是根据你的电脑屏幕大小而定的,所以我这里是#box的默认宽度为1472px。

案例5

当给一个没有宽度的元素设置上下外边距为20px,左右外边距为30px时,也就是margin:20px 30px时,我们来看看盒子模型的大小是多少呢?

<div id="box">今天天气真好啊!</div>
<style>
  #box{
       height: 100px;
       margin:20px 30px;
       background:#ccc;
  }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

从上图中可以看到元素#box的高度没变依旧是100px,默认宽度变为了是1412px,这是为什么呢?那么就跟设置的margin属性有关了。

我们发现刚好1412px=1470px - 30px - 30px,这是因为当我们在没有给元素设置宽度,并且还设置了margin属性的情况下,它会在默认宽度的基础上减去左右外边距才会的到最终呈现在浏览器上的宽度,设置的上下外边距不会对元素的高度产生影响,只会影响元素的上下位置。

也就是说当元素处于默认宽度,但设置了margin属性的情况下时,元素的盒子模型宽度会受左右外边距的影响,元素的盒子模型宽度不会受上下外边距的影响。

此时元素的盒子模型宽度 = 默认宽度 - 左外边距 - 右外边距

元素的盒子模型高度 = height

案例6

当给一个没有宽度的元素分别设置margin:20px 30px,padding:10px,border:3px solid #000;的情况下,我们来看看盒子模型的大小是多少呢?

<div id="box">今天天气真好啊!</div>
<style>
  #box{
       height: 100px;
       margin:20px 30px;
       border:3px solid #000;
       padding:10px;
       background:#ccc;
  }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

从上图可以看到元素的宽度跟上一个案例的宽度一样没有改变,依旧是1412px,而高度反而变为了124.8px,这是为什么呢?

我明明给元素设置了padding:10px,border:3px solid #000;,按照案例2与案例3盒子模型大小的计算方式,应该会对元素大小有影响,但是这里并没有影响到元素大小,由此可以得到一个结论:当我们在没有给元素设置宽度,但设置了padding属性与border属性的情况下时,左右内边距与左右边框不会影响到元素的默认宽度。这里高度发生了变化,是因为这里给元素高度设置了100px,按照案例2与案例3元素盒子模型大小的计算方式,最终元素盒子模型的高度会加上上下内边距与上下边框,就变成了100+10+2.4+10+2.4=124.8px。

那么此时元素的盒子模型的宽度 = 默认宽度 - 左右外边距(内容区域高度 + 左右内边距 + 左右边框)

元素的盒子模型的高度 = height + 上下边框 +上内边距 +下边框 +下内边距

总结

当一个元素没有设置宽度,也就是默认宽度的情况下,设置的左右外边距会影响到元素的盒子模型的大小,设置的左右内边距和左右边框不会影响到元素的盒子模型的大小。元素的盒子模型的大小会不会受margin属性的影响取决于这个元素有没有设置宽度。

盒子模型的分类

CSS样式中明确将盒子模型分为标准盒子模型与怪异盒子模型。怪异盒子模型也称为IE盒子模型

其主要的属性为box-sizing,当属性值为:content-box时,该元素的盒子模型为标准盒子模型;

当属性值为:border-box时,该元素的盒子模型为怪异盒子模型;

当未设值box-sizing属性时,该元素的盒子模型也为标准盒子模型。

标准盒子模型

上述案例中所提到的都是标准盒子模型,在标准模式下,盒子模型大小的计算方式如下:

元素的盒子模型的宽度 = width + 左内边距 + 左边框 + 右内边距 + 右边框

元素的盒子模型的高度 = height + 上内边距 +上边框 + 下内边距 + 下边框

元素的盒子模型的大小 = 元素的盒子模型的宽度 * 元素的盒子模型的高度

详细案例可以往上翻阅查看

怪异盒子模型 (IE盒子模型)

案例7:

在上述案例的基础上,再给元素设置上box-sizing属性,并且属性值为border-box时,我们来看看盒子模型的大小是多少呢?

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        padding:10px 20px;
        margin:10px 30px;
        box-sizing: border-box;
        background:#f00;
    }
</style>

结果如图所示:

CSS必学:你需要知道的盒子模型的秘密

CSS必学:你需要知道的盒子模型的秘密

从上述案例中第二张图中我们可以看出盒子模型的大小为200 * 200,不正是我设置的宽度与长度吗?会从上述案例中第一张图中找到答案。图中左右内边距以及左右边框以及内容区域的宽度是包含在设置的宽度内的,也就是说在怪异模式下,盒子模型的宽度=width(左右内边距+左右边框+内容区域的宽度);图中上下内边距以及上下边框以及内容区域的高度是包含在设置的高度内的,也就是说在怪异模式下,盒子模型的高度=height(上下内边距+上下边框+内容区域的高度)

注意:在标准盒子模型和怪异盒子模型 (IE盒子模型)下,margin属性都不会计算到盒子模型的大小里面去。


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!文章来源地址https://www.toymoban.com/news/detail-711012.html

到了这里,关于CSS必学:你需要知道的盒子模型的秘密的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3盒子模型

    盒子模型分为两种: 第一种是 W3C 标准的盒子模型(标准盒模型) 第二种 IE 标准的盒子模型(怪异盒模型) 标准盒模型与怪异盒模型的表现效果的区别之处: 1、标准盒模型中 width 指的是内容区域 content 的宽度 height 指的是内容区域 content 的高度 标准盒模型下盒子的大小 =

    2024年02月21日
    浏览(49)
  • CSS盒子模型

    作用:布局网页,摆放盒子和内容。 盒子模型-组成 内容区域 – width height 内边距 – padding(出现在内容与盒子边缘之间) 边框线 – border 外边距 – margin(出现在盒子外面) 边框线 四个方向 属性名: border (bd) 属性值:边框线粗细 线条样式 颜色(不区分顺序) 单方向

    2024年02月10日
    浏览(93)
  • CSS 盒子模型

    CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。 盒子模型的组成部分包括: 内容区域(Content) :显示元素的实际内容,例如文本、图像或其他嵌套元素。 内边距(Padding) :位于内容

    2024年02月11日
    浏览(32)
  • CSS的盒子模型

    !DOCTYPE html html head     meta charset=\\\"UTF-8\\\" /     title盒子模型/title     style         *{         margin:0;         padding:0;         box-sizing: border-box;         }         /* 选择第一个li标签 */         li:first-child{             background-color: aqua;         }         /* 选择第三个

    2024年01月20日
    浏览(41)
  • 11 CSS盒子模型(重点)

    11 CSS盒子模型(重点) 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子,这些盒子由元素的content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。 padding(内边距及其缩写) 内边距,也

    2024年02月12日
    浏览(41)
  • 21.4 CSS 盒子模型

    4.1 统一样式设置 4.2 按边设置样式 4.3 练习 4.3.1 样式练习 4.3.2 边框制作图形 6.1 内边距 6.2 外边距 6.3 外边距合并(水平方向) 6.4 外边距合并(垂直方向) 7.1 内外边距 7.2 内容宽高 7.3 元素宽高 7.4 元素空间宽高 7.5 框模型计算方式 7.5 清除默认边距 7.6 练习 7.6.1 方式一 7.6.2 方式二

    2024年02月10日
    浏览(47)
  • 【Web前端】CSS-盒子模型

    网页布局的核心本质: 就是利用 CSS 摆盒子。 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式,然后摆放到相应位置。 往盒子里面装内容 ​ 盒子模型:把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的

    2023年04月15日
    浏览(49)
  • CSS常见元素类型 & 盒子模型

    块元素 常见块元素: div p h1~h6 ul li img 这些元素结束之后自带换行,一行只能存在一个元素,无法横向排列,设置这些元素的 盒子模型有效,文本对齐方式有效 内联元素 常见内联元素: a label span img 这些元素结束之后没有换行,一行可以存在多个,从左往右排列,设置这些元

    2024年01月19日
    浏览(31)
  • css中盒子模型的属性

    width:盒子的宽度,含 padding 和 border。 height:盒子的高度,含 padding 和 border。 padding:盒子内边距,即盒子和内容之间的空白区域。 border:盒子边框的属性,包括边框宽度、颜色和样式。 margin:盒子外边距,即盒子和周围元素之间的空白区域。 box-sizing:盒子的尺寸计算方

    2024年02月05日
    浏览(49)
  • CSS布局基础(标签类型,盒子模型)

    盒子组成 边框 外边距 内边距 内容 布局描述 选择标签 利用CSS布局 向盒子添加展示内容 边框 注意: 默认布局方式,边框会撑大盒子大小; 要么手动计算盒子大小,减去边框大小。要么将盒子定义为怪异盒模型 box-sizing: border-box ; 粗细 颜色 样式 复合表示 定义单个边框样式

    2024年02月01日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包