子盒子的整体占位不能超过父盒子的内容区域
父盒子的内容区域宽度≥子盒子wIDth+padding*2+border*2
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <Meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8"> <Title>document</Title> <style type="text/CSS"> *{ margin: 0; padding: 0; } .outer{ wIDth: 400px; height: 400px; border: 1px solID red; margin: 20px auto; } .inner{ wIDth: 360px; height: 200px; padding: 0 20px; background-color: skyblue; margin: 0 auto; } </style></head><body> <div class="outer"> <div class="inner"></div> </div></body></HTML>VIEw Code
如果子盒子不设置宽度，会自动撑满父亲，宽度是父亲的100%，如果你再设置边框，边距，他会自动内减，不需要再手动减少wIDth。
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <Meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8"> <Title>document</Title> <style type="text/CSS"> *{ margin: 0; padding: 0; } .outer{ wIDth: 500px; border: 1px solID red; margin: 20px auto; } .inner{ padding: 10 20px; background-color: skyblue; line-height: 28px; border: 6px solID blue; } </style></head><body> <div class="outer"> <div class="inner">文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</div> </div></body></HTML>VIEw Code 总结
以上是内存溢出为你收集整理的(前端)html与css css 14、父子盒模型全部内容，希望文章能够帮你解决(前端)html与css css 14、父子盒模型所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）