盒子模型

最新推荐文章于 2024-07-27 09:56:28 发布

czw10000

最新推荐文章于 2024-07-27 09:56:28 发布

阅读量121

点赞数 1

分类专栏： javaEE HTML 文章标签： java

本文链接：https://blog.csdn.net/weixin_48722971/article/details/111704023

版权

javaEE 同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

HTML

21 篇文章 0 订阅

订阅专栏

盒子模型

padding：内容到边框的距离叫做为内边距，内边距属性按照上右下左顺序进行设置，也可以分开设置

改变内边距的宽度会影响元素的大小

如果我们采用的内容盒子模型，content-box,那么设置内边距后元素的自身的宽高也会发生改变。

但是如果我们设置盒子模型为边框盒子，border-box，那么设置内边距后自身的宽高不会发生改变，但是内容的宽高会发生改变。

margin：元素边框与元素边框之间的间距就是外边距，设置的顺序也是上右下左，如果我们设置margin的值为：0 auto就代表距离上方为0像素远，距离左右两边为水平居中

如果相邻元素对同一方向设置外边距，则浏览器去大值。

盒子模型的构成;(边框盒子border-box)

元素的宽度：左边边框+左边内边距 +内容宽度+右内边距+右边边框---->width = padding+border+content
元素的高度：上边边框+上边内边距+内容的高度+下边内边距+下边边框 height = padding+border+content
元素空间的宽度：左边的外边距+元素的宽度+右边的外边距
元素空间的高度：上边的外边距+元素的高度+下边的外边距

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
	 *{
		box-sizing: border-box;
	 } 
	div{
		height:300px;
		width: 500px;
		border: 1px solid red;
	}
	.box1{
	   padding-top:20px;
	   margin-bottom: 30px;
	}
	.box2{
		margin-bottom: 50px;
	}
	.box3{
		margin-top: 20px;
	}
	.box4 {
		height:100px;
		width: 200px;
		/* border: 2px solid green;
		padding: 30px; */
	}	
}

</style>

</head>
<body>
	<div class = "box1">
		JFinal将一直坚持以下设计目标：开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。
		在坚持以上设计目标的同时，基于微内核+全方位扩展型架构，打造功能极度全面WEB+ORM开发框架。
		彻底解放开发者的生产力，彻底改善开发者的开发体验，让软件开发成为一件轻松愉快的事情。
	</div>
	<hr>
	<div class = "box2">
		JFinal将一直坚持以下设计目标：开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。
		在坚持以上设计目标的同时，基于微内核+全方位扩展型架构，打造功能极度全面WEB+ORM开发框架。
		彻底解放开发者的生产力，彻底改善开发者的开发体验，让软件开发成为一件轻松愉快的事情。
	</div>
	<div class = "box3">
		JFinal将一直坚持以下设计目标：开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。
		在坚持以上设计目标的同时，基于微内核+全方位扩展型架构，打造功能极度全面WEB+ORM开发框架。
		彻底解放开发者的生产力，彻底改善开发者的开发体验，让软件开发成为一件轻松愉快的事情。
		<div class="box4">
			我是一个嵌套的div标签
		</div>
	</div>
	
</body>
</html>

练习：定义两个div，一个宽高为500px,一个宽高为200px，让小的在大的正中央。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    *{
    	box-sizing: border-box;
    }
	.big{
		height: 500px;
		width: 500px;
		background-color: green;
		border: 1px solid black;
		/* padding: 150px; */
		/* margin:100px; */
	}
	.small {
		height: 200px;
		width: 200px;
		background:red;
		margin: 150px;
	}
	
</style>
</head>
<body>
	<div class="big">
		<div class="small"></div>
	</div>
	<form action="#">
		<input type="date" name="date">
		<input type="datetime-local" name="date">
		<input type="submit" value="提交">
	</form>
	
</body>
</html>

czw10000

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

盒子模型padding：内容到边框的距离叫做为内边距，内边距属性按照上右下左顺序进行设置，也可以分开设置改变内边距的宽度会影响元素的大小如果我们采用的内容盒子模型，content-box,那么设置内边距后元素的自身的宽高也会发生改变。但是如果我们设置盒子模型为边框盒子，border-box，那么设置内边距后自身的宽高不会发生改变，但是内容的宽高会发生改变。margin：元素边框与元素边框之间的间距就是外边距，设置的顺序也是上右下左，如果我们设置margin的值为：0 auto就代表距离上方为0像素
复制链接

扫一扫

专栏目录