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

相关推荐
y先森14 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy14 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891117 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端