一、规则

1. 某div不设置宽度，那么width默认为auto.

2. 某子元素div的width为100%（或者设置为等于父元素宽度的具体值，比如父元素width为100px，子元素width也设置为100px），则此子元素的宽度 = 父元素width值（不包括父元素边框，内边距）+子元素的边框、内边距宽度

4. 某个div的width不设置，或者设置为auto, 子元素的宽度会包含在父元素内，子元素边框、内边距都在不会叠加到子元素的长度上

二、实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .main {

            background: red;

            height: 40px;

            width: 700px;

            font-size: 30px;

            color: #fff;

            height: 80px;

            padding-left: 20px;

        }

        .right {

            background: green;

            height: 40px;

            width: auto;

            padding-left: 40px;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="right">right</div>

    </div>

</body>

</html>

　　

　效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .main {

            background: red;

            height: 40px;

            width: 700px;

            font-size: 30px;

            color: #fff;

            height: 80px;

            padding-left: 20px;

        }

        .right {

            background: green;

            height: 40px;

            width: 100%;

            padding-left: 40px;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="right">right</div>

    </div>

</body>

</html>

　

效果图：

如果right再加一个padding-right:40px，green区域要再加长40px

三、高度的设置类似于宽度，我们结合flexbox弹性布局看下效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    .flex-container {

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        height: 200px;

    }

    /* 以下为辅助样式 */

    .flex-container {

        background-color: #F0f0f0;

    }

    .flex-container .flex-item {

        padding: 20px;

        height: 200px;

        background-color: #B1FF84;

    }

    .flex-container .flex-item:first-child {

        background-color: #F5DE25;

    }

    .flex-container .flex-item:last-child {

        background-color: #90D9F7;

    }

</style>

<body>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

    </div>

</body>

</html>

改为width:auto

想让文字垂直居中，设置line-height

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    .flex-container {

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        height: 200px;

        line-height: 200px;

    }

    /* 以下为辅助样式 */

    .flex-container {

        background-color: #F0f0f0;

    }

    .flex-container .flex-item {

        padding: 20px;

        height: auto;

        background-color: #B1FF84;

    }

    .flex-container .flex-item:first-child {

        background-color: #F5DE25;

    }

    .flex-container .flex-item:last-child {

        background-color: #90D9F7;

    }

</style>

<body>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

    </div>

</body>

</html>

发现并未居中，因为line-height的leading加在padding-top下面，所以居中位置会往下偏移20px

把上下的padding去掉后就可以垂直居中了

width、height为auto或者100%的区别的更多相关文章

  1. width为auto或者100%的区别

    一.四个理论 1. 某div不显示设置宽度,那么width为auto. 2. 某div的width在默认情况设置的是盒子模型中content的值 3. 某div的width为100%表示的是此div盒 ...

  2. stage.width/height和stage.stageWidth/stageHeight的区别

    stage.stageWidth和stage.stageHeight就是舞台的宽带和高度 一般默认打开宽带是550,高度是400 那么stage.stageWidth=550,stage.stageH ...

  3. height clientHeight scrollHeight offsetHeight的大致区别

    这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...

  4. Html 之自动高度 auto 和 100%高度

    HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...

  5. as3:sprite作为容器使用时，最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  6. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  7. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

  8. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  9. 正则：img的url,width,height 和 a标签的url以及替换

    代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...

随机推荐

  1. mysql高级复习

    MySQL官方对索引的定义为:索引(Index)是帮助MySQL高效获取数据的数据结构.可以得到索引的本质:索引是数据结构,可以简单理解为“排好序的快速查找数据结构”. 数据本身之外,数据库还维护着一 ...

  2. 匈牙利算法(Kuhn-Munkres)算法

    这个算法有点难度,一般比较标准的描述网页上也有相关的描述,我在这里就简单的用十分通俗的语言给大家入个门 主要可以结合https://blog.csdn.net/zsfcg/article/detail ...

  3. javascript DOM练习

    一.定时器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  4. 1.异常(Error和Exception)

    什么是异常 比如上午我们一般是开车去上班,正常情况下,一般都不会迟到,但是今天突然有个问题,车坏了或者限行了,于是乎你改坐公交了,就有可能会迟到,这就属于一种异常的情况.在实际生活中呢,可能会遇到很多 ...

  5. python类属性和实例属性（类变量和实例变量）

    在类中,根据变量定义的位置不同,以及定义的方式不同,类属性又可以细分为以下三种类型: 类体中,所有函数之外:类属性(类变量) 类体中,所有函数内部,以"self.变量名"的方式定义 ...

  6. exp2:// 一次存储型XSS从易到难的挖掘过程

    一日在某站点发现一个找茬活动,感觉是另类的src就参与了一下.就发生了这次有趣的XSS测试过程. 0×00 开始 (注意1)XSS不仅存在于页面上直观所在的位置,所有用户输入的信息都有可能通过不同形式 ...

  7. 事件总线 EventBus

    661. .net中事件模型很优雅的实现了观察者模式,同时被大量的使用在各种框架中. [2016-04-30 10:52:42]662. Prism框架中实现了一个典型的EventAggregator ...

  8. 创建模仿存储库 Making a Mock Repository 精通ASP-NET-MVC-5-弗瑞曼 Listing 7-5

  9. selenium等待方式之显示等待

    有时候,页面元素并未及时加载出来导致后面的步骤无法执行 这里就需要在加载前添加等待时间,让目标元素有足够的时间加载出来 第一种方法:使用time.sleep() 这种方法过于强制,无论元素是否加载出来 ...

  10. java线程基础梳理

    java线程 概述 进程:运行时概念,运行的应用程序,进程间不能共享内存 线程:应用程序内并发执行的代码段,可以共享堆内存和方法区内存,而栈内存是独立的. 并发理解:在单核机器上,从微观角度来看,一段 ...