div+css盒子模型

关注

原创最新推荐文章于 2026-05-06 09:08:49 发布 636 阅读 AI 写同款· GEO 优化 ›

边框
      border:统一设置
      上border-top
       下border-bottom
        左border-left
        右border-right
内边距;
        badding:统一设置
        badding-top
         badding-bottom
          badding-left
          badding-right
外边距
        margin  统一设置
          margin -top
        margin -bottom
          margin -left
          margin -right
div+css盒子模型一
<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:2px solid blue;
			}
			#div12{
				border-right:2px dashed yellow;
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">AAAAAAAAAAAAAAAAAAAAA</div>
		   <div id="div13">AAAAAAAAAAAAAAAAAAAAA</div>
	
	</body>
</html>
div+css盒子模型二
<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:2px solid blue;
			}
			#div12{
				padding:20px;
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">AAAAAAAAAAAAAAAAAAAAA</div>
		   <div id="div13">AAAAAAAAAAAAAAAAAAAAA</div>
	
	</body>
</html>
div+css盒子模型三
<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
	
				border:2px solid blue;
			}
			#div12{
				margin:50px;
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">AAAAAAAAAAAAAAAAAAAAA</div>
		   <div id="div13">AAAAAAAAAAAAAAAAAAAAA</div>
	
	</body>
</html>

收录于