一、规则

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. 【python系统学习06】一张图看懂列表并学会操作

    点击跳转-原文地址 数据类型 - 列表(list) 「目录:」 一张图了解列表 列表是什么 列表长啥样 语法格式 代码示例 格式特征 列表定义 列表操作 - 提取单个:偏移量 什么是偏移量 偏移量提取 ...

  2. java Random类（API）

    一.过程 1.导包 2.实例化 3.使用(类的成员方法) 二.作用 生成随机数,与python中random 相似 三.常用方法 1.nextInt(),随机生成int数据类型范围的数 2.nextI ...

  3. MySql查看修改l时区

    # 查看时区 show variables like '%time_zone%'; # 设置全局 set global time_zone='+8:00';  # 设置当前会话 set time_zo ...

  4. Apache Hudi 0.5.1版本重磅发布

    历经大约3个月时间,Apache Hudi 社区终于发布了0.5.1版本,这是Apache Hudi发布的第二个Apache版本,该版本中一些关键点如下 版本升级 将Spark版本从2.1.0升级到2 ...

  5. python读取txt打印（print）出乱码的问题

    如下图所示,print第一行首位出现乱码的问题 网上的解答是因为UTF-8的BOM前缀(\xef\xbb\xbf) 解决这个问题的方法很多,最快捷的方法是txt文本另存为的时候更改编码格式 将txt另 ...

  6. mysql创建流水号

    mysql数据库创建流水号 CREATE TRIGGER saledetail_id BEFORE INSERT ON saledetail FOR EACH ROW BEGIN declare n ...

  7. qq机器人 python实现 自动回复

    我以前写的代码我现在贴在了下面,下面的连接是我自己的博客,有问题希望大家提出来,一起进步...我以前试过,没啥问题.可以实现聊天. https://realwuxiong.github.io/blog ...

  8. devops与CICD

    前言 devops的概念已经在前一章已经说过了,下面介绍CICD的概念. CI(Continuous Integration,持续集成) 持续集成中,开发人员将会频繁地向主干提交代码,这些新提交的代码 ...

  9. springIOC源码接口分析(七):ApplicationEventPublisher

    一 定义方法 此接口主要是封装事件发布功能的接口,定义了两个方法: /** * 通知应用所有已注册且匹配的监听器此ApplicationEvent */ default void publishEve ...

  10. C#系列之Convert类型转换（三）

    知识点一: 类型如果相兼容的两个变量,可以使用自动类型转化或者强制类型转换,但是,如果两个变量不兼容,比如说String和int或者String和Double类型,这个时候我们就需要一种名叫conve ...