小知识

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. #李超线段树，树链剖分#洛谷 4069 [SDOI2016]游戏

    题目 分析 就是把线段扔到了树上,注意区间查询要比较两个端点的函数值, 把区间赋值转换成两部分,从起点到LCA的区间是斜率为负数的线段, 从终点到LCA的区间是斜率为正数的线段. 代码 #includ ...

  2. 开发板如何适配OpenHarmony 3.2

      简介 OpenAtom OpenHarmony(以下简称"OpenHarmony") 3.2 Beta5版本在OpenHarmony 3.1 Release版本的基础上,有以下 ...

  3. 面试必备HashMap源码解析

    Map的实现有很多种,而HashMap算是最经典的实现之一了吧,在平时的使用中,绝大部分的使用也都是HashMap,我记得刚入行那会,脑子里对Map的使用就是Map map = new HashMap ...

  4. 一个库帮你快速实现EF Core数据仓储模式

    前言 EF Core是我们.NET日常开发中比较常用的ORM框架,今天大姚要分享的内容是如何使用EF Core Generic Repository通用仓储库来快速实现EF Core数据仓储模式. E ...

  5. 【Kotlin】扩展属性、扩展函数

    1 类的扩展 ​ Kotlin 提供了扩展类或接口的操作,而无需通过类继承或使用装饰器等设计模式,来为某个类添加一些额外的属性或函数,我们只需要通过一个被称为扩展的特殊声明来完成.通过这种机制,我们可 ...

  6. 6本值得推荐的MySQL学习书籍（有赠书福利）

    前言 在DotNetGuide技术社区交流群和微信公众号后台经常收到小伙伴们的留言,让我出一期MySQL相关学习书籍的推荐文章.因此,今天我特意为大家精选了 6 本值得推荐的 MySQL 学习书籍,希 ...

  7. WCHAR 字符串拼接

    LPCWSTR GetIniPath() { WCHAR buffer[MAX_PATH]; BOOL result = SHGetSpecialFolderPath(0, buffer, CSIDL ...

  8. Godot Label样式 Textrue纹理，实现样式修改，背景填充

    目录 前言 运行环境 新建项目 Style 样式讲解 StyleBoxEmpty:普通样式 StyleBoxTexture:字体样式 StyleBoxFlat:填充样式 StyleBoxLine:行样 ...

  9. 响应式系统与 React

    0x1 React 的历史与应用 应用场景 前端应用开发,如 Meta.Ins.Netflix 的网页版 移动原生应用开发,如 Ins.Discord 结合 Electron 进行桌面应用开发 发展历 ...

  10. nginx重新整理——————https[七]

    前言 简单介绍一些https. 正文 pki 公钥基础设施: 证书链: tls 通讯过程 验证身份 达成安全套件共识 传递秘钥 加密通讯 sudo yum install epel-release s ...