1.若height是确定的（比如height:100px)，则height直接可确定（还受min-height,max-height影响，见height,min-height,max-heigth的作用机制问答)。

2.若width是不确定的（比如width: min-content 或 width:100px,min-width:fit-content），此时width受子元素影响   （height:100px,min-height:fit-content时heigth已确定就是100px,可以直接设置min-height:100px达到width:100px,min-height:fit-content的效果）

则依次确定每一个子元素的width，如果子元素的width可以由自己确定（比如子元素width写死了或者子元素width为min-content,max-content都能确定）则设置width为子元素width，如果子元素的width不能确定（比如写的width为100%，fit-content等需要确定外部元素高度的属性）则递归计算子元素的width，然后设置父元素width为最大宽度子元素的width，再用这个width去确定子元素中需要使用外部元素宽度来确定本身宽度的宽度。

看几个例子

1.父元素min-height: 100px，子元素height: 100%;

这个情况子元素最终高度为0。

2.父元素width: 0;子元素1 width: 100%;子元素2 width: 100px.

这个情况子元素1最终宽度 100px;

3.

<!DOCTYPE html>

<html lang="en">

<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, body {

            padding: 0;

            margin: 0;

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

            height: 200px;

            min-width: fit-content;

        }

        .header {

            height: 50px;

            background: red;

        }

        .body {

            width: 500px;

            height: 150px;

            background: lightblue;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div style="display: flex;height: 100%;">

            <div style="flex-grow: 1; width: 0">

                <div class="body">

                </div>

            </div>

        </div>

    </div>

</body>

</html>

这个例子中，flex-grow: 1; width: 0，这个元素已经确定了width，宽度确定就不会往他的子元素进行了，container元素再确定子元素宽度的时候会认为flex元素的宽度为0。最后的结果就是flex元素的最终宽度就是container的宽度而不会是body元素的宽度。

4.

<!DOCTYPE html>

<html lang="en">

<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, body {

            padding: 0;

            margin: 0;

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

            height: 400px;

            min-width: fit-content;

            padding: 10px;

            background: lightcoral;

        }

        .header {

            height: 200px;

            background: lightgreen;

        }

        .body {

            height: 200px;

            width: 100%;

            background: lightblue;

            overflow: auto;

        }

        .child {

            width: 800px;

            height: 100px;

            background: lightyellow;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div class="body">

            <div class="child"></div>

        </div>

    </div>

</body>

</html>

这个例子body不会出现滚动条，因为container的width需要子元素来确定，body在第一轮计算最大宽度的时候递归到了child里面得出了结果800，就不需要开滚动条了。

要想让body在计算宽度的时候不受child影响，须在递归进入child之前确定body的宽度，办法就是例3里面的使用flex

<!DOCTYPE html>

<html lang="en">

<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, body {

            padding: 0;

            margin: 0;

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

            height: 400px;

            min-width: fit-content;

            padding: 10px;

            background: lightcoral;

        }

        .header {

            height: 200px;

            background: lightgreen;

        }

        .body {

            border: 2px dashed black;

            height: 200px;

            width: 100%;

            background: lightblue;

            overflow: auto;

        }

        .child {

            width: 800px;

            height: 100px;

            background: lightyellow;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div class="flex" style="display: flex;height: 100%;">

            <div style="flex-grow: 1; width: 0">

                <div class="body">

                    <div class="child"></div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

html元素height(width)是怎么确定的？的更多相关文章

  1. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  2. 都是以父元素的width为参照物的

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  3. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  4. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  5. 各种height/width总结

    CSS盒模型是比较复杂的,尤其是当页面中有滚动条时,仅仅通过css来操作高度宽度是不够的,幸运的是Javascript提供了不少这样的接口.Javascript中clientHeight / clie ...

  6. 深入理解子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  7. jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

    each 方法 $ ( selector).each(function( index,element) {  } );   参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...

  8. Expanded, SingleChildScrollView, CustomScrollView, container, height, width

    SingleChildScrollView, CustomScrollView, container, init: double.inifinity. then use Expanded to con ...

  9. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

随机推荐

  1. MySQL8新增降序索引

    MySQL8新增降序索引 桃花坞里桃花庵,桃花庵里桃花仙.桃花仙人种桃树,又摘桃花卖酒钱. 一.MySQL5.7 降序索引 MySQL在语法上很早就已经支持降序索引,但实际上创建的却仍然是升序索引,如 ...

  2. 三、单redis升级redis集群+哨兵

    针对假如已经是安装了redis,只是是单部署,需要把他切换成redis集群+哨兵模式,我因为偷懒,就写了个脚本来执行,各位看官,请品~你品~你细品~ 首先准备个升级包,放到任意路径,内容如下: 第一个 ...

  3. Web 后端的一生之敌：分页器

    分页器是 Web 开发中常见的功能,看似简单的却经常隐藏着各种奇怪的坑,堪称 WEB 后端开发的一生之敌. 常见问题 边翻页边写入导致内容重复 某位用户正在浏览我的博客,他看到第一页最后一篇文章是 & ...

  4. Java 15 新特性：隐藏类

    什么是隐藏类 隐藏类,是一种不能被其他类直接使用的类.引入隐藏类的主要目的是给框架来使用,使得框架可以在运行时生成类,并通过反射间接使用它们.可能有点抽象,不要紧,下面我们通过一个例子来直观的认识它! ...

  5. 【Java8新特性】Lambda表达式

    一.Lambda 表达式 是什么? Lambda读音:拉姆达. Lambda是一个匿名函数,匿名函数就是一个没有名字的函数. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). ...

  6. 637. Average of Levels in Binary Tree - LeetCode

    Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这 ...

  7. 对 Python 中 GIL 的一点理解

    GIL(Global Interpreter Lock),全局解释器锁,是 CPython 为了避免在多线程环境下造成 Python 解释器内部数据的不一致而引入的一把锁,让 Python 中的多个线 ...

  8. 「JOISC 2020 Day1」汉堡肉

    我终于学会打开机房的LOJ了! description LOJ3272 有\(n(n<=2*10^5)\)个矩形,让你找\(k(k<=4)\)个点可以覆盖所有矩形(点可重复),输出一种方案 ...

  9. drools决策表的简单使用

    目录 一.背景 二.一个简单的决策表 1.在同一个决策表中处理多个Sheet页 2.RuleSet下方可以有哪些属性 3.RuleTable下方可以有哪些属性 4.规则属性的编写 三.需求 四.实现 ...

  10. JavaScript Number -> String

    六种将Number类型转化为String类型的方法: 方法一:通过+运算符加上一个空字符串: eg:'' + 5 -> '5'      5 + '' -> '5' 方法二:toStrin ...