关于css宽度分离

最新推荐文章于 2025-08-15 16:20:39 发布

转载最新推荐文章于 2025-08-15 16:20:39 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3407699/blog/2120413

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

所谓宽度分离就是width 属性不与影响宽度的 padding/border（有时候包括 margin）属性共存

例如： .box{width:200px;padding:20px;border:1px solid;}

为何要做宽度分离

一说到分离就是为了好维护，比如常说的样式和行为分离、前后端分离、亦或者这里说的宽度分离
由于dom的占位尺寸受margin、border、padding、content的影响，比如后期设计师说要将元素边框内有20px的空白，则会导致布局发生意想不到的错乱，这时候就需要重新计算width；如下例子：

// 这是初始样式，元素宽102px
.box{
width:100px;
border:1xp solid;
}
// 加20padding,元素就变成142px，布局不符合预期
.box{
width:100px;
padding:20px;
border:1px solid;
}
// 这时候就需要重新计算width，来保证元素占的大小
.box{
width:60px;
padding:20px;
border:1px solid;
}

如何做宽度分离

在子元素外嵌套一层标签，父元素定宽，子元素因为 width 使用的是默认值 auto，所以会充分利用可用空间，充满父元素，这里的子元素特指display为block、list-item、flex等的块级元素（不包括替换元素）

.father {
width: 102px;
}
.son {
border: 1px solid;
}
// 加padding 20px,布局依旧不会乱，大小还是102px,,不需要烧脑子去计算了，而且页面结构反而更稳固
.father {
width: 102px;
}
.son {
padding:20px;
border: 1px solid;
}