‘display‘、‘position‘和‘float‘的相互关系？
一、这三种属性之间的关系和相互作用效果可以用下图表示：
display转化表
| 设定值 | 转换后 |
|---|---|
| inline-table | table |
| inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption | table |
| 其他 | 保持设定值 |
二、具体流程如下所示2.1、display为none
当元素的display设置为none时，则position和float都不起作用。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。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/124042985
内容来源于网络，如有侵权，请联系作者删除！