行内元素与块级元素的区别

Posted 2020-10-08

　　块级元素：

　　　　同一标签内写两个以上，标签会换行显示，如设置宽，则与父级之间的宽度差由margin填充；

　　　　宽度默认100%，高度随内容儿变化，宽高都可主动设置；

　　行内元素：

　　　　同一标签内写两个以上，标签会在同一行显示，并且之间会有空隙(该空隙是解析标签间空格所导致)；

　　　　宽，高默认为0；随内容变化，不可主动设置宽高、padding与margin的上下边距；

　　　　　　常用的img可直接设置宽，高，margin，padding(因img表现的像inline-block)；

　　　　如想设置宽，高，margin，padding则需要转化为块级元素；

　　　　display:inline-block   ----  转化为行内块级元素(是块级，不换行)，

　　　　display: block   ----  转化为纯块级元素(是块级，换行)，

　　　　两种转化方法，根据实际需求进行选择使用；

 

　　text-align:  left

　　　　　　　right

　　　　　　　center

　　可用于文字在其标签内部进行调整，或行内标签在其父级调整(display:inline,display:inline-block，均可)

　　*******块级标签可解析，但没有效果********

　　想要用text-align就必须有宽度差才会去作用