一、规则

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. git 删除和复制远程分支 储藏

    不常用到命令经常查,特别记录,方便自己开箱即用. 1. 删除本地分支 git branch -D <dev> 2. 删除远程分支 git push origin --delete < ...

  2. postgresql gin索引使用

    由于属于老项目,postgresql使用版本9.6,主要解决‘%name%"查询无法使用索引问题.pg_trgm模块提供函数和操作符测定字母,数字,文本基于三元模型匹配的相似性, 还有支持快 ...

  3. 前端笔记5-js1

    一.在JS中一共有6种数据类型1. String 字符串2. Number 数值3. Boolean 布尔值4. Null 空值5. Undefined 未定义6. Object 对象 其中 Stri ...

  4. webpack进阶用法你都get到了么？

    如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...

  5. 3.JavaSE之注释

  6. 头条一面竟然问我Maven？

    maven package和maven install 有什么区别? 你常用的maven命令有哪些? <dependencyManagement> 是干什么的? 还有用过其它构建工具吗? ...

  7. [uoj#34] [洛谷P3803] 多项式乘法(FFT)

    新技能--FFT. 可在 \(O(nlogn)\) 时间内完成多项式在系数表达与点值表达之间的转换. 其中最关键的一点便为单位复数根,有神奇的折半性质. 多项式乘法(即为卷积)的常见形式: \[ C_ ...

  8. Node.js实操练习(一)之Node.js+MySQL+RESTful

    前言 最近学习了一下node.js相关的内容,在这里初步做个小总结,说实话关于本篇博客的相关内容,自己很久之前就已经有过学习,但是你懂的,“好记性不如烂笔筒”,学过的东西不做笔记的话,很容易就会忘记的 ...

  9. MNIST数据集

    一.MNIST数据集分类简单版本 import tensorflow as tffrom tensorflow.examples.tutorials.mnist import input_data # ...

  10. 提供程序模式 提供 coding 一点点

    放个图先,预则立码