㈠box-sizing 屬性
⑴box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
⑵語法：box-sizing: content-box|border-box|inherit;
⑶取值
㈡content-box相關內容
⑴padding和border不被包含在定義的width和height之內。
對象的實際寬度等於設置的width值和border、padding之和；
即 ( Element width = width + border + padding )
此屬性表現為標准模式下的盒模型。
⑵審查元素看示例
①代碼部分
②盒模型部分
㈢border-box相關內容
⑴padding和border被包含在定義的width和height之內。
對象的實際寬度就等於設置的width值，
即使定義有border和padding也不會改變對象的實際寬度；
即 ( Element width = width )
此屬性表現為怪異模式下的盒模型。
⑵審查元素看示例
①代碼部分
②盒模型部分
㈣具體示例對比兩者區別
⑴content-box的示例代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>content-box示例</title> <style> .one{ background-color:red; width:200px; height:200px; float:left; border:solid 1px; padding:10px } .two{ background-color:yellow; width:200px; height:200px; float:left; border:solid 1px; padding:10px; box-sizing:content-box; } img{ width:200px; height:200px; } </style> </head> <body> <div class=one> <img src=ym.jpg> </div> <div class=two> <img src=ym.jpg> </div> </body> </html>
效果圖：
⑵border-box的示例代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-box示例</title> <style> .one{ background-color:red; width:200px; height:200px; float:left; border:solid 1px; padding:10px; } .two{ background-color:yellow; width:200px; height:200px; float:left; border:solid 1px; padding:10px; box-sizing:border-box; } img{ width:200px; height:200px; } </style> </head> <body> <div class=one> <img src=ym.jpg> </div> <div class=two> <img src=ym.jpg> </div> </body> </html>
效果圖：
★通過對比發現：
content-box 的 width 不包括 padding 和 border
border-box 的 width 包括 padding 和 border
㈤js測試box-sizing屬性
<style> div{ background-color:red; width:200px; height:200px; border:solid 1px; padding:10px; } img{ width:200px; height:200px; } </style> <div id="cs"> <img src="ym.jpg"> </div> <hr> <button onclick="document.getElementById('cs').style.boxSizing='content-box'">content-box</button> <button onclick="document.getElementById('cs').style.boxSizing='border-box'">border-box</button>
效果如下：
⑴點擊按鈕 ：
⑵點擊按鈕：
