分享CSS中一些小细节，您注意到了吗？

在学习和使用CSS中发现了很多有趣的问题，这些问题基本上都是自己对于CSS理解不到位导致的，这里就和大家分享一些我在使用CSS过程中发现的小细节。

1. 内部样式和外部样式的”决斗”

我们知道，在HTML中使用CSS有三种方式，同时在很多资料中会看到 行内样式 > 内部样式 > 外部样式 的说法，也就是说当三种方式将样式添加给统一标签的话，我们可以按照这个原则确定最终产生的效果，因为有着这样一条规律，所以我认为所有在HTML中定义的样式都会比在外部样式文件中定义的样式优先采用，不过一次偶然的测试中，我发现并不是这样的。

在HTML中使用CSS，行内样式总会优先被采纳，这点毋庸置疑，但是对于内部样式和外部样式来说，最终采用哪个，却和它们的顺序有关，这也就是说在内部样式中定义的内容，我们可以放到外部样式文件来重新设置，只要把外部样式文件放到内部样式之后就可以了，不知道有多少在学习CSS的时候和我遇到过类似的情况。

2. CSS中的继承

在很多资料中，介绍CSS的时候，总会着重的提到，CSS不是编程语言，不过在学习CSS的时候我居然看到了一个继承的术语。如果您接触过Java之类的以面向对象为核心思想的编程语言，相信对于这个概念并不是很陌生，为什么CSS不是一种编程语言，却具备了一些编程语言的特点呢？

经过了解，我发现CSS中的继承并没有Java中那么复杂，它指的是在上级容器中定义的样式下级标签可以直接使用，这样我们不必重复的声明样式，减少了很多CSS代码，具体每个样式是否支持继承这个特点就需要我们慢慢积累了，不知道在您接触CSS的过程中是否留意过继承呢？

3. overflow 隐藏多少内容

初次接触CSS中的 overflow 样式，是在学习浮动的时候，我们可以用这个样式中的hidden 清除浮动带来的影响，这也是这个样式在开发中经常应用的场景，不过正是因为这个样式经常和边距、浮动结合在一起，所以造成很多误解。

曾经，我和同学在学习这个样式的时候，设置了一个 500 x 400 的容器，然后在里边添加了两个

标签，大小均是 400 x 400 ，添加了一些边距，同时让这个两个标签向左浮动，最后添加了 overflow 样式，结果我们在这个大容器仅看到了一个

对应的内容，那时候因为是初次接触浮动和盒子模型，所以我们天真的得出一个其他同学没有得出的结论，就是使用 overflow 会完全隐藏掉那些没有显示的内容，这个结论我相信了很久，直到后来在制作课程的时候才发现自己的推论是错误的，overflow 会隐藏掉一部分没有办法显示的内容，但不会完全隐藏。

4. 定位和浮动之后内容的大小

我们知道在默认情况下，浏览器对于网页中的内容按照从左到右、从上到下的顺序排列，如果我们没有设置容器的宽度，那么默认是 100% 显示，而高度默认为 0，这些规律是所有学习HTML和CSS的人都应该掌握的，不过如果采用float和position装饰之后的容器会出现怎样的效果呢？

对于浮动来说，它脱离了文档流，其他内容的排列会忽略它的存在，而浏览器中它的宽度也不再是 100%，以这个浮动元素中内容的宽度为准，如果没有内容，那么它的宽度就是 0，至于高度嘛依旧以内容为准；

对于绝对定位来说，它同样脱离了文档流，其他内容排列的时候同样会忽略它的存在，具体内容的宽度和高度也均以内容为准，如果没有内容的话，那么最终呈现在页面上的是一片空白，因为它的宽度和高度就是0；

固定定位的情况和绝对定位一样，因为它们同样都脱离了文档流，所以大小由内容实际大小决定；

但相对定位和上述三种情况完全不同，因为它并没有脱离文档流，所以它的宽度和高度和默认情况保持一致；

不知道上述这些情况您熟悉吗？之所以我一直在说CSS和HTML并不好学，并不是因为它们本身有多大的难度，只是因为在我看来，这两门开发语言有太多细节上的内容需要我们积累，需要发现，太过于琐碎，那么您在学习和工作中发现了哪些有趣的地方呢？