一、规则

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. Activiti结束事件（End Event）

    Activiti结束事件(End Event) 作者:Jesai -2017.08.03T01:03 曾经,黑夜多么漫长,八月雨扰眠,缘何? 声明:版权所有,如需引用请注明出处,如发现抄袭,必追究法律 ...

  2. Java架构师线上问题排查，这些命令程序员一定用得到！

    Java架构师线上问题排查,这些命令程序员一定用得到! 线上问题排查,以下场景,你遇到过吗? 一.了解机器连接数情况 问题:1.2.3.4的sshd的监听端口是22,如何统计1.2.3.4的sshd服 ...

  3. angular 构建可以动态挂载的配置服务

    angular 构建可以动态挂载的配置服务 Intro 在 angular 中可以指定 environment 来区分不同环境下的配置,然而 environment 中的配置会在打包时是固定的,想要像 ...

  4. [bzoj3143] [洛谷P3232] [HNOI2013] 游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  5. python接口自动化测试 - openpyxl封装类

    前言 为了更好的让openpyxl在工作中使用,将openpyxl的常用操作封装起来,这样不仅复用性高,而且阅读性好 直接上代码 #!/usr/bin/env python # -*- coding: ...

  6. Visual studio 2015 与 mysql 连接

    Visual Studio 2015 Community连接到MySQL,步骤很简单,但刚弄的时候一脸. 这个学期开了一门课程,老师教的是visual studio 2010来开发.net的,但是我自 ...

  7. tf.keras遇见的坑：Output tensors to a Model must be the output of a TensorFlow `Layer`

    经过网上查找,找到了问题所在:在使用keras编程模式是,中间插入了tf.reshape()方法便遇到此问题. 解决办法:对于遇到相同问题的任何人,可以使用keras的Lambda层来包装张量流操作, ...

  8. mysql --->mysql 外键总结

    mysql 外键总结 1.设置外键MySQL ERROR 1005 错误 MySQL ERROR 1005 (主要是约束不一样导致的)例如: 1.两表外键的引用类型不一样,如主键是int外键是char ...

  9. codeforces 1278F - Cards(第二类斯特林数+二项式)

    传送门 解题过程: \(答案=\sum^n_{i=0}*C^i_n*{\frac{1}{m}}^i*{\frac{m-1}{m}}^{n-i}*i^k\) 根据第二类斯特林数的性质\(n^k=\sum ...

  10. Web自动化测试项目（二）BasePage实现

    一.BasePage介绍 创建一个BasePage类,对Selenium Api进行二次封装 为了快速创建项目并投产,用到的Selenium Api才进行封装,没用到的则不封装 优先封装最重要的几个方 ...