width:auto 和 width:100%有什么区别

宽度计算不同

<div class="parent">

	<span class="child">content</span>

</div>


.parent {

    width: 800px;

}

  • 当子元素 width: auto; 时

    width: auto = 'width' + 'padding-left/right' + 'border-left/right' + 'margin-left/right' < 父元素宽度

    即无论子元素有没有内外边距或者边框，宽度始终不会超过父元素

  • 当子元素 width: 100%; 时

    width: 100% = '父元素width' + 'padding-left/right' + 'border-left/right' + (margin-left/right)

    即当子元素有了内外边距或者边框之后，宽度会溢出父元素

width:auto 和 width:100%有什么区别的更多相关文章

  1. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  2. width:auto; 和 width:100%;的不同

    width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...

  3. CSS，height:auto和height:100%有什么区别？

    auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...

  4. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  5. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  6. width:100%和width:auto区别

    在div父元素是body时 1.先看没有width限制的div <div style="border:1px solid red; margin-left:50px; margin-r ...

  7. css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  8. 《CSS世界》读书笔记（三） --width:auto

    <!-- <CSS世界> 张鑫旭著  --> width:auto width:auto至少包含了以下4种不同的宽度表现: 充分可利用空间.比方说,<div>.&l ...

  9. div标签width:auto无效

    1,因为div标签默认是display:block,独占一行,宽度为父元素的100%,但是高度是auto,跟随内部内容而定.所以要想 设值父元素随子元素的宽高,那么就要设置div标签为display: ...

随机推荐

  1. Sunlogin RCE漏洞分析和使用

    介绍   前两天网上曝出了关于向日葵远控工具(Sunlogin)Windows个人版的RCE漏洞POC.因为利用简单并且网上出现了公开的自动化扫描脚本,所以测试的人很多,也出现了一些真实攻击.漏洞的问 ...

  2. node(s) didn‘t match node selector.

    k8s集群中,有pod出现了 Pending ,通过 kubectl describe pod 命令,发现了如下报错 0/4 nodes are available: 1 node(s) had ta ...

  3. shell切割nginx日志

    用linux自带的计划任务切割nginx日志,每天0点执行 #!/bin/bash #GuoYabin nginxpid=`/bin/ps aux|grep nginx |awk /master/'{ ...

  4. demo_2_27

    #define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>#include <string.h> int count_bit_one ...

  5. 渗透测试工具篇之目录扫描工具dirmap

    (一)dirmap介绍 一个高级web目录扫描工具,功能将会强于DirBuster.Dirsearch.cansina.御剑 (二)dirmap安装 打开浏览器输入https://github.com ...

  6. windows清理用户痕迹

    1.日志管理器的基本使用 在这里创建自定义视图是非常重要的 在设置自定义视图不必设置的事件日志选项太多,可以按日志也可以按源进行设置,根据自己的情况来做决定 在cmd下可以使用wevtutil cl ...

  7. 攻防世界-Crypto高手进阶区部分Writeup

    1.flag_in_your_hand && flag_in_your_hand1 下载,解压后 打开index文件,直接点击get flag错误,输入其他点击也同样 打开js文件,在 ...

  8. [MethodImpl(MethodImplOptions.Synchronized)]与lock机制

    [MethodImpl(MethodImplOptions.Synchronized)]与lock机制 在进行.NET开发时,经常会遇见如何保持线程同步的情况.在众多的线程同步的可选方式中,加锁无疑是 ...

  9. 【C#反射】Assembly

    Assembly属性的应用 //获取当前执行代码的程序集 Assembly assem = Assembly.GetExecutingAssembly(); Console.WriteLine($&q ...

  10. C#如何在安全的上下文中使用不安全的代码？

    文章原文:https://www.cnblogs.com/2Yous/p/4887904.html 从通常情况下来看,为了保持类型安全,默认情况C# 不支持指针算法. 不过,当你需要使用指针的时候,请 ...