小知识

width:100%与width:auto区别

width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示;

width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。

所以，在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时，它将尽可能努力保持元素与其父容器的宽度相同。而width：100%将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。这通常会导致问题。

width:100%与width:auto区别的更多相关文章

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

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

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

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

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

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

  4. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  5. width:100%和width:inherit

    前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...

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

    width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...

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

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

  8. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  9. width、height为auto或者100%的区别

    一.规则 1. 某div不设置宽度,那么width默认为auto. 2. 某子元素div的width为100%(或者设置为等于父元素宽度的具体值,比如父元素width为100px,子元素width也设 ...

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

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

随机推荐

  1. C++ future

    promise 空模板 非 void 特化,用于在线程间交流对象 void 特化,用于交流无状态事件 类模板 std::promise 提供存储值或异常的设施,之后通过 std::promise 对象 ...

  2. #线段树#洛谷 2221 [HAOI2012]高速公路

    题目 分析 首先把收费站之间化为点,那这样即是区间加和区间查询, 考虑求的应该是 \[\frac{\sum a[i]*(r-i+1)*(i-l+1)}{C(r-l+2,2)} \] 分子可以拆成 \[ ...

  3. Mac 使用 Nginx 在本地部署静态网站

    安装 安装 Brew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/i ...

  4. 【福利活动】深度体验OpenHarmony对接华为云IoT

      本文主要介绍基于OpenHarmony 3.0来接入IoTDA,以BearPi-HM_Nano开发板为例,使用huaweicloud_iot_link SDK对接华为云物联网平台的简单流程.文末为 ...

  5. [llama懒人包]ChatGPT本地下位替代llama-7b，支持全平台显卡/CPU运行

    LLAMA的懒人包: 链接: https://pan.baidu.com/s/1xOw8-eP8QB--u6y644_UPg?pwd=0l08 提取码:0l08 模型来源:elinas/llama-7 ...

  6. 深入浅出 C 语言：学变量、掌控流程、玩指针，全方位掌握 C 编程技能

    C 语言简介 C 语言介绍 C 语言的特性 C 语言相对于其他语言的优势 C 程序的编译 C 中的 Hello World 程序 参考文章: C 语言入门:如何编写 Hello World C 语言函 ...

  7. RabbitMQ 04 直连模式-Java操作

    使用Java原生的方式使用RabbitMQ现在已经较少,但这是基础,还是有必要了解的. 引入依赖. <dependency> <groupId>com.rabbitmq< ...

  8. 报名启动丨HMS Core. Sparkle应用创新论坛

    图形领域将迎来哪些技术新进展?时下热门的3D.AR/VR和数字人等创新技术又会给应用开发带来哪些新的启发?以上问题,将在7月15日HMS Core. Sparkle应用创新论坛揭晓,赶快点击链接报名参 ...

  9. 财务人提高竞争力必备的技能，怎么能少了ta！

    从近年来大数据技术的发展趋势和相关产业飞速发展的状态,可以看出当前"数据分析"的热度可以说是有增无减,而且从市场上对数据分析人才的需求缺口也可以看出企业对数据分析的重视程度.未来随 ...

  10. 每日一题--Python打印金字塔

    def day1(num): s = 'abcdefghijklmnopqrstuvwxyz' * (num // 26 + 1) for i in range(1, num + 1): print( ...