CSS之布局（盒模型）

最新推荐文章于 2024-04-16 19:33:08 发布

不动声色的小蜗牛

最新推荐文章于 2024-04-16 19:33:08 发布

阅读量162

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107356474

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

盒模型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style>
			.box1{
				/*	
					内容区(content),元素中的所有的子元素和文本内容都在内容区中排列
						内容区的大小由width和height两个属性来设置
				*/
				width: 200px;
				height: 200px;
				background-color: #bfa;
				
				/*
					边框(border),边框属于盒子边缘
						边框的大小会影响到整个盒子的大小
					要设置边框,需要至少设置三个样式:
						边框的宽度(border-width);
						边框的颜色(border-color);
						边框的样式(border-style).;
				*/
				border-width: 10px;
				border-color: red;
				border-style: solid;
				
			}
			
		</style>
		
		
	</head>
	<body>
		<!--
			盒模型、框模型（box model）
				-css将页面中的所有元素都设置为了一个矩形的盒子
				-将元素设置为矩形的盒子后，对网页的布局就是摆放盒子
				-没一个盒子都由以下几个部分组成：
					内容区（content）
					内边距（padding）
					边框（border）
					外边距（margin）
		-->
		<div class="box1"></div>
		
		
	</body>
</html>