CSS3盒相关样式读后感

作为一个从工作一开始就是后台工程师的我，在独立开发自己的项目的时候，发现前端是自己迈不过去的坎。

不会前端，就会对网页开发存在一种恐惧，让自己对于独立进行网页开发有种恐惧感。

之前一直都是依赖美工的小伙伴，但是后来也野生的成长了一段时间，比如我自学使用了Bootstrap进行布局，也定位过一些页面的样式问题，同时，为别的小伙伴设计过页面的模板。所以，对于网页这块的知识也有了一点点自己的感悟。最近，我想要能够完整的掌握CSS布局这块的理论基础和套路，就阅读了《HTML5与CSS3权威指南》这本书。

CSS的内容是博大精深，功能万千，不是一两天，或者看看书就能够掌握的。需要的是多实践。目前我结合着自己的一些困惑，并且也想系统地了解下这块的知识，也是曾经坑我最多的地方。所以我就仔细的阅读了第22章《盒相关样式》，然后写下了自己的一点点心得体会。

元素类型分类

其实，页面的布局所用到的元素类型，总的来说就三大类：block（块级元素）类型，inline(内联元素)类型和inline-block（内联块级元素）类型。

1. 首先说一下什么是block类型：

   • block类型的特点是默认会占据父元素的一整。
     比如说，div元素，默认情况下回真用整个页面的一整行。当然，如果div元素包含在另外一个元素内部的话，也会默认占用父元素的一整行。block元素其实有很多。像是div，table，li等等元素都是block类型。
   • block元素还有一个特点是可以设置长和宽。
     网页布局的时候，可以通过设置block类型的长和宽来调整页面的整体样式和布局。
   • block类型如果不指定高度，它的高度就会随着内容的多少而变动。

2. 再说一下什么是inline类型：
   inline类型的元素和block类型的区别比较大，主要有以下几点

   • 多个inline类型的元素可以排列在同一行
   • inline类型的元素不可以设置长和宽，是没有大小的。内容有多少，它就有多大。
   • inline类型的元素主要有span,font 等

3. 最后再解释下inline-block类型：
   其实，inline-block类型和inline类型很类似，都可以：

   • 多个元素排列在同一行
     当然，区别从名字上面可以看出来，就是inline-block类型其实是一种特殊的block类型。Inline-block类型和inline类型的区别是：
   • 可以设置长宽高
     本质上，inline-block类型在页面上占据的是一个块，只是和block类型不一样的是，这个块不用占据整个一行，可以容得下其它的小伙伴和自己站在一起。

以上三种类型其实贯穿了所有的CSS的元素，因为所有的元素应该都是属于其中的一种。无论是div span table（table其实是一种独立的类型，但是其实本质上也可以归属到这三个大类中）。我们只要了解到以上三种的元素类型，对于页面布局也就可以有个基础的认识了。

改变元素类型

如果我们平时好奇的打开F12，查看页面上面元素，你会发现一些元素展示的和自己所学习过的并不一样。比如我们查看页面最上面的导航栏，你会发现，导航栏的每一个菜单竟然是<li> 元素。

然而这个和我们平时所学习的并不一样，因为我们学习到的 <li>元素其实并不是张这个样子的。正常情况下<li>元素其实长这个样子：

其实在这里面，就要涉及到一个非常重要的特点了：元素自带的类型，其实是可以改变的。

比如，我们可以把inline类型的元素通过CSS改成block类型，也可以把block类型的元素改为inline-block类型 等等操作。

上面的导航栏，其实就是我们把 默认为 block类型的 <li>元素改成了inline-block类型的结果。所以这个li元素没有点，并且展示在同一行中。

改变元素类型的方式，就是通过display属性来设置，请看下面的例子：

这个列子中可以看到，·

• · 元素已经被改为了 inline-block类型，并且横向排列。

• Overflow类型

  如果经常布局，那么对于块级元素超出元素本身容量的事情应该会常常遇到。比如表格中数据溢出，div中文字溢出等等。对于这种常见的情况，我们可以使用Overflow属性来进行样式控制。

  直接让文字溢出，不管不顾，这肯定是不行的。因此我们必须得保证得保证的是：
  1. 容器的大小是不能够随着内容的增多而改变的，这会破坏整个页面的布局。
  2. 超出当前容器大小的那部分内容，是不能够跑到容器的外部去展示的，这会破坏整个页面的布局。

  因此，我们需要Overflow属性来帮我们实现这么一些效果：
  超出容器的那部分内容，可以被隐藏起来让我们看不见。
  如果想看到隐藏起来的内容，我们可以通过滚动条等等一些效果。
  如果想要让我们知道有内容被隐藏了，可以在通过自动生成省略号的方式告知我们。
  Overflow属性有以下常用的配置项：

  名称	作用
  hidden	直接把超出的部分隐藏，不给我们看到
  Scroll	超出的部分会自动生成一个滚动条
  Auto	会根据需要自动生成水平方向或者垂直方向的滚动条

  
  
  以上可以解决大多数情况下的需求了，如果还有特殊需求的话，可以研究下，overflow-x、overflow-y和text-overflow等属性。