小知识

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. OpenHarmony自定义组件介绍

      一.创建自定义组件 在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件.在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑 ...

  2. 【直播回顾】OpenHarmony知识赋能五期第三课——多媒体整体介绍

    5月5日晚上19点,知识赋能第五期第三节课<OpenHarmony标准系统多媒体子系统整体介绍>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由深开鸿资深技术专家郭岳 ...

  3. 浅谈OpenHarmony LiteOS-A内核之基础硬件——中断控制器GIC400

    一.前言 OpenAtom OpenHarmony(以下简称"OpenHarmony")采用多内核架构,支持Linux内核的标准系统.LiteOS-A的小型系统.LiteOS-M的 ...

  4. Avalonia下拉可搜索树（TreeComboBox）

    1.需求分析   树形下拉的功能是ComboBox和TreeView的功能结合起来,再结合数据模板来实现这一功能. 2.代码实现   1.创建UserControl集成TreeView控件   2.将 ...

  5. 官方直播丨“Hello Ability：从页面跳转开始”周三晚不见不散

    12月8日 19:00-20:30,Hello HarmonyOS系列课程的第四期"Hello Ability:从页面跳转开始"线上直播,将带你学习如何快速通过JS page间.A ...

  6. MySQL 分析查询与来源机器

    当前分析针对版本:MariaDB 10.5 线上出现报错:can't create more than max_prepared_stmt_count statements.造成这个错误的直接原因就是 ...

  7. LRU缓存及其实现

    缓存是我们日常开发中来提高性能最直接的方式,经常会听到有人说:性能不行?是因为你没加缓存!常见的缓存有外部缓存服务以及程序内部缓存,外部缓存服务包括:Redis.Memcached等,内部缓存就是我们 ...

  8. 顺通鞋服进销存OA管理系统

    鞋服进销存OA管理系统通过十几年的积淀与创新,顺通与众多鞋服企业一起共创,形成了涵盖协同办公.移动办公.知识管理.数据运营.多维门户等领域,以鞋服新品研发管理.生产排班管理.门店一体化管理.市场费用管 ...

  9. Java实现查看手机配置与功能

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 代码 `` ...

  10. 如何将传统 Web 框架迁移部署到 Serverless 架构？

    简介: 与其说 Serverless 架构是一个新的概念,不如说它是一种全新的思路,一种新的编程范式. 与其说 Serverless 架构是一个新的概念,不如说它是一种全新的思路,一种新的编程范式. ...