div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
发布时间:2016-11-25 11:24:30 作者:佚名 我要评论
不知道大家有没有遇到过这种情况,在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将padding计算在width内。下面来一起看看吧。
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
前言
本文介绍的是利用CSS3的新属性box-sizing,解决div宽度设置width:100%后再设置padding或margin超出父元素的问题,有需要的朋友们可以参考借鉴。
语法
值一、content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
值二、border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
值三、inherit
规定应从父元素继承 box-sizing 属性的值。
例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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 > |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
相关文章
- 最近发现多个div中table的td就算调成一样的width也无法对齐,后来发现了解决方法,提到table-layout: fixed,经设置效果相当不错,大家可以参考下2014-03-28
- 首先我们知道这个效果应该是一个老话题了。 今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧 需要说明的是有幸也见到过CSSPLAY2008-10-17
- 下面小编就为大家带来一篇CSS控制div宽度最大宽度/高度和最小宽度/高度的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-12
- 这里我们来看一下在不固定宽度和高度的情况下CSS调整div居中的方法总结,考虑到了老IE的兼容性,同时也有CSS3的translate属性解决方法介绍,需要的朋友可以参考下2016-06-14
- 最近做了个项目,其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识,需要的朋友参考下2016-01-28
- div设置宽度背景颜色js代码是一款可设置宽度大小跟背景颜色的原生js代码下载2014-12-31
- 这篇文章主要为大家介绍了通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧,需要的朋友可以参考下2014-10-09
- 在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要将其换行,实现的css代码如下2014-07-22
- 这篇文章主要介绍了div盒子究竟占多大面积实际的宽度高度如何计算的,有图有真相并附示例代码,为此疑惑的朋友可以参考下2014-07-09
- 当一行文字超过div宽度的时候,浏览器中默认是让它换行显示的,如果不想让它换行显示那要怎么办,下面有个不错的方法,大家不妨尝试下2014-05-23
最新评论