CSS | width、height中auto与100%与固定值有什么不同

小鱼儿 2022-10-01 12:47 164阅读 0赞

auto是随内容的高度而撑开的。[100%][100]是根据父级元素的高度来决定的。

比如一个div在另一个div里面，如果外面的div高是100，

*  当里面div是auto的时候，如果div里面没有东西，它就没有高度，div里面的内容有多高，它就有多高，
 *  当里面div是100%的时候，无论里面有没有内容，它都和外面的div是一样高的

**总结：**

（1）width、height使用**固定值**是一定会显示的，但是除非是小型项目或是特殊情况，最好不要使用固定值。不利于响应式开发，当从移动端看页面就会非常不美观。

（2）不设置width、height时默认为**auto**，当position不同时显示效果不同，浮动可能会导致其不显示，需要清除浮动。

**width:auto**表示宽度是可变动的，这个div的所有部分（content+margin+padding+border）相加为父元素的width大小。

**height:auto**表示高度可变动的，如果div设置了auto但是却没有显示有三种可能：

1.content里没有能将其height支撑的子元素

2.由于定位和浮动导致其不显示，清除浮动或修改定位

3.width、height强制将子元素充满父元素的content。

（3）**width:100%**子元素的width值为父元素的width值，加margin时不改变子元素width值大小，而是溢出父元素。

**height:100%**不显示的原因可能为没有设置父元素的height，可以通过将父元素的height设为固定值或是将父元素及父元素           的父元素设置height:100%显示。

**        auto与子元素有关，100%与父元素有关**  
  
转自：[https://blog.csdn.net/r\_banyan0820/article/details/80956848 ][https_blog.csdn.net_r_banyan0820_article_details_80956848]

[100]: https://www.baidu.com/s?wd=100%25&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao
[https_blog.csdn.net_r_banyan0820_article_details_80956848]: https://blog.csdn.net/r_banyan0820/article/details/80956848%C2%A0

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java中接口与抽象类有什么不同？

在Java中，接口（Interface）和抽象类（Abstract Class）都是用来实现多态、代码重用等设计原则的。它们之间有以下几点不同： 1. **定义方式**：

向右看齐/ 2024年09月04日 05:24/ 0 赞/ 66 阅读

相关数组与集合有什么不同之处

这个问题其实就是一个非常基础的面试题，一般面试官想了解你基础知识方面的掌握时，基本都会问这个问题，尤其是一些，计算机学子毕业之后，如果还是想要从事计算机技术相关的行业时，那么在

「爱情、让人受尽委屈。」/ 2024年03月30日 13:02/ 0 赞/ 82 阅读

相关 TWAS分析与GWAS分析有什么不同

TWAS分析与GWAS分析有什么不同 TWAS (Transcriptome-Wide Association Study) 和 GWAS (Genome-Wide As

一时失言乱红尘/ 2024年03月26日 15:56/ 0 赞/ 77 阅读

相关 Hashtable 与 HashMap 有什么不同？

HashTable和HashMap都是常用的Java集合类，它们的不同之处如下：一、线程安全性： HashTable是线程安全的：即使多个线程同时访问HashTa

秒速五厘米/ 2024年03月22日 13:07/ 0 赞/ 25 阅读

相关什么是CSS的box-sizing属性？它有哪些取值，各有什么不同？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ CSS的box-sizing属性 ⭐ 取值 ⭐ 不同之处 ⭐ 写在最后 -----------

ゞ浴缸里的玫瑰/ 2023年10月14日 18:55/ 0 赞/ 20 阅读

相关 width为auto与100%的区别

我们平常在使用的时候width为auto与100%好像没有什么区别，但这里有一点点问题因为盒模型的box-sizing默认为content-box，而导致了当width为

柔情只为你懂/ 2023年07月23日 06:56/ 0 赞/ 31 阅读

相关 HttpComponents与Httpclient有什么不同

http component 和 http client 的区别概述 http component 和 http client 有什么区别? http cli

男娘i/ 2023年06月23日 13:16/ 0 赞/ 14 阅读

相关 Odoo与ERP传统软件有什么不同？

在国内，关于了解 ERP 的人来说，提起 ERP，第一印象就是浪潮、用友、金蝶以及国外的Sap，Oracle，而对于非开发人员（包括ERP施行参谋）来说，ERP不仅仅只是一个抽

太过爱你忘了你带给我的痛/ 2022年10月01日 14:57/ 0 赞/ 251 阅读

相关 CSS | width、height中auto与100%与固定值有什么不同

auto是随内容的高度而撑开的。[100%][100]是根据父级元素的高度来决定的。比如一个div在另一个div里面，如果外面的div高是100，当里面di

小鱼儿/ 2022年10月01日 12:47/ 0 赞/ 165 阅读

相关 JavaScript与java语言有什么不同？

整理了查到的所有信息总结了区别。 1 语言特点： 1.1 弱类型： JavaScript是动态的弱类型语言，使用前不需声明变量的数据类型； Java是静态类型语言，或称

今天药忘吃喽~/ 2022年05月16日 02:40/ 0 赞/ 244 阅读