display值的作用分别是什么？relative和absolute分别是相对谁定位的？

Posted 2022-03-17 miluluyo

display值的作用分别是什么？

none：元素隐藏，不占据位置

block：该元素显示为块级元素

inline：默认，该元素会被显示为内联元素

inline-block：行内块元素

list-item：该元素会作为列表显示

run-in：该元素会根据上下文作为块级元素或内联元素显示

table：该元素会作为块级表格来显示

inline-table：该元素会作为内敛表格来显示

table-row：该元素会作为一个表格行来显示

table-row-group、table-header-group、tabele-footer-group、table-column-group：该元素会作为一个或多个行的分组来显示

table-column：该元素会作为一个单元格列显示

table-cell：该元素会作为一个表格单元格显示

table-caption：该元素会作为一个表格标题显示

inherit：从父元素继承display属性的值

 

relative和absolute分别是相对谁定位的？

position:absolute 绝对定位

参照浏览器的左上角，配合top，right，bottom，left进行定位，如果未设置这四项属性则默认依据父级的作为原始点。如果设置了属性，并且父级没有设定position属性，则以浏览器左上角为原始点进行定位。 跳出文本流，相对于父级且带有定位，如果父级没有定位属性，则往上级寻找定位，若都无，则以body定位。

position:relative 相对定位

参照父级的原始点为原始点，无父级则以body的原始点为原始点，当父级具有padding等css属性时，当前的原始点则参考父级内容区的原始点进行定位。 没有跳出文本流，定位是相对于父级和兄弟节点，