边框和内边距

最新推荐文章于 2024-04-13 15:16:57 发布

数数huhu

最新推荐文章于 2024-04-13 15:16:57 发布

阅读量212

点赞数

文章标签： CSS 边框内边距外边距前端布局

本文链接：https://blog.csdn.net/qq_51942661/article/details/117636127

版权

此处保存的是我学习前端的笔记和一些日常练习，放在这里方便查看。成长之路难免会有错误，这时候才形象生动的体现那句经典名言：“失败是成功之母！” 哈哈哈哈...... 话不多说。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 使用border-width可以分别指定四个边框的宽度
			  border-width: 上 右 下 左 （依次顺时针顺时针）
			 */
			.box1{
				width: 200px;
				height: 200px;
				background-color: #008000;
				/*border-width: 20px;
				border-color: #FF0000;
				border-style: solid; */
				
				/* 边框的简写样式，可以同时设置四个边框的样式，宽度，颜色
				 而且没有任何的顺序要求*/
				border: 10px blue solid;
				
				/* border-top (right  bottom left)   可以单独设置一个边*/
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
<!-- 
 使用width、height来设置盒子内容的宽和高
 注意：width和height只是设置盒子内容区的大小，而不是整个盒子的大小
 盒子可见框的大小是由：内容区、内边距、边框共同决定的
 
 为元素设置边框（要为元素设置边框必须指定三个样式）
 border-width：边框的宽度
 border-color：边框颜色
 border-style：边框的样式
 
 -->

<html>
	<head>
		<meta charset="utf-8">
		<title>内边距和外边距</title>
		<style type="text/css">
			
			.box{
				width: 200px;
				height: 200px;
				background-color: #008000;
				border: 30px red solid;
				
				/* padding-top (right bottom left) 
					内边距会影响盒子可见框的大小，     */
					
				/* padding-top: 100px;	 */
			}
			/* 创建一个子元素box2沾满box */
			.box2{
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
			/* 	外边距的基本用法和内边距是差不多的。 外边距不会影响到盒子可见框的大小
				如果外边距设置的是负值，元素会反向移动
			 
			 */
			.box3{
				width: 200px;
				height: 200px;
				background-color: darkblue;
				margin-top: 100px;
				margin-left: -50px;/*负值时元素会反方向移动*/
				/* margin还可以设置为auto，一般只设置给水平方向的margin
					如果将left和right同时设置为auto，则两侧外边距的值就相同，就可以使
					元素自动在父元素中居中。所以经常将左右外边距设置为auto使得子元素在父元素
					中水平居中*/
					
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="box">阿斯顿撒防守打法
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>