盒子模型和内、外边距

最新推荐文章于 2023-03-02 20:29:24 发布

原创最新推荐文章于 2023-03-02 20:29:24 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

HTML 专栏收录该内容

12 篇文章

订阅专栏

一、盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				/* 
				 内容区(content)，元素中的所有的子元素和文本内容都在内容区中排列
				 内容区的大小由width和height两个属性来设置
				 width设置内容区的宽度
				 height设置内容区的高度
				 */
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				
				/* 
				边框(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="box"></div>
	</body>
</html>

二、boder-xxx属性及简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-color: aqua;
				
				/* 
				boder-width不写，也会有默认值，大概是3个像素 
				border-width可以用来指定四个方向的边框的宽度
				值的情况:
				四个值:上 ,右, 下 ,左
				三个值:上 ,左右, 下
				两个值:上下, 左右
				一个值:上下左右
				
				除了border-width还有一组border-xxx-width
				xxx可以是top right bottom left
				用来单独指定某一个边的宽度
				*/
				border-width: 10px;
				
				/* 
				 border-color用来指定边框的颜色，同样可以分别指定四个边的边框
				 规则和border-width一样
				 border-color也可以省略不写，如果省略了则自动使用color的颜色值
				 */
				border-color: orange;
				
				/* 
				 border-style指定边框的样式
				 solid表示实线
				 dotted点状虚线
				 dashed虚线
				 double双线
				 border-style的默认值是none，表示没有边框
				 */
				border-style: solid;
				
				/* 
				 border简写禹性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求，例如：
				 border: 10px blue solid;
				 除了border以外还有四个border-xxx
				 border-top
				 border-right
				 border - bottom
				 border-left
				 */
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

三、内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px orange solid;
				
				/* 
				 内边距（padding）：
				 内容区和边框之间的距离为内边距
				 一共有4个方向的内边距
				 padding-top
				 padding-right
				 padding-bottom
				 padding-left
				 
				 内边距的设置会影响到盒子的大小
				 背景颜色会延伸到内边距上
				 
				 一个盒子的可见框的大小，由内容区、内边距和边框共同决定，
				 所以在计算盒子大小时，需要将这三个区域加到一起计算
				 
				 padding内边距的简写属性，可以同时指定四个方向的内边距
				 规则和border-width一样,例如：
				 padding: 10px 20px 30px 40px
				 */
				
				padding-top: 100px;
				padding-right: 100px;
				padding-bottom: 100px;
				padding-left: 100px;
				
			}
			
			.inner{
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner"></div>
		</div>
	</body>
</html>

四、外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px orange solid;
				
				/* 
				外边距(margin)
				外边距不会影响盒子可见框的大小
				但是外边距会影响盒子的位置
				一共有四个方向的外边距:
				margin-top
				上外边距，设置一个正值，元素会向下移动
				margin-right
				默认情况下设置margin-right不会产生任何效果
				margin-bottom
				下外边距，设置一个正值,其下边的元素会向下移动
				margin-left 
				左外边距，设置一个正值,元素会向右移动
				
				margin也可以设置负值，如果是负值则元素会向相反的方向移动
				元素在页面中是按照自左向右的顺序排列的，
				所以默认情况下如果我们设置的左和上外边距则会移动元素自身
				而设置下和右外边距会移动其他元素
				
				margin的简写属性
				margin可以同时设置四个方向的外边距，用法和padding一样 
				
				margin会影响到盒子实际占用空间
				 */
				margin-top: 100px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>