从逻辑思维中学习CSS，从宽高说起

从宽高说起

从宽高说起，我们知道一个物体的大小是由长、宽、高三个方向的尺寸决定的，但是你想啊电脑显示器是一个平面的，而不是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也不是不能实现，只是这种情况需求很小，而且也可以通过其他方式实现。