CSS 的历史
注意中文维基百科严重落后了。
- 两个人合作发明了 CSS
1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。 - W3C 开始接管 CSS
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。 - CSS 2.1
1998年5月W3C发表了CSS2
CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。 - CSS 3
从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。这些模块有：- CSS 选择器 level 3
- CSS 媒体查询 level 3
- CSS Color level 3
- 更多请 搜索 CSS spec
- CSS 4?
不好意思，没有 CSS 4，只有各个模块的 level 4
周边工具
建议：先不要看周边工具，学好最朴素的 CSS，然后升级就很容易了。
CSS 学习资源
- Google: 关键词 MDN
- CSS Tricks
- Google: 阮一峰 css
- 张鑫旭的 240 多篇 CSS 博客
- Codrops 炫酷 CSS 效果
- CSS揭秘
- CSS 2.1 中文 spec
-
Magic of CSS 免费在线书
wallhaven网站，搜索壁纸。
阿里巴巴矢量图标库
Google: 关键词 generator ，可以直接复制生成的代码，不用自己写。
建议：中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。书的话作用不大，最权威的书其实是文档。
- 如果你想快速上手，就先写小 demo 再学理论。
- 如果你想一鸣惊人，就仔细看 CSS 规范文档。
浏览器版本低于IE8，不看、不管、不测试。
CSS 的四种引入方式
- 内联样式：给标签加 style 属性
- style 标签
- 外部样式：head 里面用 link 标签引入 css 文件
- 在 css 文件中，一般在第一行写
@import url(./b.css);引入其他 css 文件
如何做横向布局
float 浮动布局
浮动会有 bug，解决方法：
给所有子元素加样式 float:left，给他们的爸爸添加类class="clearfix"，
.clearfix::after{
content: '';
display: block;
clear: both;
}
知识点
body 的默认margin: 8px;
ul 的默认margin-top: 16px; margin-bottom: 16px; padding-left: 40px;
继承样式color: inherit;
透明边框border: 1px solid transparent;
设置display: inline-block;后，需要加个vertical-align: top;，否则会有bug。
:nth-child(1)可以缩写成:first-child。
文档流
文档内元素的流动方向。
内联元素从左往右流动，如果宽度不够，就换行继续从左往右流动。一个内联元素会换行分成两部分，但一个英文单词默认是一个整体不会被分开，可以用word-break: break-all;来分开。
内联元素的高度难以确定，和字体（设计的建议行高）有关，可以手动设置line-height。内联元素无法直接设置width、height，需要先display: inline-block;。
块级元素每个独占一行，所有块从上往下流动。可以用display: inline-block;或者float: left;的方法把块级元素放到一行。块级元素高度由其内部文档流元素的高度总和决定。
脱离文档流
脱离文档流后，你的父元素的高度就不会包括你。
方法：
-
position: fixed;，相对于窗口定位。
脱离文档流后，宽度缩起来了，需要width: 100%，然而又因为有padding，会导致超出父元素宽度，需要在里面新建个 div 用来设置padding。 -
position: absolute;，父元素写position: relation;，相对于祖先中的第一个position: relative定位。加上position: absolute后，内联元素会自动变成块级元素。
CSS 最容易出 Bug 的属性：height和width。
用max-width: 940px;比width好。
如果一个 div 写了宽度，可以用margin-left: auto; margin-right: auto;将其水平居中。
内联元素可以在其父元素上加text-align: center;的方式水平居中。
CSS 三角形
给一个 div 加如下样式：
border: 10px solid transparent;
width: 0px;
border-top-width: 0px;
border-left-color: red;
调整参数可以画出各种不同的三角形。
伪元素
所有非空标签内有两个默认隐藏的伪元素，::before和::after，伪元素需要加上样式content: "";才会显现出来。
伪类
li:nth-child(odd)用来选中第奇数个
li:nth-child(even)用来选中第偶数个
border-box
box-sizing: border-box;这种盒模型的border和padding算进盒子的宽度。
网友评论