CSS 3 核心思想
响应式
堆叠上下文
常见布局：Float 布局、Flex 布局
常见动画：Fullpage、轮播、3D 变化
常见组件：表单美化
常用工具
CSS 中要背的知识（各种不正交的知识点）
自己实现部分 bootstrap 功能
CSS 造轮子
css的历史
- ccs的发明者是李爵士的同事,当时开发出来就没怎么在意,就觉得是一个普通的东西,结果一用就用到了现在,//应该是1991-1992年左右发明出来的.
- 那在css出现之前,页面渲染是用什么做的呢?//以前是用html的标签,还有style标签,因为那时候就是用来看文章的.没想着太多的功能,其中style的使用,就是选择器,属性和值的由来.由于当初网页就是用来看文章的,为了更纯粹地写文章后来出现link标签,就相当于写word有模板一样,专心写文章,link一个模板就来就行了~~~ 后来随着产品需求越来越多,CSS就这样慢慢出现,慢慢和html分离.// 那么写文章是不是有打印出来的需求? 那么就出现一个问题,你的文章样式,打印机不能渲染出来啊~~~~ 所以link的模板就开发出了可以打印样式的模板
- 可以看出css的设计之初,想法特别简单: 你要什么功能我就加什么属性,你要颜色,就有了color;你要图文混怕,就有了float:;你要绝对行为,就有了position:absolute; 所以导致了一个很严重的问题:不正交,这就是css难的地方.
- 浮动的出现的原因,就是图文混排,当初的图片和文字不能对齐,观感不好,所以开发出float属性,让文字环绕图片的效果,但是当时没有考虑到,当定位和浮动都出现的时候,效果怎么处理,所以造成了一些不正交
- css的问题在于,你不会核心一些知识点,也可以做出好的效果,写css不需要复杂的逻辑.但是随着web开发越来越流行,越来越多人用css所以有人就专研css去了,可以做出比较炫酷的效果,这就是难点所在,因为你深入专业是很多效果做不出来,也有反直觉的感受(不正交).
CSS的核心知识点就是会使用工具,能背套路~~~,当遇到一个项目要求你做出某种效果,你要会google 出正确答案,并且实现它 // 深入学习也有好处,可以少bug用起来得心应手,深入学习的途径
- MDN
- CSS thick
- css3 generator //它可以帮你造css代码
不正交的具体体现: margin合并
// 两个元素之间有margin 会自动合并,如果其中有东西就不会合并
//其中有个特别的地方,中间有一个div,他的属性display:table或者display: flex // 就可以隔开,display:block不可以,这是试出来的~~~~ 还有很多例子,balbalbalbalba
学会常用的套路
- 布局的套路就
// 浮动+flex 工作前两年就干这些没有别的了(作者原话) - 水平居中
// 前提是块元素的时候
1:当父子元素,中的子元素宽度不确定的时候,直接用margin 0 (父宽度取半px);
2: 如果是有确定的宽度用margin 0 auto;
//这里的宽度不确定不是说不知道宽的值,而是宽的值并没有,或者说是随着其他因素改变,比如用了padding margin 没用确切的数值,所以才叫宽不确定 - 如果是inline元素呢? 直接在父元素中 text :center
垂直居中如何实现?
一般情况下,直接给子元素一个padding top bottom 固定一个数值就可以了
// 这个知识点,难在于: 父元素的值写死了,是一个确定的值,要求子元素垂直居中
//工作的时候一定要避免把高度写死,我们可以在子元素上加padding让他撑开 父元素的高低大小.
- 上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。
CSS 为什么难学
- 不正交，css中有很多属性与其他属性不正交，改变属性A可能改变属性B，如position：absolute会影响display：inline
- 属性多，难以一次性记下来
- css真正的核心是，会用工具解决项目中的效果
- 在就业方面来讲，性价比低。而且css升级很快，如果学得太慢会有挫败感
学不好 CSS得先会套路
- 别人研究出来我直接用即可（animate.css）
- css套路不多，不外乎布局，居中，文字省略，位置变换，动画过渡等等，学会套路可以应付日常工作80%
想认真学好 CSS？
- 通读 specs
- 20篇以上博客（张鑫旭）
- 做好「学了但是没有什么卵用」的心理准备
在写CSS的时候，万不得已不要设置固定高度，这是bug重灾区
- 要多看MDN
- 要多逛css trick
