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. 微信新菜单类型 article_id 设置教程

    前不久, Senparc.Weixin SDK 跟随微信更新的步伐,上线了新的素材管理接口,其中也涉及到了 article_id 类型的自定义菜单接口. 本文将演示如何使用新的菜单类型. 官方文档传送 ...

  2. 生成器对象（自定义迭代器），自定义range方法，模块

    自定义迭代器 一 .生成器与yield ''' 我们得到一个迭代器通常都是调用可迭代对象的__iter__方法 ,例如 list.iter() 得到一个迭代器, 但是当list很大时候,就违背了pyt ...

  3. Java学习，利用IDEA开发工具连接redis

    Idea连接redis及Jedis数据操作 注意是否开启了redis服务!!! 1.打开虚拟机终端,查看虚拟机防火墙是否关闭 查看防火墙当前状态命令: $sudo ufw status 我的是默认关闭 ...

  4. 大陆出境海缆TPE APCN NCP APG简介

    目前我国的登陆站主要设立在三个城市 山东 山东青岛登陆站(隶属中国联通) EAC-C2C TPE(美国方向) 上海 上海崇明登陆站(隶属中国电信) APCN2(亚太) NCP(长线--美国,新建,亚太 ...

  5. 使用VLL技术实现多家合作伙伴复用同一条链路做两端数据全透传

    公司A当前租用一条10G跨市运营商光缆,自身业务只用到一半流量,为节省成本,寻求多家合作伙伴共用链路以达到财务需求 合作伙伴需求接入链路全透传,即光缆两端接入点端口逻辑直连 当前有三种方案可以实现上述 ...

  6. c# SendInput模拟输入字符和按键

    介绍: 该程序本意是为了在彩六里打中文用的,现整理出来供大家复制粘贴.(源程序已开源至GitHub - 彩六中文输入) 主要使用SendInput函数,与c语言中用法一致.(部分代码来自网络) 命名空 ...

  7. c 语言彩票选号

    最近刚学了c语言,就做了个彩票选号程序练手玩玩,做的不好请见谅 1.分为前区(1-35)和后区(1-12)号码 2.先循环随机前区号在循环后区号 3.生成随机时数判断是否有重复值,和之前5期是否出现过 ...

  8. Zookeeper安装学习（一）

    学习内容:Zookeeper本地安装 前提准备:①JDK安装成功 ②通过XShell7将Zookeeper安装包(apache-zookeeper-3.5.7-bin.tar.gz)拷贝到Linux系 ...

  9. 素性测试+PollardRho

    素数判定 暴力 本质上是检查其是否能够不用其本身进行质因数分解. 直接枚举从区间 \([2,n)\) 的数看其是否整除 \(n\) 即可.但是其实发现我们只要枚举到 \(\sqrt n\) 即可,复杂 ...

  10. Training loop Run Builder和namedtuple()函数

    namedtuple()函数见:https://www.runoob.com/note/25726和https://www.cnblogs.com/os-python/p/6809467.html n ...