CSS基础（五）---盒子模型

最新推荐文章于 2022-04-28 15:30:00 发布

BugBear1989

最新推荐文章于 2022-04-28 15:30:00 发布

阅读量374

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/BearStarX/article/details/84553421

版权

本文详细介绍了CSS中的盒子模型，包括元素的宽高定义、内边距padding的属性和简写方式、外边距margin的使用及注意事项，以及边框border、浮动float和清除浮动clear的概念和应用。通过实例解析了如何通过CSS控制元素的布局和间距。

摘要由CSDN通过智能技术生成

一、定义元素的宽和高

定义元素的宽和高需要使用下面属性：

1、width宽度、height高度：固定的宽度和高度，当内容超出宽度和高度之后，不会自动填充扩展

2、min-width最小宽度、min-height最小高度：

最小宽度、最小高度：设置了最小宽度和最小高度之后，如果在div中没有任务文字，系统会显示一个最小宽度和最小高度的区域，若div中的文字超过了最小宽和最小高度，那么区域会自动进行填充扩展

3、max-width最大宽度、max-height最大高度：

最大宽度和最大高度是可以在范围之内自动根据内容的多少进行自动填充扩展，但如果是超过了最大宽度和最大高度的话，元素将只会延展到最大值就不会再继续延展下去了

4、单位是px像素、%百分比：

px是精确的像素，百分比是根据窗口大小设置的，若指定百分比，会根据窗口拖动的大小，来自动换行

下面是相关实例：

<!DOCTYPE html>
<html>
<head>
	<title>定义元素的宽和高</title>
	<style type="text/css">
	/*最小宽度和最小高度*/
		/*没有任何文字时会显示最小区域*/
		.box{min-width: 50px;min-height: 50px;background-color: red;}
		/*超过最小宽度和最小高度会自动进行填充扩展*/
		.box1{min-width: 50px;min-height: 50px;background-color: blue;}
	/*最大宽度和最大高度*
		/*没有超过最大宽度和最大高度时，会自动根据内容进行延展*/
		.box2{max-width: 400px;max-height: 200px;background-color: green;}
		/*超过最大宽度和最大高度的部分，不会自动延展*/
		.box3{max-width: 400px;max-height: 200px;background-color: green;}
		/*百分比控制:子元素根据父元素的大小设置百分比，会根据父元素大小改变同时改变自身大小*/
		.father{width: 100%;height: 300px;background-color: yellow;}
		.father .child{width: 50%;height: 50%;background-color:red;}
	</style>
</head>
<body>
	<div class="box"></div>
	<hr>
	<div class="box1">各位一直喜爱并支持CSDN的用户大家好：

在这里告诉大家个好消息，CSDN建立了开发者社群，群内提供行业技术讲师提供专业答疑，技术资源共享，技术精英相互连接等社群服务，为保证良好的交流氛围，请大家共同杜绝恶意营销的广告哦~

社群领域包涵：AI、Python、大数据、区块链及综合类，五类领域的技术交流栈供大家自行选择哦~

扫码添加李思思小姐姐，回复数字即可进入技术社群！
--------------------- 
作者：CSDNedu 
来源：CSDN 
原文：https://blog.csdn.net/CSDNedu/article/details/84327908 
版权声明：本文为博主原创文章，转载请附上博文链接！</div>
	<hr>
	<div class="box2">各位一直喜爱并支持CSDN的用户大家好：

在这里告诉大家个好消息，CSDN建立了开发者社群，群内提供行业技术讲师提供专业答疑，技术资源共享，技术精英相互连接等社群服务</div>
	<hr>
	<div class="box3">各位一直喜爱并支持CSDN的用户大家好：

在这里告诉大家个好消息，CSDN建立了开发者社群，群内提供行业技术讲师提供专业答疑，技术资源共享，技术精英相互连接等社群服务，为保证良好的交流氛围，请大家共同杜绝恶意营销的广告哦~

社群领域包涵：AI、Python、大数据、区块链及综合类，五类领域的技术交流栈供大家自行选择哦~

扫码添加李思思小姐姐，回复数字即可进入技术社群！
--------------------- 
作者：CSDNedu 
来源：CSDN 
原文：https://blog.csdn.net/CSDNedu/article/details/84327908 
版权声明：本文为博主原创文章，转载请附上博文链接！</div>
	<hr>
	<div class="father">
		<p class="child"></p>
	</div>
</body>
</html>