元素宽度的问题

date
Mar 27, 2023
slug
deepcss-box-width
status
Published
tags
深入解析CSS
summary
Element width
type
Post

元素宽度的问题

设置两个盒子的 css 使其在一行显示
.main { 
 float: left;
 width: 70%;
 background-color: #fff;
 border-radius: .5em;
} 
.sidebar {
 float: left;
 width: 30%;
 padding: 1.5em;
 background-color: #fff;
 border-radius: .5em;
}
​ 两列并没有并排出现，而是折行显示。虽然将两列宽度设置为 70%和 30%，但它们总共占据 的宽度超过了可用空间的 100%，这是因为盒模型的默认行为（如图 3-4 所示）。当给一个元素设 置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。
notion image
​ 这种行为会让一个宽 300px、内边距 10px、边框 1px 的元素渲染出来宽 322px（宽度加左右 内边距再加左右边框）。侧边栏的宽度等于 30%宽度加上各 1.5em 的左右内边距，主 容器的宽度只占 70%。两列宽度加起来等于 100%宽度加上 3em。因为放不下，所以两列便折行 显示了。

避免魔术数值

若在本地调试出width值为26%是一个魔术数值，可以使用计算值进行计算
calc(30% - 3em)

调整盒模型

​ 将 box-sizing 设置为 border-box 后，height 和 width 属性会设置内容、内边距以 及边框的大小总和

全局设置border-box

​ 使用通用选择器(*)选中页面上所有元素，并用两个选择器选中网页的所有伪元素。height 和 width 会指定元素的实际宽和高
*,
::before,
::after{
    box-sizing:border-box;
}
​ 当使用第三方组件时，全局设置回选中第三方组件里的元素
所以对全局修改盒模型进行修改
:root{
    box-sizing:border-box;
}
*,
::before,
::after{
    box-sizing:inherit;
}
并且可以 在必要时选中第三方组件的顶级容器
.third-party-component {
 box-sizing: content-box;
}

给列之间加上间隔

基于百分比的外边距留白

给其中一列加上外边距，再调整元素的宽度，将多出来的空间减掉。
.main {
 float: left;
 width: 70%;
 background-color: #fff;
 border-radius: .5em;
} 
.sidebar {
 float: left;
 width: 29%;/*从宽度中减去 1%将其添加到外边距留白*/
 margin-left: 1%;/*间隔的宽度由外层容器的宽度决定，百分比是相对于父元素的完整宽度*/
 padding: 1.5em;
 background-color: #fff;
 border-radius: .5em;
}

使用 calc()从宽度中减去间距

从宽度中减掉 1.5em 分给外边距，而不是完整宽度的 1%
.main {
 float: left;
 width: 70%;
 background-color: #fff;
 border-radius: .5em;
} 
.sidebar {
 float: left;
 width: calc(30% - 1.5em);
 margin-left: 1.5em;/*从宽度减去1.5添加到外边距*/
 padding: 1.5em;
 background-color: #fff;
 border-radius: .5em;
}

© shallrise 2025