CSS box-sizing属性
来源:互联网 发布:mac mini 电源线 编辑:程序博客网 时间:2024/06/05 17:01
CSS3 box-sizing 属性
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
取值:
语法
box-sizing: content-box|border-box|inherit;
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit规定应从父元素继承 box-sizing 属性的值。实例1
<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>
结果:
实例2
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
- test1:
test2:
参考:http://www.w3chtml.com/css3/properties/user-interface/box-sizing.html
http://www.w3school.com.cn/cssref/pr_box-sizing.asp
http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html
0 0
- CSS box-sizing属性
- CSS的box-sizing属性
- html+css:box-sizing属性
- CSS box-sizing 属性详解
- CSS解读之box-sizing属性
- CSS 之Box-sizing 属性的使用方法
- css 3中的box-sizing属性
- 对css属性box-sizing稍稍了解
- css之盒子模型box-sizing属性
- 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
- JQuery插件小插曲
- 安卓6.0权限相关说明
- 将Map转换成Class
- FastDFS源码分析之tracker协议分析
- 线程与网络编程(第四节:缓冲区与按字节传递)
- CSS box-sizing属性
- Android学习笔记三之Android基础
- 大话设计模式-第07章 为别人做嫁衣--代理模式
- Add Two Numbers 将2个以链表形式表示的数相加
- Scanner & ASCII & split();
- intellij idea 2016破解方法
- Android ActionBar-左上角icon设置
- memcached源码阅读----使用libevent和多线程模型
- 7天学会Maven(第二天——Maven 标准目录结构)