码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-05 19:11:08      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:group   设置   block   块元素   上下文   footer   内联   position   依据   

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

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

标签:group   设置   block   块元素   上下文   footer   内联   position   依据   

原文地址:https://www.cnblogs.com/miluluyo/p/11140136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!