小知识

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. #KMP，容斥，dp#洛谷 5770 [JSOI2016] 无界单词

    题目传送门 分析 显然如果存在长度大于一半的border那么必然存在小于一半的 border,所以容斥一下, 设 \(dp[i]\) 表示长度为 \(i\) 的不存在公共前后缀的字符串个数,那么 \( ...

  2. OpenHarmony Meetup 广州站 OpenHarmony正当时—技术开源

      招募令 OpenHarmony Meetup 广州站 火热招募中,等待激情四射的开发者,线下参与OpenHarmonyMeetup线下交流 展示前沿技术.探讨未来可能.让你了解更多专属OpenHa ...

  3. Python读写json文件--json

    import json # 将数据写入json文件 def json_write_file(): data={'name':'张三','age':12} with open('json.json',' ...

  4. MogDB/openGauss学习笔记-获取对象DDL

    MogDB/openGauss 学习笔记-获取对象 DDL 本文出处:https://www.modb.pro/db/399230 内置函数 omm2=# \df *def List of funct ...

  5. openGauss基于4路鲲鹏服务器的性能调优

    1.概述 本文主要描述了在4路鲲鹏服务器上,通过软硬件协同优化配置达到openGauss数据库的极致性能的方法. 主要包括软硬件要求.BIOS配置.网卡配置.磁盘配置.服务器参数设置.数据库参数配置. ...

  6. redis 简单整理——复制配置[二十二]

    前言 在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到 其他机器,满足故障恢复和负载均衡等需求.Redis也是如此,它为我们提 供了复制功能,实现了相同数据的多个Redis副本.复制功能 ...

  7. nohup训练pytorch模型时的报错以及tmux的简单使用

    问题: 在使用nohup命令后台训练pytorch模型时,关闭ssh窗口,有时会遇到下面报错: WARNING:torch.distributed.elastic.agent.server.api:R ...

  8. 论文记载：A Survey on Traffic Signal Control Methods

    ABSTRACT 交通信号控制是一个重要且具有挑战性的现实问题,其目标是通过协调车辆在道路交叉口的移动来最小化车辆的行驶时间.目前使用的交通信号控制系统仍然严重依赖过于简单的信息和基于规则的方法,尽管 ...

  9. 实训篇-Html-表格练习2

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 简述Linux磁盘IO

    1.什么是磁盘 在讲解磁盘IO前,先简单说下什么是磁盘.磁盘是可以持久化存储的设备,根据存储介质的不同,常见磁盘可以分为两类:机械磁盘和固态磁盘. 1.1 机械磁盘 第一类,机械磁盘,也称为硬盘驱动器 ...