CSS的盒子模型

充满鲜花的世界到底在哪里

于 2021-04-12 09:50:04 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/New_new_zero/article/details/115612855

CSS 专栏收录该内容

7 篇文章

订阅专栏

博客围绕CSS盒子模型展开，虽未给出具体内容，但可知其聚焦于前端开发中CSS的这一重要概念，盒子模型在网页布局等方面有重要作用，是前端开发者需掌握的关键知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
 <head>
    <meta charset="UTF-8">
  <title>CSS的盒子模型</title>
  <style type="text/css">
	/*
		border: 2px solid blue;
		solid 实线，dashed 虚线
		border：统一设置
		边框上侧 border-top
		边框下侧 border-bottom
		边框左侧 border-left
		边框右侧 border-right
	*/
  	div {
		width:200px;
		height:100px;
		/*border 边框, 2px: 线宽,solid: 实线, 线颜色*/
		border:2px solid blue;
	}
	#divB {
		/*border-right 边框右侧 dashed 虚线*/
		border-right:2px dashed yellow;
		/*padding 内边距 距某边距离*/
		padding-top:20px;
		/*外边距*/
		margin:20px; /*同一设置 padding margin 都可以*/
	}

  </style>
	
 </head>
 <body>
 	<div>AAAAAAAA</div>
 	<div id="divB">BBBBBBBB</div>
 	<div>CCCCCCCC</div>

 </body>
</html>