CSS重要属性总结

最新推荐文章于 2023-09-10 00:16:58 发布
原创最新推荐文章于 2023-09-10 00:16:58 发布 · 1.1k 阅读
1 ·
CC 4.0 BY-SA版权
CSS 专栏收录该内容
7 篇文章
订阅专栏
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<!--
		
		
		<style type="text/css">
			body{
				border:5px red solid;
			}
			div{
			
				/*书写方式*/
				/*方式一：
					border-width:5px;
					border-color:red;
					border-style:solid;
				*/
				/*方式二：
					border:red 5px solid;
				*/
				height:33;
				width:33;
				border-left-width:5px;
				border-left-style:double;
				border-left-color:red;
				
				border-top:blue 4px dotted;
				border-right:orange 8px dashed;
				border-bottom:green 10px outset;
				
				/*
				内边距:
				一个参数：上 右 下 左距离一致
				二个参数：参数1：代表上下 参数2：代表左右
				三个参数：参数1：代表上   参数2：代表左右
				四个参数：参数1：代表上   参数2：代表右	参数3：代表下	参数4：代表左
				顺序：上 右 下 左
				*/
				padding:10px 30px 50px 100px;
				
				/*
				外边距(不足者以左 上 右为优先)
				一个参数：上 右 下 左距离一致
				二个参数：参数1：代表上下 参数2：代表左右
				三个参数：参数1：代表上   参数2：代表左右
				四个参数：参数1：代表上   参数2：代表右	参数3：代表下	参数4：
				*/
				margin:10px 30px 50px 100px;
			}
			
		</style>
		-->
		<!--
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:1px red solid;
			}
			#haha{
				background-color:red;
				/*float:right;*/
				float:right;
			}
			#heihei{
				background-color:yellow;
				/*float:right;*/
				clear:right;  /*将haha造成的影响干掉*/
				float:right;
			}
			#xixi{
				background-color:green;
				/*clear:right;*/
			}
		</style>
		-->
		<style type="text/css">
			body{
				border:1px red solid;
			}
			
			div{
				width:200px;
				height:100px;
				border:1px red solid;
			}
			#haha{
				background-color:red;
				position:relative;
				z-index:10;
			}
			#heihei{
				background-color:yellow;
				/*
					position:标签的定位
						值：
							absolute	绝对定位
								标签原有的位置释放，下面的标签上移
								偏移时参照的对象为父对象（父标签）
							relative	相对定位
								标签原有的位置不释放
								偏移时参照的对象为对象的原有位置
					偏移属性：
						top
						left
						right
						bottom
					层：
					z-index:
						值大者，上层显示
						值小者，下层显示
						
						使用时的前提：必须要设置一个属性position
				*/
				/*
				position:absolute;
				偏移时，以页面做定点为基准
				*/
				position:absolute;/*偏移时，以自己原位置的左顶点为基准*/
				top:30px;
				left:40px;
				z-index:5;
				
			}
			#xixi{
				background-color:green;
				position:absolute
				z-index:1;
			}
		</style>
	</head>
	
	<body>
	<!--
		盒子模型的四条边：
		
		border显示必须包含：尺寸、颜色、样式，才能显示出来
		border:
		border-width:
		border-color:
		border-style:
		
		border-top
		border-top-width:
		border-top-color:
		border-top-style:
		
		border-bottom
		border-bottom-width:
		border-bottom-color:
		border-bottom-style:
		
		border-left
		border-left-width:
		border-left-color:
		border-left-style:
		
		border-right
		border-right-width:
		border-right-color:
		border-right-style:
		
		文字到边框的距离：内边距 padding
		padding
		padding-left
		padding-right
		padding-top
		padding-bottom
		边框到外边框的距离：外边距 margin
		margin
		margin-left
		margin-right
		margin-top
		margin-bottom
		
	
	-->
	<div id="haha">
		哈哈哈哈哈
	</div>
	<div id="heihei">
		嘿 嘿 嘿 嘿
	</div>
	<div id="xixi">
		嘻嘻嘻嘻嘻嘻
	</div>
	
	</body>
</html>