文章目录
前端入门学习之css盒子原则
引入块级元素：
当一个html标签元素展示方式为 block，也就是它的 display 属性为 block，那么我们可以想象它像一个长方形盒子一样，这种展示方式也叫做块级元素
块级元素的特点
占据整行
占据整行：块级元素会独占一行，其后的元素会另起一行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
display: block;
background-color: aqua;
}
</style>
</head>
<body>
<p >这是一个块级元素。</p>
</body>
</html>
设置高度和宽度
宽度与高度：块级元素可以设置宽度和高度属性。默认情况下，块级元素的宽度会占据其父元素的全部可用宽度（除非被其他CSS属性如max-width、min-width或width等覆盖）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
display: block;
background-color: aqua;
width: 900px;
height: 900px;
}
</style>
</head>
<body>
<p >这是一个块级元素。</p>
</body>
</html>
包含其他元素
包含其他元素：块级元素可以容纳内联元素（inline elements）和其他块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
display: block;
background-color: aqua;
/* width: 900px;
height: 900px; */
}
</style>
</head>
<body>
<p >这是一个块级元素。<h1>我是h1标题</h1> </p>
</body>
</html>
所以，到这里，我们可以把网页中的所有元素都看作是一个盒子，也就是长方形矩形，一个网页里面就是通过不同的盒子组建搭在一起的，也就是说，就好像搭建俄罗斯方块一样，我们可以以这样的思路去搭建一个网站。
盒子原则：
在css样式布局中，对于一个元素来说，有以下三个属性
margin：
外边距，顾名思义，盒子一和盒子二之间的距离就是外边距
例子：
第一幅图是 p 标签没有设置外边距的情况
当我们的 p 标签加上外边距呢
对于 p 元素的盒子四个方向的外边距都增加了 100 px
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
p{
display: block;
background-color: aqua;
margin: 100px;
}
</style>
</head>
<body>
<p >这是一个块级元素。</p>
<h1>我是h1标题</h1>
</body>
</html>
boder：
边框，顾名思义，也就是我们盒子的边框设置，在p标签中，默认是没有边框的，但是我们可以加上去
padding：
内边距，也就是可以理解成盒子内部如果还有盒子，或者其他内容，它们之间的距离
