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

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属性时,当前的原始点则参考父级内容区的原始点进行定位。 没有跳出文本流,定位是相对于父级和兄弟节点,

posted @ 2019-07-05 19:00  麋鹿鲁哟  阅读(1722)  评论(0编辑  收藏  举报