‘display‘、‘position‘和‘float‘的相互关系？-6ren

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

转载作者：知者更新时间：2024-03-13 02:37:41

25

4

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

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。

25

4

0

文章推荐： kubernetes集群命令行工具kubectl

文章推荐： Pikachu漏洞靶场（SSRF服务端请求伪造）

文章推荐： leetcode刷题(第1004题)——最大连续1的个数 III

Java has-a 关系
下面的说法正确吗？ “人最好的 friend 是狗。” public class Mann { private BestFriend dog; //etc } 最佳答案我想说这样
Laravel 关系
我一直在 documentation 中查看 Laravel 4 中的关系我正在尝试解决以下问题。我的数据库中有一个名为“事件”的表。该表具有各种字段，主要包含与其他表相关的 ID。例如，我有一个“
mysql表重新设计思路(关系)
我的表具有如下关系: 我有相互链接的级联下拉框，即当您选择国家/地区时，该国家/地区下的区域将加载到区域下拉列表中。但现在我想将下拉菜单更改为基于 Ajax 的自动完成文本框。我的问题是，我应该有多
MySQL 关系
我正在尝试弄清楚如何构建这个数据库。我之前用过Apple的核心数据就好了，现在我只是在做一个需要MySQL的不同项目。我是 MySQL 的新手，所以请放轻松。 :) 对于这个例子，假设我有三个表，Us
浅谈MongoDB 关系
MongoDB 的关系表示多个文档之间在逻辑上的相互联系。文档间可以通过嵌入和引用来建立联系。 MongoDB 中的关系可以是： 1:1 (1对1) 1: N (1对多)
sql - 范围和分配单元之间有什么区别/关系？
您能解释一下 SQL 中“范围”和“分配单元”之间的区别或关系吗？最佳答案分配单元基本上只是一组页面。它可以很小(一页)或很大(很多页)。它在 sys.allocation_units 中有一个元
基于每个表两列的 PowerPivot 关系
我有一个表 geoLocations，其中包含两列纬度和经度。还有第二个表(让我们将其命名为城市)，其中包含每对唯一的纬度和经度对应的城市。如何使用 PowerPivot 为这种关系建模？创建两个单
android - SQLDelight 关系
我想用 SQLDelight 建模关系，尤其是一对多关系。我有 2 张 table :recipe和 ingredient .为简单起见，它们看起来像这样: CREATE TABLE recipe
Neo4J CSV 关系
我是 Neo4J 新手，我有一个带有源和目标 IP 的简单 CSV。我想在具有相同标签的节点之间创建关系。类似于... source_ip >> ALERTS >> dest_ip，或者相反。 "d
来自另一个类的静态调用的 UML 关系
我正在创建一个类图，但我想知道下面显示的两个类之间是否会有任何关联 - 据我了解，对于关联，ClassA 必须有一个 ClassB 的实例，在这种情况下没有但是，它确实需要知道 ClassB 的一个变
visualization - 为什么OWLViz只显示 "is-a"关系？
是否可以显示其他属性，即“hasTopping”等？如何在 OWLViz 中做到这一点？最佳答案 OWLViz 仅显示类层次结构(断言和推断的类层次结构)。仅使用“is-a”关系进行描述。 OW
java - 如何在对象之间建立链接/关系？
public class MainClass { ArrayList mans = new ArrayList(); // I'm filling in this arraylist,
mysql - “多对二”关系
我想知道“多对二”的关系。 child 可以与两个 parent 中的任何一个联系，但不能同时与两个 parent 联系。有什么办法可以加强这一点吗？我也想防止 child 重复条目。一个真实的例子
grails - 从主应用程序向grails插件域类添加行为(关系)？
我有一个已经创建的Grails插件，旨在支持许多应用程序。该插件具有一个Employee域对象。问题在于，当在主应用程序中使用该应用程序中的域对象时，需要将其引用回Employee对象。因此，我的主应
laravel- Eloquent 关系
我有一个类(class)表、类(class)hasMany部分和部分hasMany讲座以及讲座hasMany评论。如果我有评论 ID 并且想知道其类(class)名称，我应该如何在 LectureCo
Laravel 关系一到两列
我有一个模型团队，包含 ID 和名称。所有可能的团队都会被存储。我的模型游戏有两列 team_1 和 team_2..我需要哪种关系？我已经测试了很多，但它只适用于一列.. 最佳答案也许你可以试
corba - 仆人和对象 - 关系
我读了很多关于 ICE 或 Corba 等技术中使用的仆人和对象的文章。有很多资源我可以读到这样的东西: 一个仆人可以处理多个对象(为了节省资源)。一个对象可以由多个仆人处理(为了可靠性)。有人可
Java 向下转型和 is-A has-A 关系
嗨，我有一个令人沮丧的问题，我在这方面有点生疏。我有两个这样的类(class): class A{ int i; String j ; //Getters and setters} class B
java - 类是否必须位于同一继承树上才能具有 Has-A 关系
class Employee { private String name; void setName(String n) { name = n; } String getNam
java - JPA 关系
如果您有这样的关系: 员工与其主管员工之间存在多对一关系员工与其部门的多对一关系部门与其经理一对一我会在 Employee 实体中写入: @ManyToOne (cascade=CascadeT

首页

博学

6Ren·AI

商城

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