CSS3 box-sizing属性
作用:许可您以确实的体式格局定义顺应某个地区的具体内容。
申明:Internet Explorer、Chrome、Safari 以及 Opera 支撑 box-sizing 属性。Firefox 须要前缀 -moz-。
语法:
box-sizing: content-box|border-box|inherit;
值 | 形貌 |
content-box | 这是由 CSS2.1 划定的宽度高度行动。 宽度和高度离别应用到元素的内容框。 在宽度和高度以外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决议了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内举行绘制。 通过从已设定的宽度和高度离别减去边框和内边距才获得内容的宽度和高度。 |
inherit | 划定应从父元素继续 box-sizing 属性的值。 |
CSS3 box-sizing属性的运用示例
<!DOCTYPE html> <html> <head> <style> div.container { width:30em; border:1em solid; margin: 100px auto; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; border:1em solid red; float:left; } </style> </head> <body> <div class="container"> <div class="box">这个 div 占有左半部份。</div> <div class="box">这个 div 占有右半部份。</div> </div> </body> </html>
效果图:
以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!
以上就是box-sizing属性怎样用的细致内容,更多请关注ki4网别的相干文章!