5、盒子模型（标准和IE）-CFANZ编程社区

5、盒子模型（标准和IE）

1、盒子模型

盒子模型类型	`box-sizing`属性
标准盒子模型	`content-box`
IE盒子模型	`border-box`
–	–
标准盒子模型实际宽高	width+padding+border
IE盒子模型	width

网页布局：一个一个盒子的布局写好后，拼接好一起，就组合成了一个网页

2、源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>盒子模型</title>
	<style>
		/* 5、元素边距样式初始化 */
		* {
			margin: 0px;
			padding: 0px;
		}

		.box {
			width: 100px;
			height: 100px;
			/* 1、边距border */
			/* border属性:border-width,border-style,border-color */
			border: 1px solid black;
			/* 2、margin外边距 */
			/* margin四个值：上右下左，两个值：上下左右 */
			margin: 100px 50px 100px 50px;
			margin: 100px 50px;
			/* 3、padding内边距，跟margin设置一样 */
			padding: 100px 50px 100px 50px;
			padding: 100px 50px;
			/* 4、box-sizing设置盒子显示形式 */
			/* 默认情况是content-box,元素实际宽高为：(width+padding+border) */
			/* 另一个border-box，元素实际宽高为：width */
			box-sizing: content-box;
			/* 6、容器垂直居中 */
			padding: 100px;
			margin: 0px auto;
		}

		.box ul li {
			list-style: none;
		}
	</style>
</head>

<body>
	<div class="box">
		<h3>列表</h3>
		<ul>
			<li>用户名</li>
			<li>密码</li>
			<li>状态</li>
		</ul>
	</div>
</body>

</html>

0 条评论