HTML基础笔记之CSS盒子模型1（布局）

最新推荐文章于 2024-06-16 15:46:21 发布

bruce_suxin

最新推荐文章于 2024-06-16 15:46:21 发布

阅读量624

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： UI界面设计 HTML HTML5 HTML常用标签前端设计

本文链接：https://blog.csdn.net/bruce_suxin/article/details/52937496

版权

HTML+CSS+JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<span style="font-size:14px;font-weight: normal;">
</span>

<span style="font-size:14px;font-weight: normal;">   <head>
      <title>HTML示例</title>
      <style type="text/css">
         div{
		     width:200px;
			 height:100px;
			 border:2px solid blue;/*t统一设置*/
			}
		 
	  #div2{
		     
		      border-right:2px dashed red;
		   }
		 
		 
	  
	  
	  </style>
   </head>
    <body>
      CSS的盒子模型，目前以div+CSS来布局。<br/><br/>
      （1）边框<br/><br/>
	        border:统一设置<br />
            上border-top   <br/>
		    下border-bottom<br/>
		    下border-left  <br/>
		    下border-right <br/><br/>
	  （2）内边距<br/><br/>
            距离上下左右四条边的距离叫内边距<br/> 
	      
	  （3）

	   <pre>
	   
	   
	   
	   
	   
	   </pre>
       <div id="div1">AAAAAAAAAAAAAA</div>
	   <div id="div2">BBBBBBBBBBBBBB</div>
	   <div id="div3">CCCCCCCCCCCCCC</div>
   </body>
</html></span>
</span></span>

内边距

<span style="font-size:14px;"><!DOCTYPE html>
 <html>
   <head>
      <title>HTML示例</title>
      <style type="text/css">
	       div{
		     width:200px;
			 height:100px;
			 border:2px solid blue;/*t统一设置*/
			}


             #div2{
			     padding:50px;
			  }
			  #div23{
			  
			     padding-left:100px;
			  }

	  
	  </style>
   </head>
    <body>
       内边距<br/><br/>
	      padding：20px;<br/>
		  使用padding统一设置<br/>
		  上下左右<br/>
		  padding-top....<br/><br/>

     



      <div id="div1">AAAAAAAAAAAAAA</div>
	   <div id="div2">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
	   <div id="div3">CCCCCCCCCCCCCC</div>

   </body>
</html>
</span>

外边距

<span style="font-size:14px;"><!DOCTYPE html>
 <html>
   <head>
      <title>HTML示例</title>
      <style type="text/css">
	    
		    div{
			   border:2px solid blue;
 
			 }

          #div32{
		     
		     margin:20px;
		  
		  }

		  #div33{
		  
		    margin-left:30px;
		  }
 
           
	  
	  </style>
   </head>
    <body>
        外边距：<br/><br/>
        margin<br/>
	    统一设置和分别设置<br/>
		上下左右<br/> 
		margin-top...<br/>
		 也可已使用margin统一设置<br/>
		 也可以分别设置<br/>
		 上下左右四个外边距<br/>
		
		<br/><br/><br/>
          

		
      <div id="div31">AAAAAAAAAAAAAA</div>
	   <div id="div32">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
	   <div id="div33">CCCCCCCCCCCCCC</div>

   </body>
</html></span>

bruce_suxin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础笔记之CSS盒子模型1（布局）

盒子模型 HTML示例 div{ width:200px; height:100px; border:2px solid blue;/*t统一设置*/ } #div2{ border-right:2px dashed red; }
复制链接

扫一扫