从宽高说起

从宽高说起,我们知道一个物体的大小是由长、宽、高三个方向的尺寸决定的,但是你想啊电脑显示器是一个平面的,而不是3维,另因网页大部分情况下只需要使用到2维,所以为了简单在CSS中只有宽和高的设置。

有了宽和高的概念以后,就会产生另外一个问题,如果内容超出宽和高以后是该显示还是隐藏呢?为了解决这个问题CSS提供了一个overflow属性,它允许你对元素内容超出后做相应的处理,然而很不幸的是不少人对overflow属性存在着误解,比如下面这段代码

<style>
  .box{
    width:200px;
  }
  span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
</style>
<div class="box">
  <span>CSS逻辑思维</span>
</div>

这段代码的写作者希望当span中的内容超出一行后显示省略号,但是他却忽略了一个事实,overflow只在当内容超出元素所设置的宽或高才会起作用,而写作者并没有给span设置宽度(当然也设置不了,因为它是行内元素),而又因行内元素的宽高是由内容决定的,也就是它的宽和高是自适应的,因此这段代码是有问题的,有些人会奇怪为什么块元素不设置宽度也可以实现文本溢出隐藏,首先你一定要明白一个道理overflow属性只在内容超出元素所设置的宽高才可以使用,如果没有超出哪来的溢出一说?再则CSS也不知道你需要在什么时候隐藏,它只能是在宽和高不够了才去做处理,而块元素之所以可以是因为它是满足这个条件的,也就是说尽管你没有手动去设置宽度,但是块元素它本身就有宽度(默认父元素的宽)。

而我们再来看看行内元素

很明显它的宽高是自适应的。

这也就是为什么行内元素无法给文本设置text-align对齐方式的原因。

再说css中的box-sizing

为什么CSS要新增box-sizing这个属性呢?如果我们把场景切换到现实生活中,你会发现生活中,我们很少去说类似我要买一个宽200cm,高150cm,边框8cm的显示器,而是说宽200cm,高150cm(一般说几寸)。

而在CSS3之前我们是无法直接去设置一个元素的宽度的,因为元素的宽度是由width + padding + border-left + border-right相加而成的,我们平时在CSS中设置的width并不是元素真正的宽,而只是内容的宽度,然而更多的时候我们是希望width是包含padding和border的,这也是为什么在CSS3中需要加box-sizing这个属性。

这个box-sizing一出世又有些人对box-sizing存在着疑惑,为什么没有box-sizing:margin-box;这一条?我想反问一句:你家房子外面的地盘是你家的吗?把这句话拿到前面这个问题:margin是width的吗?默念3遍,当然要让width包含margin也不是不能实现,只是这种情况需求很小,而且也可以通过其他方式实现。

打赏支持我写出更多好文章,谢谢!
打赏作者
+

(^_^)打个赏喝个咖啡(^_^)

微信支付
支付宝支付
Posted on 2017-04-23 21:47  追梦子  阅读(716)  评论(0编辑  收藏  举报