CSS中box-sizing的使用
来源:互联网 发布:淘宝steam慈善包送大作 编辑:程序博客网 时间:2024/05/21 00:54
在进行网页布局的过程中经常会遇到一个问题,即一个DIV包裹着另一个DIV,里面的DIV宽度设为100%以后,再为它设置padding,里面的DIV会跑出来。如下图:
外层DIV为wrap,内层DIV为content,CSS代码:
<pre name="code" class="css">#wrap {width: 500px;height: 300px; background-color: #333;}#content{width: 100%; padding: 0 50px;background-color: #999;word-break:break-all}可以看到内层DIV溢出了。
此时我们当然可以对外层DIV设置overflow:hidden,但是内层的padding就无法达到其应有的效果了,如下图:
此处CSS代码除了加了一句overflow:hidden以外没有变化,就不打出来了。可以看到此时内层DIV的右内边距是不起作用的,因为它被隐藏住了。
通过查阅资料发现了还有box-sizing这个属性。它有三个值,从W3C上找到它们的描述:
content-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承 box-sizing 属性的值。
所以说我们之前内部DIV溢出的情况,也就是应为它是在宽度和高度之外绘制元素的内边距和边框。我们将box-sizing设为border-box之后它就变成了下图的样子:
可见此时我们的内边距都起作用了。
附上代码:
#wrap {width: 500px;height: 300px; background-color: #333;}#content{width: 100%; padding: 0 50px;background-color: #999;box-sizing: border-box; word-break:break-all}
这样我们终于就得到想要的效果了。
0 0
- CSS中box-sizing的使用
- CSS:box-sizing的使用
- css布局box-sizing使用
- box-sizing 的使用
- CSS的box-sizing属性
- 流体布局CSS3中 calc()的使用 顺带box-sizing
- CSS 之Box-sizing 属性的使用方法
- CSS的box-sizing和calc()
- 关于css box-sizing的理解
- css box-sizing
- CSS-CSS3 box-sizing
- css:box-sizing总结
- CSS box-sizing属性
- css-------box-sizing
- css box-sizing
- css :box-sizing
- CSS之Box-sizing
- CSS: box-sizing
- 互联网的思考
- Android 动画AlphaAnimation类方法
- Android内存回收策略优先级
- Android Animation详解一
- linux下装了mysql后重置root密码的问题
- CSS中box-sizing的使用
- Eureqa Formulize从实验数据中自动筛选函数关系的symbolic regression符号回归软件
- 《互联网创业密码》解开互联网创业的钥匙
- Ye40开服表页游广告魔龙诀厮杀多多魔幻范精彩呈现
- 您正试图打开类型为cpl文件 (.cpl) 的文件
- DOCTYPE都有哪几种模式?
- jasperreports导出报表报错:org.xml.sax.SAXException: http://java.sun.com/xml/jaxp/properties/schemaSource
- C语言字符串处理函数
- 关于android所有.9.png失效,客户端展示出现黑边问题