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属性时,当前的原始点则参考父级内容区的原始点进行定位。 没有跳出文本流,定位是相对于父级和兄弟节点,
大道至简,知易行难。从今天开始改变,这是对平庸生活最好的回击。