html 盒子模型基础(单位,边框,内边距,外边距)(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010853130/article/details/54906221

1.单位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.box1{
				
				/*
				 *
				 * 长度单位
				 * 
				 * 	px(像素)
				 * 		- 我们的屏幕实际上是由一个一个的小点点构成的,一个小点点就是一个像素
				 * 		- 不同的显示器中单个像素的大小是不同的,越清晰的显示器单位像素就越小
				 * 		- 像素是开发中用的最多的单位
				 * 
				 *  %(百分比)
				 * 		- 也可以将长度设置一个百分数,此时元素的长度将会根据父元素的对应属性去计算
				 * 		- 使用百分比的值,元素会自动根据父元素的属性去计算长度,
				 * 			当父元素的值发生变化时,子元素会随之等比例变化
				 * 			在一些自适应的页面中,会大量的使用百分比的值
				 * 
				 * 
				 * 颜色单位
				 * 		- 在CSS可以直接使用颜色的单词来为元素设置颜色
				 * 		- 但是仅仅使用颜色的单词来表示颜色,使用起来不太方便
				 * 
				 * 		- 也可以使用RGB值来设置颜色
				 * 			- 所谓的RGB就是光的三元色Red Green Blue
				 * 			- 通过这三种颜色的不同的浓度可以组合出任意的颜色
				 * 			- 语法:
				 * 				rgb(红色的浓度,绿色的浓度,蓝色的浓度);
				 * 				- 浓度可以指定一个0-255之间的值,
				 * 					0 表示没有  255表示最大
				 * 				- 浓度也可以接收一个百分比0% - 100%
				 * 					- 最终百分比也会转换为0-255
				 * 						0%  0
				 * 						100% 255	
				 * 
				 * 		- 十六进制的RGB值
				 * 			- 可以使用三组两位的十六进制的数字来表示RGB值
				 * 			- 语法:#红色绿色蓝色
				 * 			- 十六进制
				 * 			0 1 2 3 4 5 6 7 8 9 a b c d e f
				 * 			00 ~ ff
				 * 			00 表示 没有
				 * 			ff 表示 最大
				 * 
				 * 
				 * 	- 如果十六进制的RGB值,两位两位是重复的
				 * 		像 #aabbcc #112233
				 * 		可以进行简写
				 * 			#aabbcc --- > #abc
				 * 			#112233 --- > #123
				 * 	
				 */
				
				width: 200px;
				height: 200px;
				/*background-color: rgb(9,126,84);*/
				/*background-color: rgb(100%,0%,0%);*/
				/*background-color: #ff0000;*/
				/*background-color: #FFFAE8;*/
				/*background-color: #abc ;*/
				background-color: #bfa;
				
			}
			
			/*.box2{
				width: 50%;
				height: 50%;
				background-color: yellow;
			}*/
			
		</style>
	</head>
	<body>
		
		<div class="box1">
			
			<div class="box2"></div>
			
		</div>
		
	</body>
</html>

2.盒子模型基本概述:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.box1{
				/*
				 	width和height是用来设置盒子内容区的大小
				 	
				 	整个盒子的可见框的大小由内容区 内边距 和 边框共同决定
				 * */
				width: 200px;
				height: 200px;
				background-color: #bfa;
				
				/*
				 
				 * 设置盒子的边框
				 * 	- 要设置盒子的边框,至少要设置三个样式
				 * 		border-width
				 * 			- 边框的宽度
				 *		border-color
				 * 			- 边框的颜色
				 * 		border-style
				 * 			- 边框的样式 
				 * */
				
				/*
				 * 设置边框的宽度
				 * 		- 通过border-width可以同时指定四个边框的宽度
				 * 			也可以分别指定
				 * 
				 */
				/*border-width: 10px;*/
				/*
				 	如果同时指定四个值,则会分别设置 上 右 下 左 四个边框的宽度
				 * */
				/*border-width: 10px 20px 30px 40px;*/
				
				/*
				 	如果指定三个值,则顺序是 上 左右 下
				 * */
				/*border-width: 10px 20px 30px;*/
				
				/*
				 	如果指定两个值 上下 左右
				 * */
				/*border-width: 10px 20px;*/
				
				/*
				 	如果只指定一个值,则四个方向都是该值
				 * */
				border-width: 10px;
				
				
				
				/*设置边框的颜色*/
				border-color: red;
				
				/*border-color: red orange yellow blue;  */
				/*border-color: red orange yellow ;  */
				
				
				/*
				 * 设置边框的样式
				 
				 * - border-style可以用来设置边框的样式
				 * 		- 可选值
				 * 			solid 实线边框
				 * 			dotted 点状虚线边框
				 * 			dashed 虚线边框
				 * 			double 双线边框
				 * 			
				 * 			
				 * */
				border-style: double;
				
				/*border-style: solid dotted dashed double;*/
				
			}
			
			
		</style>
		
	</head>
	<body>
		
		<div class="box1"></div>
		
	</body>
</html>

效果:

3.边框:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				/*设置边框*/
				/*
				 	除了border-width
				 	在CSS中还为我们提供了border-xxx-width四个属性
				 	分别设置四个边的宽度
				 	此处:xxx可能是 top right bottom left
				 */
				/*border-width: 10px;*/
				/*border-top-width: 100px;
				border-left-width: 50px;*/
				
				
				/*border-color: orange;*/
				/*border-top-color: red;
				border-bottom-color: bisque ;*/
				
				/*border-style: solid;*/
				/*border-bottom-style:double ;*/
				
				
				/*
				 	在CSS还为我们提供了一个border的样式
				 		这个样式是边框的简写样式,通过它可以同时设置四个边的宽度 颜色和样式
				 		使用border设置样式对于属性的顺序没有要求
				 		但是注意,一旦使用border来设置边框,就是同时指定四个边框
				 * */
				/*border: orange solid 10px  ;*/
				
				/*
				 
				 * 除了border,还有四个样式
				 * 		border-top
				 * 		border-left
				 * 		border-right
				 * 		border-bottom
				 * 		- 这四个的用法和border一样,只不过他们是单独设置某一个边的
				 * 
				 * 
				 * */
				
				/*border-top: 10px solid orange ;
				border-left: 10px solid orange ;
				border-bottom: 10px solid orange ;*/
				
				border: 10px solid orange;
				
				
			}
			
			
		</style>
	</head>
	<body>
		
		<div class="box1"></div>
		
	</body>
