css盒模型

元素宽度的问题

当给一个元素设置宽或高的时候,指定的是内容的宽或高,所有内边距、边框、外边距都是追加到该宽度上的。这种行为会让一个宽 300px、内边距 10px、边框 1px 的元素渲染出来宽 322px(宽度加左右内边距再加左右边框)。如果这些值使用不同的单位,情况就会更复杂。

调整盒模型

box-sizing 的默认值为 content-box,这意味任何指定的宽或高都只会设置内容盒子的

大小。将 box-sizing 设置为 border-box 后, height 和 width 属性会设置内容、内边距以

及边框的大小总和,这刚好符合示例的要求。

全局设置box-sizing,给页面上所有元素和伪元素设置 border-box

css 复制代码
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}

盒模型通常不会被继承,但是使用 inherit 关键字可以强制继承。如下述代码所示,可以在必要时选中第三方组件的顶级容器,将其恢复为 content-box。这样组件的内部元素会继承该盒模型。

css 复制代码
.third-party-component {
box-sizing: content-box;
}
元素高度问题

等高列用display: table或Flexbox

相关推荐
@小红花34 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵36 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html