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. hover特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 论文解读（SAGPool）《Self-Attention Graph Pooling》

    论文信息 论文标题:Self-Attention Graph Pooling论文作者:Junhyun Lee, Inyeop Lee, Jaewoo Kang论文来源:2019, ICML论文地址:d ...

  3. 微信小程序云开发如何实现微信支付，业务逻辑又怎样才算可靠

    今天打了几把永劫无间后,咱们来聊一聊用云开发来开发微信小程序时,如何实现微信支付,并且保证业务逻辑可靠. @ 目录 注册微信支付商户号 小程序关联商户号 业务逻辑 代码实现 注册微信支付商户号 点击& ...

  4. .Net 6 WebApi 项目部署到 Linux 系统上的 Docker 容器

    1.创建一个基础的WebApi项目 注意:因为发布时候,Dockerfile文件必须和解决方案.cspro文件放在同级,所以建议勾上这个,当时遇到这个问题,导致打包镜像时找不到.cspro文件,搞了好 ...

  5. mybatis xml 中 trim 多余的符号

    <if test="(mac != null and mac != '') or (roomNo != null and roomNo != '') or (bedNo != null ...

  6. linux篇-linux 下tomcat服务每天定时启动

    1l先准备一个脚本 #!/bin/sh #./etc/profile export JAVA_HOME=/usr/java/jdk1.6.0_45 sh /home/tomcat-bingchuang ...

  7. unity---3D数学基础

    点乘 A·B 判断敌人在前方还是后方 调试画线 画线段 前两个参数 分别是 起点 终点 画射线 前两个参数 分别是 起点 方向 Debug.DrawLine(this.transform.positi ...

  8. 随笔总结：8086CPU的栈顶超界问题

    我们学习编程都知道栈的超界限问题是非常严重的问题,他可能会覆盖掉其他数据,并且我们不知道这个数据是我们自己保存的用于其他用途的数据还是系统的数据,这样常常容易引发一连串的问题. 在学习汇编的时候,我们 ...

  9. 为什么Java有了synchronized之后还造了Lock锁这个轮子？

    众所周知,synchronized和Lock锁是java并发变成中两大利器,可以用来解决线程安全的问题.但是为什么Java有了synchronized之后还是提供了Lock接口这个api,难道仅仅只是 ...

  10. ES6 - promise（2）

    从上一篇中我们知道promise的概念,上一篇也提到了 promise的过程: 启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数(甚至可以在异步任务结束后指 ...