CSS 两种盒模型 box-sizing content-box 和 border-box

文章目录

- Intro
- 谨记
- - `box-sizing` 两个不同赋值的效果区别？
  - 宽高的数值计算
  - 标准盒模型 `box-sizing: content-box; `
- box-sizing 属性的全局设置

Intro

先问一句：box-sizing 和它的两个属性值是做什么用的？以前我并不知道它的存在，也做了很久的前端开发。
答：box-sizing 的两个不同的赋值：content-box(默认值) 和border-box 会影响如width/height/max-width/min-width/... 等宽高属性的值究竟落实到盒子box的哪一部分？
是 仅content —— 这是 content-box
还是 content + 两边的padding + 两边的border —— 这是 border-box

下文只重点介绍一个 CSS 属性的用法：

box-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
The box model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

在这里插入图片描述

谨记

`box-sizing` 两个不同赋值的效果区别？

两种值：

content-box 默认值。我们设置的 width/height 等属性设置的是仅content部分的宽高
border-box 我们设置的 width/height 等属性设置的是 content+border+margin 的宽高

宽高的数值计算

见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

首先，你要回忆一下盒模型的各个部分 (从中间向外围依次是)：
content < padding < border < margin < outline
在这里插入图片描述

当对一个用作容器的DOM元素设置了height/width属性之后，再设置box-sizing的值：在content-box 和 border-box 之间切换。
观察这个容器DOM的边界大小：

标准盒模型 `box-sizing: content-box;`

在这里插入图片描述 ### 替代盒模型

在这里插入图片描述

box-sizing 属性的全局设置

对于新的 web 站点，可以直接对所有DOM元素应用指定的CSS属性值：

* {box-sizing: border-box;
}

在这里插入图片描述

或：

html {box-sizing: border-box;
}*,
*::before,
*::after {box-sizing: inherit;
}

如下图：在 <html> 元素上设置 box-sizing 属性，并将所有其他元素设置为继承该值。
见 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model 。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/382230.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！