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

文章目录

    • Intro
    • 谨记
      • [`box-sizing` 两个不同赋值的效果区别?](#box-sizing 两个不同赋值的效果区别?)
      • 宽高的数值计算
      • [标准盒模型 `box-sizing: content-box; `](#标准盒模型 box-sizing: content-box; )
    • [box-sizing 属性的全局设置](#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 两个不同赋值的效果区别?

两种值:

  • 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-boxborder-box 之间切换。

观察这个容器DOM的边界大小:

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

### 替代盒模型

box-sizing 属性的全局设置

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

css 复制代码
* {
  box-sizing: border-box;
}

或:

css 复制代码
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

相关推荐
滴水可藏海1 分钟前
Chrome离线安装包下载
前端·chrome
m512711 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue