web前端练习32----Css，盒子模型,display,visibility,overflow,单位em

最新推荐文章于 2023-02-08 10:53:47 发布

zhaihaohao1

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量546

点赞数 1

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/103740693

版权

本文详细介绍了CSS中的盒子模型，包括内容区、内边距、边框和外边距的概念，以及块级元素和内联元素的盒子模型差异。同时，讲解了`display`和`visibility`属性的作用，`overflow`属性处理溢出内容的方式，以及长度单位`px`、`%`和`em`的用法。

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

一、盒子(框)模型

1.1图形示例：

1.2盒子模型的主要构成，由内向外：
内容区：width,height
内边距：padding
边框：border
外边距：margin
可见宽高 = 内容区+内边距+边框

1.3块级元素的盒子模型（在文档流中）：
内容区：可以设置宽高 width，height
内边距：内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
边框：盒子可见框最外侧，边框是盒子的边缘。
边框要同时设置3个样式：border-width（宽度），border-color（颜色），border-style（风格），推荐使用简写模式
外边距：外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
相邻的垂直外边距会发生重叠现象：相邻元素的外边距会取最大值，子元素的外边距会传递给父元素(子元素设置外边距，父元素会跟着走)
水平外边距不会重叠，而是取和
关于垂直外边距重叠现象参考：https://blog.csdn.net/zhaihaohao1/article/details/103441942

块级元素的盒子模型，测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			.container {
				background: #00FF00;

			}

			.box1 {
				width: 100px;
				height: 100px;
				background: #FF0000;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 子元素的外边距会传递给父元素(子元素设置外边距，父元素会跟着走)
		 -->
		<div class="container">
			<div class="box1"></div>
		</div>
	</body>
</html>

1.4内联元素的盒子模型