div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
打赏
一、总结
一句话总结:直接加上box-sizing:border-box;即可解决上述问题。
1、box-sizing
的三个属性分别是什么?
根据意思来记很好记的
值一、content-box (向外边框)
值二、border-box (向内边框)
值三、inherit (继承爸爸)
2、设置边框的样式用什么属性?
box-sizing
box-sizing:border-box;
二、div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
1、相关知识
语法
1
|
box-sizing: content-box|border-box|inherit; |
值一、content-box (向外边框)
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
值二、border-box (向内边框)
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
值三、inherit (继承爸爸)
规定应从父元素继承 box-sizing 属性的值。
2、代码
<!DOCTYPE html> < html > < head > < style > div.container { width:100%; border:1em solid; padding:15px; box-sizing:border-box; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:100%; border:1em solid red; float:left; padding:15px; } </ style > </ head > < body > < div class = "container" > < div class = "box" >这个 div 占据左半部分。</ div > </ div > </ body > </ html > |
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、每年专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2025-01-31:宅加太忙,特此在网上找女朋友,坐标上海,非诚勿扰,vx:fan404006308
AI交流资料群:753014672
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步