css构造模型

最新推荐文章于 2024-09-06 20:49:44 发布

「已注销」

最新推荐文章于 2024-09-06 20:49:44 发布

阅读量165

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yuanjin1988/article/details/42740211

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造模型</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			div#contion
			{
				background:orange;
				border:1px solid black;
				padding:20px;
			}
			
			.box
			{
				border:1px solid black;
				margin:10px;
				padding:10px;
			}
			p
			{
				color:blue;
			}
			
			
			/*只能改变孩子p的样式，不能改变孙子*/
			/*IE6不支持*/
			#contion > p
			{
				color:red;
			}
			
			.box p
			{
				color:blue;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- css构造模型 -->
		
		<!-- 添加一个div -->
		<!-- id选择器优先级比类选择器优先级高 -->
		<div id = "contion">
			 <p>PHP100.COM中文网</p>
			 <!-- 添加一个子div -->
			 <div class = "box">
				<p>PHP200.COM</p>
			 </div>
			 
			 <div class = "box">
				<p>PHP300.COM</p>
			 </div>
		</div>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>外边距</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			#contion
			{
				width:150px;
				height:150px;
				background:orange;
				border:1px solid black;
				padding:10px;
				/*IE5.5不支持*/
				/*auto 自动扩展*/
				/*
				上下不能实现
				margin-top:auto;
				margin-bottom:0;
				*/
				/*居中*/
				/*
				margin-left:auto;
				margin-right:auto;
				*/
				
				/*简化形式*/
				/*
				margin:0 auto 0 auto ;
				margin:0 auto;
				*/
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 外边距 -->
		<div id = "contion">
			PHP100.COM中文网
		</div>
		
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>内边距</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:0;
				padding:0;
			}
			
			
			#contion
			{
				/*
					比如这个长度是500
					padding:20px;
					现在的长度是500 + 40 = 540
					比如这个高度是20
					padding:20px;
					现在的高度是20 + 40 = 60
					
					长度是auto
					padding:20px;
					长度无增加
					
					长度是100%
					padding:20px;
					长度增加
					
					
					height:100%;  无效
					height:auto;  无效
					
				*/
				width:460px;
				
				background:orange;
				border:1px solid black;
				
				
				padding:20px; 
				
				
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 内边距 -->
		<div id = "contion">
			PHP100.COM中文网
		</div>
		
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>定位</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			*
			{
				margin:0;
				padding:0;
			}
			
			
			#contion
			{
				margin-top:400px;
				margin-left:400px;
				width:300px;
				height:300px;
				background:orange;
				position:relative;
			}
			
			#contion p
			{
				/* position:relative;原来p的位置还被占用 */
				
				/* 绝对定位是以窗口左上角一点为基点*/
				/* 相对定位是以div左上角一点为基准点*/
				position:absolute;
				top:150px;
				left:180px;
				
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 定位 -->
		<div id = "contion">
			<p>PHP100.COM中文网</p>
			PHP200
		</div>
		
	</body>
</html>