HMTL开发系列（7）之 CSS三大模块之盒子模型

最新推荐文章于 2024-08-06 14:46:11 发布

启之灵

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量314

点赞数

分类专栏： Html 5

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82532654

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

在页面布局的时候会经常使用到的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{
				border: 0;
			}
			div.dddd{
				width: 200px;
				height: 200px;
				border-width: 2px;
				border-color: red;
				/*border-style: dashed;虚线*/
				border-style: solid;/*实线*/
				border-radius: 20px;/*圆角*/
			}
			
			#input01{
				/*border-width: 2px;
				border-color: red;
				border-style: solid;*/
				border: 1px solid orange;
			}
			
			#input02{
				border-top: 1px solid red;

			}
			table{
				width: 400px;
				height: 200px;
				border: 1px solid red;
				border-collapse: collapse;/*合并相邻边框;*/
				
			}
			td{
				border: 1px solid red;
			}
			
			#div100{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				padding:20px;
			}
			
			#div1001{
				width: 300px;
				height: 300px;
				text-align: center;	/*文字水平居中*/
				line-height: 300px;	/*将行高设置为高度的话,文字就垂直居中了*/
				margin: 0px auto;	/*盒子水平居中*/
				border: 1px solid green;

			}
			
		</style>
		
		
	</head>
	<body>
		<div class="dddd">我是一个盒子</div>
		<hr />
		用户名：<input type="text" id="input01" />
		密码：<input type="text" id="input02" />
		<hr />
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
				
		</table>
		
		<hr />
		
		<div id="div100">我是div</div>
		
		<hr />
		<div id="div1001">
			我是id为1001的div
		</div>
	</body>
</html>

盒嵌套的时候，内边距合并问题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.div1{
				width: 200px;
				height:200px;
				background-color: red;
				overflow: hidden;
			}
			
			
			.div2{
				width: 100px;
				height:100px;
				background-color: green;
				/*这里给div2一个margin,但是top作用 会连div1一起margin=30下来，但是我们只要div2
				 * 解决方案1:给div1一个margin=1px；
				 * 解决方案2：给div1一个padding=1px；
				 * 解决方案3：给div1一个overflow: hidden;
				 */
				margin: 30px;
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="div1">
			<div class="div2">				
			</div>
		</div>
	</body>
</html>

ps：padding，border都会是盒子变大的；

当盒子没有指定宽度高度或者继承父类的宽度和高度时，padding是不会影响盒子的大小的；

但是在css3中出现了box-sizing: border-box; 这个属性设置以后padding、border就不会撑大box的宽高了；

盒子模块练习：

CTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div01{
				width: 300px;
				height: 400px;
				border: 1px solid #ccc;
				margin: 300px;
				border-top: 5px solid orange;

			}
			#div01 h3{
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				border-bottom: 1px solid #ccc;
				padding-left: 30px;
				font-weight: normal;
				
			}			
			#div01 img{
				width: 250px;
				height: 150px;
				margin: 25px;
			}
			#div01 ul li{
				list-style: none;
				/*background: #fff url() 0 0 no-repeat;*/
				background-image: url(img/fangkuai.jpg);
				background-size:5px 5px ;
				background-position:25px center ;
				background-repeat:no-repeat ;
				text-align: center;
			}
			#div01 ul li a{
				font-size: 16px;
				color: #888;
				text-decoration: none;
			}
			#div01 ul li a:hover{
				text-decoration: underline;
				color: orange;
			}
		
		</style>
	</head>
	<body>
		<div id="div01">
			<h3>搜索趣图</h3>
			<img src="img/dongman.gif" alt="这是动漫效果gif" />
			<ul>
				<li><a href="#">搜索趣图，让生活更美好</a></li>
				<li><a href="#">搜索趣图，让生活更美好</a></li>
				<li><a href="#">搜索趣图，让生活更美好</a></li>
			</ul>
		</div>

	</body>
</html>

在css3中的盒子阴影：

/*box-shadow: 水平距离垂直距离模糊阴影尺寸阴影颜色内外阴影; 前连个是必须要写的，其余可以省略*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1{
				font-size: 100px;
				/*text-shadow: 水平距离  垂直距离  模糊  阴影颜色;*/
				text-shadow: 5px 5px 2px #ccc;
			}
			div{
				width: 200px;
				height:200px;
				border: 10px solid #000;
				
				/*box-shadow: 水平距离  垂直距离  模糊  阴影尺寸  阴影颜色  内外阴影;  前连个是必须要写的，其余可以省略*/
				box-shadow: 5px 10px 2px 10px #CCCCCC inset;
				
			}
		</style>
	</head>
	<body>
		<h1>文字阴影效果</h1>
		
		<div>盒子阴影效果</div>
	</body>
</html>