【css】boder-sizing 中content-box與boder-box的區別

1.盒子模型尺寸基準有兩種,分別是content-box和border-box  (默認是content-box)

2.理論上說,content-box與border-box區別是兩者的盒子的寬度是否包含表框和內邊距。

3.新建兩個不同背景填充的div

(con1設置爲box-sizing:border-box,con爲默認的content-box)

[html] view plain copy
  1. <head lang="en">  
  2.     <meta charset="UTF-8">  
  3.     <title></title>  
  4.     <style>  
  5.         .con{width: 100px; height: 100px;background-color:royalblue;  
  6.             border:1px solid red; padding: 10px;}  
  7.         .con1{box-sizing: border-box;}  
  8.     </style>  
  9. </head>  
  10. <body>  
  11.     <div class="con"></div>  
  12.     <div class="con con1"></div>  
  13. </body>  


在控制檯可以一目瞭然的看出兩個盒子的區別

第一個div的盒子模型如下:



第二個div的盒子模型如下:

原文:https://blog.csdn.net/qq_27892551/article/details/50522169


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章