div+css盒子模型

最新推荐文章于 2024-08-25 14:00:04 发布

summitjava

最新推荐文章于 2024-08-25 14:00:04 发布

阅读量542

点赞数

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/summitjava/article/details/82782933

版权

html学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

边框
      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>