css学习小结

css是什么？

css全名层叠样式表，英文名Cascading Style Sheets，如果看不懂没关系，如果说html是人的人体骨干的话那么css就是穿在人身上的衣服，光看人体虽有内容可光秃秃一览无余，但是穿上了美丽动人的衣服后就有婀娜多姿之彩，更能体现人体之美，而css就是充当装饰html作用的

总而言之，css就充当装饰html作用的，直接进入玄学世界吧
为什么这样可以？为什么这样又不行？又抽风了？WTF是什么鬼玩意是bug吗？css日常吐槽

---

css版本

CSS 2.1是现今应用最广泛的css版本了，自从2011年出来以后迄今为止已过9年了；但是CSS3不同以往。他是模块升级的产物。顾名思义，CSS已经被分为不同的模块，各自升级。如选择器，媒体查询，Color。可以尽情谷歌CSS spec查询功能。看文档。

---

css周边工具

LESS CSS：一种简化、功能更多的 CSS 语言
SASS：一种简化、功能更多的 CSS 语言
PostCSS：一种 CSS 处理程序

---

学习资源

谷歌关键词MDN
CSS Tricks + 关键词 此网站有各种CSS的特效技巧！
阮一峰 张鑫旭 等博客
codrops 里面有css实现的小控件
css揭秘--book
建议看英文书籍

---

css与html连接方法

1. 内联样式
2. style标签法
3. link外联样式

---

笔记部分（干货满满）

1. 文档流
   文档流是什么？文档流是文档内元素的流动方向，内联元素从左到右依次排开，块级元素则是从上往下依次排开且单个元素另起一行
2. div高度
   div的高度是由其内部文档流元素的高度总和决定的
3. 如何使用float来实现横向布局
   设置class：clearfix，在子元素上设置分别设置float然后在父元素上设置class：clearfix
   clearfix代码如下：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

4. max-width和width的区别就是width是固定宽度是写死的，不利于后续扩展；而max-width则是最大宽度，这个最大宽度可以自适应