鐩掑瓙妯″瀷 box-sizing 鐢ㄦ硶

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鐩掑瓙妯″瀷 box-sizing 鐢ㄦ硶相关的知识,希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/mil' title='mil'>mil   璇硶   idt   charset   html   alt   head   鏁堟灉   model   

璇硶锛歜ox-sizing 锛歝ontent-box || border-box || inherit


 

鍏冪礌锛?/strong>

content-box 涓?w3c鏍囧噯鐩掑瓙妯″瀷)

border-box 涓猴紙ie鏍囧噯鐩掑瓙妯″瀷锛?/p>

inherit锛氱户鎵跨埗绾х洅瀛愭ā鍨?/p>


 

鍖哄埆锛?/span>

w3c妯″瀷 涓環eight= 鍐呭鐨勯珮搴?

ie 妯″瀷 height=杈规+鍐呰竟璺?鍐呭鐨勯珮搴?/p>

濡傚浘锛?/p>

鎶€鏈垎浜浘鐗? src=


渚嬪瓙锛氬啓涓や釜div锛岃缃?box-sizing 灞炴€у垎鍒负content-box/border-box锛屽叾浠栧睘鎬у畬鍏ㄧ浉鍚屻€?/strong>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <title>box-sizing</title>
 5     <meta charset="UTF-8">
 6     <style>
 7         .model-w3c{
 8             box-sizing: content-box;
 9             float: left;          
10             width: 100px;
11             height:100px;
12             border:10px solid #aeeeff;
13             margin: 10px;
14             padding: 10px;
15         }
16         .model-ie{
17             box-sizing: border-box;
18             float: left;
19             width: 100px;
20             height:100px;
21             border:10px solid #aeeeff;
22             margin: 10px;
23             padding: 10px;
24         }
25     </style>
26 </head>
27 <body>
28 
29     <div class="model-w3c">
30         padding
31         <div>
32             w3c鏍囧噯
33         </div>
34     </div>
35     <div class="model-ie">
36         ie鏍囧噯
37     </div>
38 </body>
39 </html>

杩愯鏁堟灉濡傚浘锛?/span>

鎶€鏈垎浜浘鐗? src=鎶€鏈垎浜浘鐗? id=鎶€鏈垎浜浘鐗? src=

 


over!!

 

 

 

 


 

以上是关于鐩掑瓙妯″瀷 box-sizing 鐢ㄦ硶的主要内容,如果未能解决你的问题,请参考以下文章

鐩掑瓙閲屾湁3涓孩鐞冿紝3涓摑鑹茬悆锛?涓粍鐞冿紝鐜板垬鏌辫浠庣洅瀛愰噷鎷垮嚭8涓悆锛岄棶鏈夊灏戠

MongDB 鐢ㄦ硶

QMessageBox 涓昏鐢ㄦ硶

axios鎷︽埅鍣ㄧ殑鐢ㄦ硶

vi | vim 鐢ㄦ硶

IO鐢ㄦ硶鍑犱緥