深层次了解CSS中的盒子实体模型

2021-03-18 09:36 jianzhan

许多人对盒子实体模型搞晕头了,下面根据1个简易的编码来剖析盒子实体模型的构造!

以便便捷便捷收看!在第1个div中画了1个报表,并将其规格设定成与div內容尺寸1样!且设定body的margin和padding的特性都为0px;

本事例选用行内CSS款式!

编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  5. <title>盒子实体模型</title>  
  6. </head>  
  7.     
  8. <body style="margin:0px; padding:0px;">  
  9. <div style="width:900px; height::auto">  
  10.   <div style="width:900px; height:100px; color:#FFF; padding:25px; margin:25px;border: 50px solid #0CF; ">  
  11.     <table width="900px" height="100px" border="1" cellspacing="0" cellpadding="0" bordercolor="#FF0000">  
  12.       <tr >  
  13.         <td style="text-align:center; font-size:36px;">Javalittleman</td>  
  14.       </tr>  
  15.     </table>  
  16.   </div>  
  17.   <div style="width:30%; height:120px; float:left; border-color:#039;"></div>  
  18.   <div style="width:70%; height:120px;float:left; "></div>  
  19.   <div style="width:900px; height:120px;float:left; "></div>  
  20. </div>  
  21. </body>  
  22. </html>    

把标尺开启!

大伙儿发现了甚么沒有?

剖析以下:

显示信息实际效果:

其它设定的table是固定不动不会改变的,也便是说內容尺寸都不容易更改的,更改的只是部位!

border:是边框,向外扩大,并能够为其加上色调特性

margin:是向外扩大,沒有色调特性,因此大家看到扩大后的色调是外界的色调,在本事例中是无色的!

padding:是向内填充的,沒有色调特性,显示信息的色调是內部內容设定的色调!

以上这篇深层次了解CSS中的盒子实体模型便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。