HTML5学习_day03(4)--html盒模型了解

最新推荐文章于 2022-04-12 21:34:04 发布

woaiwanshumen

最新推荐文章于 2022-04-12 21:34:04 发布

阅读量378

点赞数

分类专栏： HTML5零基础学习笔记文章标签： html5 盒模型

本文链接：https://blog.csdn.net/woaiwanshumen/article/details/52626128

版权

HTML5零基础学习笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

盒模型：

每个html元素都可以看做成一个盒模型。

1.一个盒子的特点。（border，padding，内容区域）

2.盒子与盒子之前的关系（margin）

盒子的结构：

1.content（内容区域）：展示文字跟图片的

2.padding（内边距）：内容与边框线的距离

3.border（边框）：元素的边框

4.margin（外边距）：元素与元素之间的距离（兄弟元素，父子级关系元素）

content知识点：

1.width：内容的宽度

2.height 内容的高度

3.overflow 当内容超出规定的宽高后的处理

三个值：hidden(超出部分隐藏)

scroll(在水平跟垂直方向产生滚动条)

元素的宽高计算

元素的高度=border-top + padding-top + height + padding-bottom + border-bottom

元素的宽度=border-left + padding-left + width + padding-right + border-right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style type="text/css">
		/*padding可以导致元素的宽高增加 margin就不会
		浏览器默认自带margin和padding值 用通配选择器设置为0*/
		*{
			margin: 0px ;
			padding: 0px ;
		}
			.div1{
				width: 100px;
				height: 50px;
				background: red;
				margin-bottom: 100px;
				border: 20px solid blue;
			}
			.div2{
				width: 100px;
				height: 50px;
				background: aqua;
			}
		</style>
	</head>
	<body><p class="p1"><span style="white-space:pre">		</span><<span class="s1">div </span><span class="s2">class</span><span class="s3">=</span><span class="s4">"div1"</span>>我是div1</<span class="s1">div</span>></p><p class="p1"><span>	</span><span>	</span><<span class="s1">div </span><span class="s2">class</span><span class="s3">=</span><span class="s4">"div2"</span>>我是div2</<span class="s1">div</span>></p><p class="p2"><span>	</span><span>	</span><span>	</span>   </p><p class="p3"><span class="s1"><span>	</span></</span>body<span class="s1">></span></p><p class="p3"><span class="s1"></</span>html<span class="s1">></span></p>

woaiwanshumen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习_day03(4)--html盒模型了解

盒模型：每个html元素都可以看做成一个盒模型。1.一个盒子的特点。（border，padding，内容区域）2.盒子与盒子之前的关系（margin）盒子的结构：1.content（内容区域）：展示文字跟图片的2.padding（内边距）：内容与边框线的距离3.border（边框）：元素的边框4.margin（外边距）：元素与元素之间的距离（兄弟元素，父子级关系
复制链接

扫一扫