在学习前端知识的过程中，我把HTML和CSS知识作为我的入门级语言来接收，从今天开始写关于CSS知识有关的博客，那么，今天简单介绍一下CSS知识的入门级常识。
了解一门语言，像很多课程一样，我们从来源和历史开始。
CSS出现在HTML（超文本标记语言）之后，在CSS出现之前，很多样式都是通过HTML本身的功能添加的，HTML最开始被发明是用来在互联网上发表论文或文章的，所以它需要的无非是居中或者调整文字大小等很基础的样式。HTML标签中也会有原始的样式，比如：h1标签，默认样式是字体加粗且字体大小32px。再比如，给网页的body标签加背景色，直接在body标签上添加属性bgcolor即可，居中使用标签<center>，改变字体大小使用font标签添加相应属性：
<body bgcolor='red'> <h1> <center> <font color="yellow">标题</font> </center> </h1> </body>
随着人们对网页效果的追求越来越高，有人发明了一种专门修改网页样式的语言，即：CSS。关于CSS的发明者也很少被后人知道，参考发明者为哈肯.维姆.莱和伯特.波斯。
在简单介绍了CSS的来源和发明者之后（请允许我厚着脸皮说我介绍了，良心告诉我连皮毛都算不上），我们说一说让我们一直捉摸不透的CSS。相信很多初学者和我有一样的感受，不知道哪里惹到了这个怪脾气的CSS，修改了一个样式，怎么变得和我想象的完全不一样，而且没有规律可循，在看了芳芳老师的这篇文章之后，CSS为什么这么难学，大致了解了一些。
总结一下芳芳老师的观点：CSS不正交，我们将在接下来的部分简单总结一下CSS不正交的具体示例。
除了CSS不正交这个主要原因之外，还有CSS属性多根本记不住，CSS的官方文档是英文对英语水平的要求高，更新速度很快等烦人的地方，好，接下来我们详细的说说CSS不正交的常见示例（请做好一头雾水的准备，刚在写博客的路上试水，请谅解）。
不正交大致分为两种：各属性之间相互影响和各元素之间相互影响。
i. 各属性之间相互影响
a）第一种情况：margin 和 border
同为兄弟关系：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .demo{ border: 1px solid red; height: 100px; margin: 10px 0; } </style> </head> <body> <div> <div class="demo"></div> <!-- <div style="border-top: 1px solid green"></div> // 第一种方法 <div style="display: table"></div> // 第二种方法 <div style="display: flex"></div> --> // 第三种方法 <div class="demo"></div> <div class="demo"></div> </div> </body> </html>
同为父子关系：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ outline: 0.1px solid red; // 把这一行换成border: 1px solid red; background: green; } .child{ height: 100px; margin: 100px 0; outline: 1px solid blue; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果图：
此时，父元素和子元素margin合并到一起，border和outline的区别：outline不占位置。
当把parent中的outline一行换成border时，parent的margin就消失了，只剩下child的margin。
border: 0.1px solid red;
综上，防止margin合并的方法有：加border、padding、display: table/flex/inline-block、overflow: hidden（不推荐）等几种方法。
b）第二种情况：列表小圆点和display
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /* li{ display: block; // 第一种情况：可以消除小圆点 display: table; // 第二种情况 display: flex; // 第三种情况 } */ </style> </head> <body> <ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> </body> </html>
c）第三种情况：position: absolute 和 display: inline
当给一个元素添加绝对定位时，即使定义了display: inline，也会被改成block。只有inline和inline-block会被改成block，其余的不变。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ border: 1px solid red; height: 100px; position: relative; } .child{ display: inline; position: absolute; bottom: 0; right: 0; } </style> </head> <body> <div class="parent"> <div class="child">文字</div> </div> </body> </html>
但是查看计算出来的属性，display显示为block。当position设置为flex时，也会被改。
d）第四种情况：width和margin-left，拿父子关系的元素举例：
<style> .parent{ border: 1px solid red; margin: 0 auto; padding: 10px; } .child{ border: 1px solid black; height: 130px; width: 300px; /*去掉这行的效果不是元素左移而是元素向左扩大10px*/ margin-left: -10px; } </style> <body> <div class="parent"> <div class="child"></div> </div> </body>
效果图：
e）第五种情况，margin: 0 auto; 能水平居中，但是margin: auto 0;为什么不能垂直居中呢，其实是可以的，只不过需要加上一些附加条件：
position: absolute; top: 0; bottom:0; 或者与flex布局结合起来使用。
<style> .parent{ background: yellow; height: 400px; position: relative; } .child{ background: red; height: 100px; width: 100%; margin: auto 0; position: absolute; top: 0; bottom: 0; } </style> <body> <div class="parent"> <div class="child"></div> </div> </body>
效果图：
f）transform 会影响 z-index，具体没有示例，后续补充
ii. 各元素之间相互影响
a）第一种情况：position: fixed 和 transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ border: 1px solid red; height: 100px; position: relative; transform: scale(0.9); } .child{ position: fixed; bottom: 0; left: 0; } </style> </head> <body> <div class="parent"> <div class="child">文字</div> </div> </body> </html>
效果图：
本来应该相对于窗口定位，变成了相对于父元素的定位。
b）第二种情况：float 和 inline元素，背景没有受到浮动元素影响，但是文字却能识别到浮动元素，正好满足了浮动的意义，文字包围图片。
<body> <div class="parent"> <div class="child1"></div> <div class="child2">文字</div> </div> </body> <style> .parent{ border: 1px solid red; height: 150px; } .child1{ background: rgba(255,0,0,0.6); height: 60px; width: 60px; float: left; } .child2{ background: yellow; height: 110px; width: 110px; } </style>
综上，我们介绍了这么多CSS不正交不合乎常理逻辑的地方，其实CSS在实际的工作中没有太多的套路，用得到的也没有太复杂。接下来我们就简单说说CSS好理解的几点：
- 布局：无非两种情况：PC端和移动端，PC端要考虑是否兼容IE8，如果需要兼容IE8，则一律使用float，不兼容和移动端则使用flex布局。
- 居中：水平居中和垂直居中（相对复杂一点），后续博客会详细介绍。
- 文字溢出：一行文本溢出和多行文本溢出。
- 取巧的方法：搜索CSS3 generator，造代码。