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,一般写代码的时候也不需要给元素设置高度,如果设置了高度而且设置的高度不够的时候,就会出现元素重叠的情况。

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180616G1IU2900?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券