</html>

效果:

4.内边距:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px blue solid;
				/*
				 * 默认情况下整个盒子的可见框的大小,由内容区 边框 和 内边距共同决定
				 * 
				 	内边距(padding)
				 		- 内容区和边框之间的距离称为内边距
				 		- 一个盒子中有四个方向的内边距,分别使用:
				 			padding-top
				 			padding-right
				 			padding-bottom
				 			padding-left
				 			四个样式来设置		
				 			
				 	内边距也会影响到盒子的可见框的大小,所以如果设置完内边距
				 		还希望盒子大小不变的话,则需要将增加的内边距从内容区中减去	
				 		
				 	背景会自动延伸到内边距上		
				 * */
				
				/*上内边距*/
				/*padding-top: 100px;*/
				
				/*右内边距*/
				/*padding-right: 100px ;
				padding-bottom:100px ;
				padding-left: 100px;*/
				
				/*
				 	通过padding,可以同时设置四个方向的内边距
				 		规则和border-width一样
				 * */
				/*padding: 10px;*/
				
				/*padding: 10px 20px;*/
				
				/*padding: 10px 20px 30px;*/
				
				padding: 10px 20px 30px 40px;
			}
			
			.box2{
				/*
				 * box2是box1的子元素
				 * 	子元素都是在父元素的内容区存在的
				 * 
				 * box2和box1的内容区一样大
				 */
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box1">
			
			<div class="box2"></div>
			
		</div>
	</body>
</html>


效果:


5.外边距:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px solid red;
				
				/*
				 	外边距(margin)
				 		- 外边距表示当前盒子与其他盒子之间距离,
				 			外边距不会影响盒子可见框的大小,但是会影响盒子的位置
				 		- 一共有四个方向的外边距
				 			margin-top
				 			margin-left
				 			margin-right
				 			margin-bottom	
				 			
				 			
				 	由于元素在页面中默认是靠左靠上显示的,
				 		所以默认情况下,我们修改左外边距和上外边距时,会影响当前元素的位置
				 		而修改右和下外边距时会影响其他元素的位置		
				 	
				 * */
				
				/*设置上外边距*/
				/*margin-top: 100px;*/
				/*设置左外边距*/
				/*margin-left: 100px;*/
				
				/*设置一个下外边距*/
				/*margin-bottom: 100px;*/
				
				/*
				 
				 * 	可以通过margin来同时指定四个方向的外边距
				 * 		规则和padding一样的
				 * */
				/*margin: 100px;*/
				/*margin: 100px 200px 300px 400px;*/
				
				/*
				 	外边距可以设置为一个负值,如果margin值为负数时,元素会向相反的方向移动
				 * */
				/*margin-top: -100px;*/
				
				
				/*
				 	margin还可以设置为auto
				 		- 当将左右外边距同时设置为auto时,浏览器会将元素的左右外边距设置为相等的值
				 			此时当前元素将会在它的父元素中水平居中,所以我们常常将水平外边距设置为auto来设置水平居中
				 * 
				 * */
				/*margin-right: auto;
				margin-left: auto;*/
				
				/*使元素在父元素中水平居中*/
				margin: 0 auto;
				
			}
			
			.box2{
				width: 500px;
				height: 100px;
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		
		<div class="box1"></div>
		
		<div class="box2"></div>
		
	</body>
</html>

效果:



 

展开阅读全文

没有更多推荐了,返回首页