1.1盒子模型的介绍
1.盒子的概念
1. 页面中的每一个标签,都可看做是一个“盒子” ,通过盒子的视角更方便的进行布局
2.浏览器在渲染 (显示)网页时,会将网页中的元素看做是一个个的矩形区域, 我们也形象的称之为子
2. 盒子模型
➢CSS中规定每个盒子分别由:内容区域(content) 、内边距区域(padding) 、边框区域(border)、 外边距区域(margin)构成,这就是盒子模型
3.记忆: 可以联想现实中的包装盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 边框线==纸箱子 */
border: 1px solid #000;
/* 内边距==填充泡沫:出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边框:出现在两个盒子之间,出现在盒子的外面 */
margin: 50px;
}
</style>
</head>
<body>
<div>内容电脑</div>
<div>内容电脑</div>
</body>
</html>