做网站建设与网页制作盒子模型时，这3个坑90%的人都踩过

今天不聊虚的。

直接说点干货。

很多新人做网页。

总喜欢用margin。

结果布局全乱套。

其实问题出在哪？

就是盒子模型没搞懂。

你以为margin是外边距。

padding是内边距。

就这么简单？

错。

大错特错。

我见过太多项目。

因为盒模型搞不定。

最后不得不重写代码。

浪费时间，还背锅。

咱们得把这事掰开了说。

先说标准盒子。

这是W3C规定的。

width只算content。

padding和border另算。

听起来很合理。

对吧？

但现实很骨感。

很多老浏览器。

或者某些特殊框架。

默认用怪异盒子。

这时候width包含padding。

这就很搞心态。

你设个100px宽。

加上20px padding。

实际占位140px。

页面直接溢出。

手机上看更明显。

左右一挤。

内容全变形。

这时候咋办？

记住一个属性。

box-sizing: border-box。

这个必须加上。

全局加上。

最好写在reset.css里。

这样width就固定了。

padding再大。

也不会撑破盒子。

这是保命符。

一定要用。

别听有些人说。

用margin负值调位置。

那是野路子。

看着聪明。

其实隐患巨大。

一旦子元素浮动。

或者绝对定位。

全乱。

还有个大坑。

margin折叠。

两个垂直margin。

取大值。

不是相加。

你设两个20px。

间距只有20px。

不是40px。

很多人在这栽跟头。

调试半天。

找不到原因。

其实原理很简单。

父元素没设border。

或者没设padding。

margin就穿透了。

解决办法。

给父元素加个overflow: hidden。

或者设个1px solid border。

虽然丑。

但管用。

别嫌麻烦。

这是经验之谈。

再说说响应式。

现在做网站。

不搞移动端适配。

等于白做。

盒子模型在移动端。

更要注意。

特别是padding。

用px写死。

在小屏手机上。

字都挤在一起。

体验极差。

建议用rem或者vw。

或者百分比。

让盒子自适应。

宽度用百分比。

高度用min-height。

这样内容多了。

盒子自动撑开。

不会遮挡底部。

这点很重要。

很多外包公司。

为了省事。

高度写死。

结果客户加个图。

布局全崩。

被骂得狗血淋头。

其实就一行代码的事。

别偷懒。

还有图片问题。

img标签默认是inline。

底部会有空隙。

看着难受。

解决办法。

display: block。

或者vertical-align: bottom。

这两个都行。

我习惯用block。

简单粗暴。

有效。

最后说点心态。

别怕改代码。

前端就是这样。

改来改去。

才能调出完美效果。

遇到bug。

别慌。

打开开发者工具。

看Computed面板。

每个盒子的尺寸。

清清楚楚。

哪里不对。

一目了然。

别靠猜。

靠数据说话。

网站建设与网页制作盒子模型。

这个概念虽然老。

但永远不过时。

它是网页布局的基石。

基石不稳。

楼必塌。

希望兄弟们。

都能避开这些坑。

少加班。

多赚钱。

这才是硬道理。

别整那些花里胡哨的。

把基础打牢。

比啥都强。

共勉。