css 盒子模型详解

最新推荐文章于 2024-04-19 14:53:43 发布

在下月亮有何贵干

最新推荐文章于 2024-04-19 14:53:43 发布

阅读量403

点赞数 3

分类专栏： css 知识总结文章标签： html5 css 前端

本文链接：https://blog.csdn.net/weixin_43877799/article/details/121371173

版权

css 知识总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

box-sizing盒子模型

box-sizing就是用于设置div的盒子模型的。

默认为content-box，还有一个常见设置为border-box。

content-box

默认的盒子模型是什么样的呢？

盒子主要由三部分（内容区，内边距padding，边框border）组成。

在默认的盒子下我们设置的width只是内容区的部分。

我们试试，先设置一个盒子width为100px，再给它一个边框为20px，padding也为20px。

<style>
  #box {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 20px lightblue solid;
    background-color: aqua;
  }
</style>
<body>
  <div id="box"></div>
</body>

我们可以鼠标选中发现整个盒子我们只是设置了内容区width为100px。

整个盒子实际上占据了水平方向上的180px。获取这个宽度的方式是offsetWidth，这才是真正盒子的可视宽度。

在这里插入图片描述
我们想要真正宽100px的盒子，可能得设置width为20px。

<style>
  #box {
    width: 20px;
    height: 20px;
    padding: 20px;
    border: 20px lightblue solid;
    background-color: aqua;
  }
</style>

在这里插入图片描述

border-box

我们意识到每次得去计算width的值过于麻烦了，我们就不能直接让盒子固定为100px吗。

border-box就可以将width作为盒子真正占据宽度，内容区将会帮我们自动计算。

<style>
  #box {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 20px lightblue solid;
    background-color: aqua;
    box-sizing: border-box;
  }
</style>

我们设置的width为100px，此时指的就不是内容区了，指的应该是内容区+padding+border，而这个值此时与offsetWidth相等。

它会自动调整内容区的宽，达到内容区与padding和border相加后为100px。
在这里插入图片描述
要注意计算出来的内容区最小为0，也就是这个盒子会被padding和border限制了大小，就算将width设置为50px，盒子最小也会占据80px

盒子水平方向的布局

学会盒子模型了，对于内容区、padding、border的控制，想必你已经可以拿捏了，但是一个盒子布局时，还存在一个属性会对它的布局产生影响，就是margin。

我们拿盒子水平方向的布局说，水平方向上，它的占据宽度如下。

margin-left+border-left+padding-left+内容区（默认盒子模型就是width）+padding-right+border-right+margin-right = 父元素的内容区宽度

<style>
  #outer {
    width: 500px;
    height: 100px;
    background-color: red;
  }
  #box {
    width: 100px;
    height: 100px;
    background-color: aqua;
  }
</style>
<body>
  <div id="outer">
    <div id="box"></div>
  </div>
</body>

如果我们不设置width，width的默认值是auto，所以0+0+0+auto+0+0+0=500，width会自动调整成500，占据整个父级的内容区宽度。

但是我们这里设置了width为定值100px，0+0+0+100+0+0+0=500，我们可以看到等式不成立，咋整？

margin-right会自动调整

等式不成立，浏览器会自动调整margin-right的值为400使等式成立。

这也正是块级元素即便设置了width没有达到父级内容区宽度仍然占据一行的原因。

虽然计算样式上没有标出来，但是dom上的颜色区域会告诉你占据了400px。
在这里插入图片描述

margin-right设置auto或定值

我们可以将margin-right设置为auto，会发现效果是一样的，只不过是把值标出来在计算样式上，给你了。

实际中，如果width固定了，margin-right虽然没有设置auto仍然会自动调整，此时我们可以将默认的margin-right看作auto，这样方便理解，注意只能看作，除非你真的设置了auto
在这里插入图片描述

就算将它设置为定值，它也会被调整。

可以看到我设置margin-right为20px，计算样式显示20px，可是在dom上显示的区域仍然是400。
在这里插入图片描述

magin-left设置定值

如果我们设置margin-left为定值20px，同样还是会去调整margin-right使等式成立。
在这里插入图片描述

设置magin-left为auto

终于，当我们设置magin-left为auto之后，调整的活给了magin-left。

因为magin-right只是没人干调整的活的时候才出手的，它默认值是0并不是auto。

当设置magin-left为auto，等式成为auto+0+0+100+0+0+0=500.

在这里插入图片描述

同时设置magin-left和magin-right为auto

这时，两个人同时调整，活就被平摊了，一边调整一半，会发现居中了！

这也就是为啥 margin: 0 auto 可以设置水平居中的原因。

在这里插入图片描述

同时设置width、magin-left和magin-right为auto

width的优先级还是高一些，如果设置了，就会自动magin-left和magin-right的auto就自动忽略不计，全都为0，width会自动调整占满内容区。

注意，以上都是在padding、border为0的基础上，如果padding、border有值的话注意在等式中的计算要考虑它们。

水平布局总结

margin-left+border-left+padding-left+内容区（默认盒子模型就是width）+padding-right+border-right+margin-right = 父元素的内容区宽度。
width设置auto的话会调整width使等式成立。
如果没有任何一个值为auto，则自动调整margin-right使等式成立。
margin-left也可以设置auto被作为等式成立的调整依据。
同时设置magin-left和magin-right为auto，会一边占据一半的调整宽度。
同时设置width、magin-left和magin-right为auto，magin-left和magin-right将变为0，只有width被作为等式成立的调整依据。

在下月亮有何贵干

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
css 盒子模型详解

目录box-sizingcontent-boxborder-box盒子水平方向的布局margin-right会自动调整margin-right设置auto或定值magin-left设置定值设置magin-left为auto同时设置magin-left和magin-right为auto同时设置width、magin-left和magin-right为auto水平布局总结box-sizingbox-sizing就是用于设置div的盒子模型的。默认为content-box，还有一个常见设置为border-b
复制链接

扫一扫