这是我参与[第五届青训营]伴学笔记创作活动的第3天 前面学习了CSS类选择器、id选择器的用法，用以获取标签或者元素，今天我学习了CSS的进阶：什么是块，以及块的互转
块级元素其实就相当于一个盒子，分布在整个网页中，举个例子 div { width: 400px; height: 400px; background-color: pink; display:block;
/* 语法格式：display：属性*/
/* 转为行内块 */
display: inline-block;
/* 转为行内 */
display: inline;
}
div标签创造出来的区域有宽高，我们可以视为一个盒子一样的东西
做一个说明，CSS中元素有显示的模式 块级元素 特点：1.独占一行 2.宽度默认为父元素宽度，高度由内容决定 3.可以设置宽高 例：div、p、h、ul、li、dl、dt、dd、form、header、nav、footer...
行内元素 特点：1.一行可以显示多个 2.宽度和高度由内容决定 3.不可以设置宽高 例：a、span、b、u、i、s、strong、ins、em、del...
行内块元素 特点：1.一行可以显示多个 2.可以设置宽高 例：input、img、textarea、button、select...
做一个通俗易懂的说明
div { width: 300px; height: 300px; background-color: pink;
/* 这是电脑盒子的边框 == 电脑包装盒 */
border: 1px solid black;
/* 内边距（保护电脑的泡沐，20px表示包装盒与电脑之间有20px的泡沫）*/
padding: 20px;
/* 为了不跟其他电脑挤压，我们也要给两台电脑一点距离 */
margin: 20px;
/*
总结：border：盒子边框
padding：内边距
margin：外边距
两个垂直的盒子，只能给一个盒子margin，不然margin只取最大值 */
}
我懒得去计算盒子边框和边距怎么办？
CSS3提供盒子模型的自动计算
语法格式：box-sizing
box-sizing: border-box;
有了这个功能后，就可以发现盒子被自动计算大小了
}
/* 浏览器是给每个标签有默认margin边距的，我们可以手动清除 */
* {
margin: 0px;
padding: 0px;
}
/* 这个叫做清除默认样式，以后开发基本上都要使用 */
以上是我今天所有的学习内容！
