小知识

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. #二分图匹配#洛谷 5771 [JSOI2016]反质数序列

    题目 给出 \(n\) 个正整数,问最大的子集使得任意两个数的和都不是质数 \(n\leq 3*10^3\) 分析 如果把两个数的和为质数连边,等价于求最大独立集. 由于只有偶数加奇数才可能产生质数( ...

  2. #虚树，树形dp#洛谷 4103 [HEOI2014]大工程

    题目 分析 建一棵虚树,然后树形dp,维护最长/短链和次长/短链, 对于第一个就是统计每条边有多少个点对经过就可以了 代码 #include <cstdio> #include <c ...

  3. JDK10的新特性:var泛型和多个接口实现

    目录 简介 实现多个接口 使用多个接口 使用var 总结 简介 在JDK10的新特性:本地变量类型var中我们讲到了为什么使用var和怎么使用var. 今天我们来深入的考虑一下var和泛型,多个接口实 ...

  4. OpenHarmony携千行百业创新成果亮相HDC.Together 2023

     8月4日-6日,华为开发者大会2023(以下简称"大会")在中国松山湖举办,OpenAtom OpenHarmony(简称"OpenHarmony")隆重参会 ...

  5. 许北林：我为什么加入OpenHarmony生态？又为什么要做“启航KP”开发套件？

    许北林 软通动力 资深项目经理 在全球开源趋势下,中国正逐渐成为全球开源软件的主要使用者和核心贡献者.今天我们来认识一位接触 OpenHarmony 不到一年,便带领团队成功开发出一款"启航 ...

  6. WCHAR 字符串拼接

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

  7. Bash与shell的区别

    Bash 与 shell 的区别 介绍 常见的 shell 解释器有 sh.bash 这两种,其他的 ksh.csh 和 zsh 等是不常见的.Mac OS 中默认安装了以上所有类型,Windows ...

  8. BTC的数据结构

    区块链是一个个block所构成的链,或者链表状的数据结构,在比特币中或者区块链中,一个重要的组成部分是哈希指针 指针 在程序运行过程中,需要用到数据.最简单的是直接获取数据,但当数据本身较大,需要占用 ...

  9. c# ManualResetEventSlim

    前言 后续会把异步编程的ManualResetEventSlim 深入写完,先简单介绍一下吧. ManualResetEventSlim 有set 方法和 reset .wait.dispose方法. ...

  10. 鸿蒙HarmonyOS实战-ArkUI组件（Canvas）

    一.Canvas Canvas组件是一种图形渲染组件,它提供了一个画布(canvas),开发者可以在上面绘制各种图形.文本等.Canvas组件通常用于创建游戏.数据可视化等需要动态绘制图形的应用程序. ...