原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
浅谈对盒模型的理解
css盒模型
1.盒模型
css盒模型本质上是⼀个盒⼦，他包括：内容（content）、内边距（padding）、边框（border）、外边距（margin）
如下图所⽰：
2.盒模型具体css属性
margin(外边距):让两个同级盒⼦（也可以和⽗级元素使⽤）之间产⽣间距。
border：围绕在内边距和内容外的边框。
padding（内边距）：让内容与盒⼦的周围产⽣间距。
3.元素的具体⼤⼩
当你指定⼀个元素的宽和⾼时，你只是设置了内容的宽⾼，⽽盒⼦的具体⼤⼩还要加上外边距、边框、内边距。
div{
width:500px;
height:300px;
background:#ccc;
border:1px solid pink;
margin:25px;
padding:25px
}
宽度：
500px(内容)+1px(边框左)+25px（内边距左）+25px(外边距左)+1px(边框右)+25px（内边距右）+25px(外边距右)=602px。
⾼度：
300px(内容)+1px(边框左)+25px（内边距左）+25px(外边距左)+1px(边框右)+25px（内边距右）+25px(外边距右)=402px。
4.padding的⽤法
a.padding是盒⼦与内容之间距离，是在盒⼦⾥⾯的，主要作⽤是控制内容在盒⼦内部的位置。
b.padding添加在⽗元素上⾯。
c.padding能把盒⼦撑⼤{
如果想让盒⼦保持原有⼤⼩，需要在原宽⾼的基础上减掉padding。
如果⼀个盒⼦没有固定⼤⼩，盒⼦是被内容撑开的，那就不⽤减padding。
}
d.padding的设置⽅法{
单⼀⽅向：
padding-left：
padding-top:
padding-right:
padding-bottom:
简写：
padding:⼀个值 四周都padding
两个值padding:上下 左右
三个值padding:上 左右 下
四个值padding:上右下左
}
e.注意：padding不能取负值，⽽且padding不会对背景图的位置产⽣影响
5.margin的⽤法
a.margin是控制当前元素与其他同级元素的位置关系（有时padding和margin能实现相同效果），不会改变盒⼦的⼤⼩。
b.margin是长在盒⼦外⾯的。
c.margin的设置⽅法{
单⼀⽅向：
margin-right:
margin-left:
margin-top:
margin-bottom:
简写：
⼀个值margin:四周
两个值margin:上下 左右
三个值margin:上 左右 下
四个值margin:上右下左
}
d.注意：margin可以设置负值。
6.margin常出现的BUG
a.同级元素上下之间的margin值，不会叠加，会重合，按照最⼤值设置。
例如：
!DOCTYPE html
html lang=en
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0
titleDocument/title
style
{ *
margin: 0;
padding: 0;
}
.box1{
width:500px;
height:300px;
background:#ccc;
margin:25px;
}
.box2{
width: 400px;
height: 300px;
background: pink;
margin: 50px;
}
/style
/head
body
div class=box1我是第⼀个/div
div class=box2我是第⼆个/div
/body
/htm
文档评论（0）