css3 box-sizing属性
生活随笔
收集整理的這篇文章主要介紹了
css3 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之內，其實就是怪異模式了~
?
ie8+瀏覽器支持content-box和border-box；
ff則支持全部三個值。
?
使用時：
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
栗子：
<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>截圖（ff）：
box-sizing：content-box | border-box
默認值：content-box
適用于：所有接受width和height的元素
繼承性：無
取值：
content-box：示例：
-
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; } -
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
說明：
設置或檢索對象的盒模型組成模式。- 對應的腳本特性為boxSizing。
兼容性：
| 6-7 | 4-18 | 5.1.7 | 9 | 7-12.5 |
| 8 | ||||
| 9 |
示例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>box-sizing_CSS參考手冊_web前端開發參考手冊系列</title> <style> .test{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;background:#eee;} .test2{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;background:#eee;margin-top:20px;} </style> </head> <body> <div class="test">content-box</div> <div class="test2">border-box</div> </body> </html>
總結
以上是生活随笔為你收集整理的css3 box-sizing属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS属性display:inline-
- 下一篇： CSS3盒模型box-sizing属性详