一、盒子模型解决什么问题控制盒子内容大小、内边距、边框、外边距区分元素本身占多大空间、它和别的盒子之间留多大空隙解决尺寸计算混乱的痛点标准盒 / IE 怪异盒两种计算规则实现元素之间拉开距离、加边框、背景留白、模块排版盒子四层结构从里往外content内容区域放文字、图片、子盒子padding内边距 → 内容和边框之间的距离在盒子内部背景会延伸到 paddingborder边框线margin外边距 → 当前盒子和别的盒子之间的距离盒子外面透明不会带背景margin外边距外面空白 border边框 padding内边距内部留白 content内容二、两种盒子模型重点box-sizing1. 标准盒模型默认box-sizing: content-box✅ 宽度计算公式盒子实际宽度 width (内容宽) padding 左右 border 左右你设置 width只是内容区的宽padding 和边框会把盒子撑大.box{ width:200px; padding:10px; border:2px solid #000; box-sizing: content-box; } /* 真实宽 200 10*2 2*2 224px */2. IE 盒模型 / 怪异盒模型推荐写box-sizing: border-box✅ 宽度计算公式盒子实际宽度 width包含 content padding border设置的 width 就是你肉眼看到盒子总宽padding、边框向内挤压内容不会撑大盒子.box{ width:200px; padding:10px; border:2px solid #000; box-sizing: border-box; } /* 盒子整体宽严格就是200px不用自己算加法 */ 开发几乎全部用 border-box布局不容易乱一般全局直接统一设置* { margin: 0; padding: 0; box-sizing: border-box; }三、四个属性怎么使用单位统一 px1. padding 内边距内容 ↔ 边框写法上 右 下 左顺时针padding: 10px; /* 四个方向都是10px */ padding: 10px 20px; /* 上下10px左右20px */ padding: 10px 20px 5px;/* 上10左右20下5 */ padding:10px 20px 30px 40px; /* 上、右、下、左 */ /* 单独写某一边 */ padding-top: 10px; padding-left: 15px;⚠️ 行内元素span上下 padding 不会推开上下元素左右正常生效。2. border 边框/* 粗细 样式 颜色 */ border: 2px solid #333; /* 单边边框 */ border-bottom:1px solid #ccc;3. margin 外边距盒子和隔壁盒子的距离写法和 padding 一模一样margin: 20px auto; /* auto 专门用来水平居中块级盒子前提有width */⚠️ margin 经典坑垂直 margin 塌陷合并两个上下挨着的块盒子上面 margin-bottom:20px下面 margin-top:20px最终空隙不是 40px而是取大的 20px。 水平 margin 不会塌陷。四、适用场景页面初始化重置清除浏览器自带默认 margin、padding* 选择器重置模块内部留白卡片、按钮里面文字离边框远一点 → 用 padding模块之间拉开间距两个卡片、两个 div 之间留白 → 用 margin给元素加边框、分割线border固定尺寸组件按钮、输入框、卡片border-box改 padding 不撑大盒子块级盒子水平居中margin: 0 auto;
)
