CSS基础之块元素的宽高默认值

css基础之块元素的宽高默认值

width和height是css中最基础的属性了,一个块元素,只要设置了相应的宽度和高度,就会发生对应的变化。

我们知道，属性都有默认值，那宽和高的默认值是什么呢？ 我们写一个页面来试一下宽和高的属性

先在页面上写一个块元素

上面的代码中什么样式也没有写，我们打开浏览器看一下他的宽高

浏览器告诉我，这个div的宽度是551px,高度是0px;551px是我浏览器的宽度,我改变一下浏览器的宽度之后这个块元素的宽度度也随之改变了。那么

浏览器的宽度就是块元素的宽度吗？

我们换一种方法试试

这次我用了两个div块元素,给了第一个块元素300px的宽,在里面包的子元素的宽度没有给，我们再回到浏览器看一下

类名为max的元素宽度为300px,类名为small的元素宽度也是300px,刚刚

div的宽度是浏览器的宽度,为什么这次small的宽度是父元素的宽度呢？

我们再来看一下页面的构成,由html标签包着head和body构成,刚刚我们的div盒子就是写在了body元素的下面,也就是body元素的子元素，body元素和html元素的宽度就是浏览器的宽度,所以div元素的宽度也是父元素的宽度。

如果一个元素的宽度和父元素的宽度相等，我们就会认为他的宽度是100%;100%就是与父元素的宽度相等的宽度。

所以，我们块元素的宽度默认值为100%;与父元素的宽度相等,因此我们平时写代码的时候，如果块元素的宽度和父元素的宽度相等,就可以直接省略不写。

块元素的宽度默认值为100%,那么高度的默认值是多少呢？ 我们刚刚测试宽度的时候没有给元素高度，能看出来元素的高度一直都是0,那么块元素的高度的默认值是0吗？ 我们来写一个demo测试一下

这次我仍然在页面上写了两个div标签，但是这次两个标签是平级的,给了其中一个元素的高度为height:0;如果height的高度真如我们猜测默认值为0的话，这两个元素应该一样，写与不写没什么区别

我们打开浏览器看一下 类名和max和类名为small的高度都为0，宽度为浏览器的宽度,看上去好像没什么区别,我们在这两个元素中加入一段文字试一下。

按理说,元素中的东西都应该出现在浏览器当中,可是我们打开浏览器， 两句话居然重合在了一起。 主要是由于我们给其中的一个元素设置了高度为0,所以高度为0的元素没有高度，里面的文字和下一行的文字就重合在一起了。

难道块元素高度的默认值不是0？

我们再打开浏览器看一下这两个div盒子的高度有什么变化 设置高度为0的元素添加了文字之后高度仍然是0,没有设置高度的元素添加了文字之后高度就是文字所占的高度了。

我们多添加几行文字看看

文字的高度有多少,类名为small元素的高度就有多少

莫非块元素高度的默认值是元素里面内容的高度？

我们在里面放一点别的内容试一下

我们给了一个高度为300px的子元素，再来查看一下类名为small元素的高度。

刚好也为300px, 块元素高度的默认值确实是元素里面内容的高度决定的,用css中用代码表示就是height:auto;这句话的意思就是内容高度决定盒子的高度。

经过上面的两个测试，我们可以初步得出结论，块元素的默认高度是auto,一般情况下块元素不需要设置高度，直接使用默认值就可以满足大部分的排版需求,如果真的需要设置高度的时候也应当慎重考虑，因为如果设置的高度小于里面内容的高度，则会出现下面的元素盖住上面一部分元素的效果，看上去十分的难看。

今天给大家简单的介绍了一下css中最常用的height和width属性的默认值,以及使用它们时候的注意事项。

我们再来回顾一下,width的默认值是父元素的100%,一般情况下不用设置就可以满足需求。height的默认值是里面内容的高度,也就是auto,一般写代码的时候也不需要给元素设置高度,如果设置了高度而且设置的高度不够的时候，就会出现元素重叠的情况。

所以我们以后写代码时大多数情况下是不需要给块元素设置宽高的，默认值已经可以满足我们日常的大部分需求啦！

关于块元素的宽高默认值到这里也算是简单的介绍完成了，笔者能力有限，如果您在本篇文章发现了错误的地方,恳请您指出来,对本篇文章有什么建议和批评请不要吝啬，我真诚的期待您的只言片语。