盒子模型_盒子模型csdn-CSDN博客

本文链接：https://blog.csdn.net/boxyuan/article/details/76207974

盒子模型：

概念：在写一个html页面的时候，其实就相当于在这个页面中叠盒子。

思想：万物皆盒子

具体内容：

盒子的挡板：border

盒子的泡沫：padding

盒子里的物品：content

盒子与盒子之间的距离：margin

boder:盒子的挡板

div{
				width: 200px;
				height: 200px;
				background-color: plum;
				/*边框颜色，边框宽度，边框样式*/
				border-color: paleturquoise;
				border-width: 5px;
				border-style: solid;
			}

边框的连写方法：

border:border-width border-style border-color

border-left:13px solid peachpuff;/*连写形式*/

取值：

solid实线

dashed虚线

dotted点线

div{
				width: 200px;
				height: 200px;
				background-color: plum;
				/*边框颜色，边框宽度，边框样式*/
				border-width: 10px;
				border-style: solid;
				border-top-color: papayawhip;
				border-right-color:palegreen;
				border-left:13px solid peachpuff;/*连写形式*/
				border-bottom-color: mediumpurple;
			}

border-collapse: collapse;去掉单元格之间的间隙

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: plum;
				/*边框颜色，边框宽度，边框样式*/
				border-width: 10px;
				border-style: solid;
				border-top-color: papayawhip;
				border-right-color:palegreen;
				border-left:13px solid peachpuff;/*连写形式*/
				border-bottom-color: mediumpurple;
			}
			table
			{
				border: 4px solid paleturquoise;
				border-collapse: collapse;
				text-align: center;
			}
			th,td{
				border: 4px solid paleturquoise;
				
			}
		</style>
	</head>
	<body>
		<div>
		</div>
		<table border=1 cellpadding="0" height="300px" width="700px">
			<caption><h3>这是一条标题</h3></caption>
			<thead>
				<tr>
					<th>编号</th>
					<th>性别</th>
					<th>姓名</th>
					<th>成绩4</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>男</td>
					<td>job</td>
					<td>99</td>
				</tr>
				<tr>
					<td>1</td>
					<td>男</td>
					<td>job</td>
					<td>99</td>
				</tr>
				<tr>
					<td>1</td>
					<td>男</td>
					<td>job</td>
					<td>99</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>
						总成绩
					</td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

盒子的填充：

padding（内边距）：

作用：设置盒子的内容与边框之间的距离

padding：40px 给上下左右所有的内边距都设置了40px的距离

padding:40px 80px 上下40px，左右80px

padding:40px 60px 80px 上40px 左右60px 下80px

padding:40px 60px 80px 100px 上右下左

padding-top:

padding-right:

padding-bottom:

padding-left:

注意：padding会改变盒子大小

计算盒子大小公式：

案列：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*第一种*/
			
			.big {
				width: 200px;
				height: 150px;
				background-color: burlywood;
				/*border: 10px solid red;*/
				padding: 75px 100px;
			}
			/*第二种*/
			
			.big {
				width: 300px;
				height: 225px;
				background-color: burlywood;
				/*border: 10px solid red;*/
				padding: 75px 0px 0px 100px;
			}
			
			.small {
				width: 200px;
				height: 150px;
				background-color: green;
			}
		</style>
	</head>

	<body>
		<div class="big">
			<div class="small">

			</div>
		</div>

	</body>

</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>itcast7</title>
		<style>
			div{
			border-top:4px solid royalblue;
			border-bottom: 1px solid #101010;	
			height: 41px;
			text-align: center;
			}
			a{
				color: #C71585;
				font-size: 12px;
				text-decoration: none;
				font-family: "微软雅黑";
				display: inline-block;
				background-color:orange;
				height: 41px;
				line-height: 41px;
				padding: 0px 12px;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">设为首页</a>
			<a href="#">手机新浪网</a>
			<a href="#">移动客户端</a>
		</div>
	</body>
</html>

特殊情况下padding不会改变盒子的大小：

当一个大盒子宝盒一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽度继承大盒子的话，那么设置小盒子的padding-left不会改变盒子大小

margin:盒子与盒子之间的距离

margin:10px，给上右下左所有的外边距都设置了10像素的距离

margin10px 20px 上下20，左右20

margin:10px 20px 40px 上10 左右20 下40

margin:10px 20px 40px 80px 上右下左

例如：

body标签默认带有margin:8px的属性

p标签默认带有margin:font-size 0

h标签也默认带有margin-top和margin-bottom

清除的方法：

margin:0;

padding:

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
		<style>
			/*div
			{
				width: 200px;
				height: 200px;
				display: inline-block;
			}
			.one
			{
				background-color: crimson;
				margin: 10px;
			}
			.two
			{
				background-color: #00BFFF;
			}*/
			*{
				margin: 0;
				padding: 0;
			}
			h3
			{
				border-top: 2px solid orange;
				display: inline-block;
				padding:0 10px;
				line-height: 40px;
			}
			ul
			{
				width: 360px;
				font-size: 14px;
				border: 1px solid orchid;
				 
				
			}
			li
			{
				line-height: 24px;
				background: url(bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.svg) no-repeat left;
				padding-left: 10px;
				 
			}
		
		</style>
	</head>
	<body>
		<h3>新闻</h3>
		<ul >
			<li>这是一条信息</li>
			<li>这是一条信息</li>
			<li>这是一条信息</li>
			<li>这是一条信息</li>
			<li>这是一条信息</li>
		</ul>
	</body>
</html>