1、盒⼦模型的含义
所有的元素都是框，所有的元素在⻚⾯都占据空间，⽽计算元素所占空间⼤⼩的公式叫做
盒⼦模型
2、盒⼦的组成
i. 盒⼦的外形都是矩形的
ii. 盒⼦包括：
• 内容 （width + height 元素的⾼和宽）
• 内边距 （
padding 也叫填充和补⽩）
• 边框 （
border ）
• 外边距 （margin）
3、内边距
（
1）特征
1.位于内容content与边框border之间
2.padding加给⽗元素的，⽬的是调整⼦元素或者内容的位置
3.padding会撑⼤盒⼦
4.padding没有颜⾊，背景⾊会覆盖到padding区域
5.⾕歌f12中盒⼦模型的颜⾊是绿⾊
6.padding不⽀持负值
（
2）属性
- 单边的内边距
padding-⽅位词(top/right/bottom/left)
- 1-4边的内边距
padding:⼀个值 四边
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
- 取值
数值（正数）、百分⽐（参考⽗元素的宽度，值为⽗元素宽度的X%）
（
3）应⽤（⽹⻚布局时要习惯去看调试台的盒⼦模型）
- 调整盒⼦中内容的位置，并更改盒⼦⼤⼩
◦ 直接正常使⽤padding即可
- 调整盒⼦中内容的位置，并且不改变盒⼦⼤⼩
◦ 设定padding值
◦ 再将盒⼦的宽⾼在原基础上减去增加的内边距值
- 若插⼊图⽚后，发现图⽚与padding之间有空⽩区域，如下图红⾊区域所显⽰
a. 原因：图⽚太⼩了
b. 解决：设置图⽚⼤⼩=重新调整后的内容⼤⼩4. 如果⾕歌浏览器调试台的数值跟⾃⼰敲得不⼀样问题不⼤（⽐如敲10 显⽰9.8），这时
候只要将⻚⾯缩⼩为80%即可
（
4）问题
不独占⼀⾏的⾏内元素只能调整左右内边距，⽆法调整上下内边距
不独占⼀⾏的⾏内块元素则可以调整所有边距
4、外边距
（
1）特征
1.位于边框border之外
2.margin是添加给元素⾃⾝的，⽬的是调整⾃⾝的位置或者元素与元素之间的位置
3.margin不会撑⼤盒⼦
4.margin没有颜⾊
5.⾕歌f12中盒⼦模型的颜⾊是橘⻩⾊
6.margin可以设置负值
（
2）属性
- 单边的外边距
margin-⽅位词(top、right、bottom、left)
- 1-4边的外边距
◦ ⼀个值 四边
◦ 两个值 上下 左右
◦ 三个值 上 左右 下
◦ 四个值 上 右 下 左
- 取值数值（正负值）、百分⽐（参考⽗元素的宽度，值为⽗元素宽度的X%）、 auto（平均
分配空间）
（
3）应⽤
- 去除内外边距
- { padding: 0; margin: 0; } 只有数值为0的时候，才可以省略单位
- 元素⽔平居中
◦ 独占⼀⾏的元素⽔平居中
margin：auto; 或者 margin:0 auto; （
0表⽰上下外边距为0）
（
auto是平均分配空间，是margin的特殊取值，哪个元素需要居中该在哪个元素的
属性中进⾏设置）
◦ 不独占⼀⾏的元素⽔平居中
给⽗元素添加text-align: center
（
4）问题
- 外边距溢出：⽗元素⾥⾯的第⼀个⼦元素添加margin-top，会把⽗元素带下来
◦ 原因：⽗元素和⼦元素共享margin-top
◦ 解决：
1）给⽗元素添加1px的padding-top或者1px的border-top（不推荐，因为会撑⼤
盒⼦，影响布局）
⸺如果使⽤border 必须同时设置边框颜⾊和样式
2）给⽗元素添加overflow: hidden;(触发了BFC)
- 外边距合并：相邻的上下两个元素，垂直外边距相遇，上⾯有margin-bottom，下⾯有
margin-top，间距会重叠，数值以⼤的为准
◦ 解决：间距写单⼀⽅向
◦ 但是左右⽅向的外边距不会合并，最终的两个元素之间边距会为两个值的和
- 不独占⼀⾏的⾏内元素，使⽤上下⽅向的margin/padding/border⽆效注意：两个⾏内元素（如span）之间的⽩⾊空处是因为有空格，要消除的话，需要删掉空
格
写作：span1span2
5、元素的宽度
▪ 元素的总宽度
• width + padding2 + border2 + margin*2
▪ 元素的实际宽度
• width + padding2 + border2
6、元素类型的分类
1）第⼀种：两类⸺块级元素、⾏内元素/内联元素(特殊的⾏内块元素)
2）第⼆种：两类⸺置换元素、⾮置换元素
置换元素=⾏内块元素，如：img
• 浏览器会根据元素的标签名和属性来决定渲染的内容
• 本质上置换元素会在⻚⾯上先绘制⼀个框，在框中渲染内容
3） 第三种：三类⸺块元素、⾏内元素、⾏内块元素
块元素
div p h1-h6 ul li ol dl dt dd hr
1.独占⼀⾏，在⽂档流中从上往下排列
2.设置宽⾼有效
3.默认宽度为⽗元素的100% 默认⾼度靠内容撑开
4.盒⼦模型的属性都有效
5.在⽹⻚中以块的形式存在，可以作为容器放置其他元素，常⽤于布局
6.p不能嵌套其他的块元素 h1-h6不能嵌套标题类的标签
⾏内元素
span a s del u sup sub strong b em i br
1.与其他的⾏内元素或者⾏内块元素共⽤⼀⾏
按顺序从左到右排列 ⼀⾏放不下⾃动换⾏
2.设置宽⾼⽆效
3.默认宽⾼靠内容撑开
4.设置margin/padding/border的上下属性⽆效
5.span常⽤于⼀⾏⽂本中要设置不同样式时6.span标签会把元素紧紧包围住，不会再有其他的空间
7.左右的⾏内元素有间隙，这其实是空格，如是要删除该空⽩，可以把两个标签之间的空
格删掉
⾏内块元素
img
1.与其他的⾏内元素或者⾏内块元素共⽤⼀⾏
按顺序从左到右排列 ⼀⾏放不下⾃动换⾏
2.设置宽⾼有效
3.默认宽⾼不考虑，因为⾏内块元素的默认宽⾼在不同浏览器是不同，所以这个是需要⾃
⼰后期再去根据要求设置
4.盒⼦模型的属性都有效
5.会出现幽灵空⽩节点，可以在img的css代码中加上 display:block#
