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

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

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

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

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

总结：

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

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

  1.       **width:auto**表示宽度是可变动的，这个div的所有部分（content+margin+padding+border）相加为父元素的width大小。
  3.       **height:auto**表示高度可变动的，如果div设置了auto但是却没有显示有三种可能：
  5.            1.content里没有能将其height支撑的子元素
  7.            2.由于定位和浮动导致其不显示，清除浮动或修改定位
  9.            3.width、height强制将子元素充满父元素的content。

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

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

auto与子元素有关，100%与父元素有关

转自：https://blog.csdn.net/r_banyan0820/article/details/80956848

发表评论

表情：
评论列表 （有 0 条评论，198人围观）

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

相关阅读