【CSS3】box-sizing 属性
来源:互联网 发布:域名西部数码 编辑:程序博客网 时间:2024/05/18 02:51
实例
规定两个并排的带边框的框:
div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}
<!DOCTYPE html><html><head><style> div.container{width:30em;}div.box{<span style="color:#ff0000;">box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */</span>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>
效果:
如果去掉box-sizing:border-box,效果是:
浏览器支持
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
语法
box-sizing: content-box|border-box|inherit;
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit规定应从父元素继承 box-sizing 属性的值。实质上:
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box:border和padding不计算入width之内
padding-box:padding计算入width内
border-box:border和padding计算入width之内,其实就是怪异模式了~
看起来不太好理解,直接看程序吧!
<style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; }</style>
效果:
这样应该很容易理解了吧!
0 0
- CSS3 box-sizing 属性
- css3:box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing 属性
- CSS3 box-sizing 属性
- CSS3 Box-sizing属性
- 【CSS3】box-sizing 属性
- CSS3 box-sizing属性
- 【CSS3】Box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- CSS3 box-sizing 属性
- css3 box-sizing属性
- 冒泡,选择,插入排序的效率比较
- □□□ + □□□ = □□□
- Window消息机制
- Matlab做快速傅里叶变换
- 初学Phaser.js之管中窥豹
- 【CSS3】box-sizing 属性
- 漫谈android系统(1)解析android编译
- Fragment 操作原理
- Bootstrap之轮播图
- 使用BP神经网络做预测
- 保存数据时报:Incorrect string value: '\xF0\x9F\x91\x8D' for column 'f_char_name' at row 1
- 挥手夕阳无限美-15年终总结
- 几种常用 css3 选择器解释
- Hadoop族 版本变化