URCloud

/ 0评 / 0/ 最后更新:2020-06-10
前端基础知识—block,inline,inline-block的区别

前沿

一个html页面,是由多种html标签如div,p,a,img,input等构成。每个标签都是一个元素。除了flex和table,block,inline,inline-block是最为常用的显示方式。

block块状元素

块状元素最明显的特征就是会换行。多个块状元素会多行显示。块状元素可以设置宽高
(如div,header,article,section,footer,p)

inline内联元素

和块状元素相对应不会换行。多个内联元素会显示在同一行。内联元素不能设置宽高
(如a,span,i,b,strong,em)

inline-block内联块元素

是block和inline的折衷方案。其本质是inline,具有inline的不换行特点,但又具有block的可以设置宽高的特点。
(如img,input,textarea)

float和absolute,fixed

除了display属性会更改元素的显示方式,float和position也会更改元素的显示方式,而且优先级更高。float和absolute,fixed都会导致元素脱离文档流,不占有具体空间,元素都会变成类似inline-block的展现形式。

0

Leave a Reply

Your email address will not be published.