‘display‘、‘position‘和‘float‘的相互关系?

x33g5p2x  于2022-04-10 转载在 其他  
字(1.1k)|赞(0)|评价(0)|浏览(267)

一、这三种属性之间的关系和相互作用效果可以用下图表示:

display转化表

设定值转换后
inline-tabletable
inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-captiontable
其他保持设定值

二、具体流程如下所示
2.1、display为none
当元素的display设置为none时,则positionfloat都不起作用。
2.2、position是absolute或fixed
当元素display值不为none,而position是absolute或者fixed时,此时float不起作用,计算值也为none(原文中有计算方法,这里略去),display值会按上表设置。元素框的位置由top、left、right、bottom值和其父元素决定。
2.3、float值不为none
当元素有了浮动属性(float不为none,是left或right)后,该框浮动且display值会按上表转换。例如,span是行内元素,设置浮动后会变为块级元素。
2.4、如果为根元素设置display
如果元素是根元素,设置的display也会按上表进行转换。否则,元素的display值为指定值或默认值。
如下所示:

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      display: inline;
    }
    div {
      background-color: red;
    }
  </style>
</head>

<body>

  <div>hhhhhh</div>

</body>

</html>

我们给html设置display的样式为inline,但是展示出来的结果为block。

相关文章