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

相关推荐
brzhang几秒前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果8 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星9 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang16 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears16 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士23 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童25 分钟前
五个JavaScript 应用技巧
javascript
David凉宸28 分钟前
凉宸推荐给大家的一些开源项目
前端
举个栗子dhy29 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
袋鱼不重30 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor