小知识

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. 简单的Git/GitHub

    什么是Git/GitHub Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 版本控制(Revision control)是一种在开发的过程中用于管理我们对文件.目录或工 ...

  2. 从0开始学杂项 第四期：隐写分析(3) GIF 图片隐写

    Misc 学习(四) - 隐写分析:GIF 图片隐写 在上一期,我主要讲了讲自己对于隐写分析中的 PNG 图片隐写的一些浅薄理解,这一期我们继续对隐写分析的学习,学习的是图片隐写中的 GIF 图片隐写 ...

  3. OpenHarmony自定义构建函数：@Builder装饰器

      前面章节介绍了如何创建一个自定义组件.该自定义组件内部UI结构固定,仅与使用方进行数据传递.ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循buil ...

  4. 基于OpenHarmony的智能金属探测器

    一.简介 智能金属探测器是基于 OpenAtom  OpenHarmony(以下简称"OpenHarmony")操作系统,利用电磁感应原理来探测周围的金属物体.该样例采用多设备协同 ...

  5. API 参考与帮助内容：一站式开发与使用者支援

    API 文档 API 文档是旨在了解 API 详细信息的综合指南.通常,它们包括端点.请求示例.响应类别和示例以及错误代码等信息.API 文档可帮助开发人员了解 API 端点的具体细节,并了解如何将 ...

  6. MySQL-ERROR 1701 (42000)

    清空具有外键约束的表时报ERROR 1701(42000)的解决 mysql> truncate table events; ERROR 1701 (42000): Cannot truncat ...

  7. HarmonyOS账号服务，畅行鸿蒙生态所有应用与服务

    账号对于用户来说并不陌生,在购买新设备或者使用新应用的时候,用户常常会被引导注册或者登录账号,账号就是用户在这些设备或应用内的通行证.根据华为上半年的一项统计,整体上中国网民人均下载App量在68个, ...

  8. 记录C++，读文件返回base64数据

    读文件返回base64函数: void CZZUser::hidFileToBase(const char* filePath) { // 文件 转 base64 // 计算文件长度 unsigned ...

  9. 比nestjs更优雅的ts控制反转策略-依赖查找

    一.Cabloy5.0内测预告 Cabloy5.0采用TS对整个全栈框架进行了脱胎换骨般的大重构,并且提供了更加优雅的ts控制反转策略,让我们的业务开发更加快捷顺畅 1. 新旧技术栈对比: 后端 前端 ...

  10. mysql 必知必会整理—组合查询与全文搜索[九]

    前言 简单整理一下组合查询与全文搜索. 正文 什么是组合查询,就是我们常说的交并补集. 直接上例子. 举一个例子,假如需要价格小于等于5的所有物品的一个列表,而且还想包括供应商1001和1002生产的 ...