css3 box-sizing属性
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
默认值: | content-box |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxSizing="border-box" |
<style type="text/css"> div{width:200px;height:100px;padding: 20px; background:#eee;} .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; border: 10px solid #333; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; -webkit-box-sizing:padding-box;/*chrome 不支持*/ border: 10px solid #ccc; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; border: 10px solid #666; } </style> <div class="content-box">content-box</div> <div class="padding-box">padding-box/*chrome 不支持*/</div> <div class="border-box">border-box</div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。