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

最新推荐文章于 2023-07-21 16:19:37 发布

jasmine_qiqi

最新推荐文章于 2023-07-21 16:19:37 发布

阅读量218

点赞数

分类专栏： CSS 文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123955002

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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>

jasmine_qiqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
5、盒子模型（标准和IE）

1、盒子模型盒子模型类型box-sizing属性标准盒子模型content-boxIE盒子模型border-box––标准盒子模型实际宽高width+padding+borderIE盒子模型width网页布局：一个一个盒子的布局写好后，拼接好一起，就组合成了一个网页2、源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-
复制链接

扫一扫