一、什么是块级标签/内联标签
-
块级标签
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
display: block;设置成块级标签
span{
display: block;
}
-
内联标签
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
display: inline;设置成内级标签
-
具有上面全部性质
display: inline-block;/
二、什么是内边距，和外边距
-
内边距
div这样的块级标签的组成分为边框+实际设置的长宽值，实际我们设置的一个div的长宽高是不包括边框的，因为默认边框为0，所以感觉是一样的，我们可以通过设置padding来设置，内容实际和边框的具体下图的css设置如下
.div1{
border-width: 20px;
border-color: red;
border-style: solid;
width: 200px;
height: 200px;
background-color: chartreuse;
padding: 10px;
}
image.png
-
外边距
两个块级标签之间的距离
image.png
-
兄弟间的边界塌陷
当有两个div上下分布同时都设置外边距，也就是最上面的div下边距，和最上面的div上边距，两者的距离以最大的边距
-
父子间的边界塌陷
当设置子类的外边距和父类边距时，这里要注意是传递的， if 父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin
image.png
