块级标签/内联标签

一、什么是块级标签/内联标签

• 块级标签

①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的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