padding不会撑开盒子的情况

注意：

  • 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）
  • 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
  • 如果一个盒子没有给定宽度/高度，就会用其父类的属性，这时padding不会影响盒子的大小

课堂实例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>2019年9月9号</title>
	<style>
		.father
		{
			width: 300px;
			background-color: pink;
			height: 200px;
			padding-left: 30px;
			/*因为父盒子有宽度给定值了，则padding会撑开盒子*/
		}
		.son
		{
			/*padding-left: 30px;
			子代盒子没有给定宽度,用的是默认的,所以padding是不会撑开盒子的
			如果给定宽度的情况下，也会被padding撑开*/
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">123</div>
	</div>
</body>
</html>

作业：自己瞎鼓捣的

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>padding不会撑开盒子——2019年9月9号</title>
	<style>
		.father
		{
			text-align: center;
			width: 300px;
			height: 300px;
			background-color: greenyellow;
			line-height: 2px;
			padding-top: 2px;
			/*padding-left: 30px;*/
		}
		.son1
		{
			float: left;
			width: 80px;
		}
		.son2
		{
			float: right;
			width:80px;
		}
	</style>
</head>
<body>
	<div class="father">
		<h3 style="word-wrap: break-word;">演员表：</h3>
		<div class="son1">
			<h4>剧中饰演：</h4>
		</div>
		<div class="son2">
			<h4>姓名：</h4>
		</div>
	</div>
</body>
</html>

上面的实际效果是这样的：

  • 用来实现这个过程中：遇到了一些困难：
    • 首先是，如何在一个盒子里实现两行文字：用浮动特性
    • 接着，如何缩短父盒子和子盒子文字之间的距离：用line-height设置行距
    • 但在上面的过程中，会发现“演员表”会超出边界，用padding-top来设置文字距离边框的距离

如果把盒子里面的注释取消就会发现：盒子在有宽度的情况下，padding-left会撑开盒子的大小

好的，分享到这！

posted @ 2019-09-09 09:39  lures  阅读(143)  评论(0)    收藏  举报
油
加