一、规则

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. LeetCode 第98题--验证二叉搜索树

    1. 题目 2.题目分析与思路 3.代码 1. 题目 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当 ...

  2. Java入门 - 面向对象 - 02.重写与重载

    原文地址:http://www.work100.net/training/java-override-overload.html 更多教程:光束云 - 免费课程 重写与重载 序号 文内章节 视频 1 ...

  3. 使用 LinkedBlockingQueue 实现简易版线程池

    前一阵子在做联系人的导入功能,使用POI组件解析Excel文件后获取到联系人列表,校验之后批量导入.单从技术层面来说,导入操作通常情况下是一个比较耗时的操作,而且如果联系人达到几万.几十万级别,必须拆 ...

  4. spring boot部署中executable的系统服务

    首先在pom.xml 中添加spring boot插件,并设置 <plugins> <plugin> <groupId>org.springframework.bo ...

  5. 「4.0」一个人开发一个App，小程序从0到1，布局

    一提到布局这个词,我总是索索发抖,不是因为天冷,而是因为布局的目标实在太宏大.古代想雄霸天下的王,就喜欢布局这个,布局那个,结果硬生生把自己的国家给布局没了.至于是哪个君王,我倒可以非常认真,非常坦诚 ...

  6. 靶机-BTRSys 2.1 Walkthrough

    BTRSys 2.1 https://www.vulnhub.com/entry/btrsys-v21,196/ 参考:https://www.jianshu.com/p/9813095ce04d 提 ...

  7. selenium-第一个自动化脚本

    经过上一篇的环境搭建,这一篇我们开始编写第一个自动化脚本. 一个简单的测试百度的demo #coding=utf-8 from selenium import webdriver driver = w ...

  8. 团队项目-Beta冲刺1

    博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业要求在哪里 https://w ...

  9. larabel Artisan Command 使用总结

    larabel Artisan Command 使用总结 定义命令 在routes/console.php下定义命令 Artisan::command('ltf', function () { (ne ...

  10. JDK源码之String类解析

    一 概述 String由final修饰,是不可变类,即String对象也是不可变对象.这意味着当修改一个String对象的内容时,JVM不会改变原来的对象,而是生成一个新的String对象 主要考虑以 ...