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

相关推荐
孤水寒月3 分钟前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀12 分钟前
html初学者第一天
前端·html
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络3 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github