css笔记-1/css的学习思路

2018-04-19 本文已影响20人 joker731

CSS 3 核心思想

响应式
堆叠上下文
常见布局：Float 布局、Flex 布局
常见动画：Fullpage、轮播、3D 变化
常见组件：表单美化
常用工具
CSS 中要背的知识（各种不正交的知识点）
自己实现部分 bootstrap 功能
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去了,可以做出比较炫酷的效果,这就是难点所在,因为你深入专业是很多效果做不出来,也有反直觉的感受(不正交).

// 两个元素之间有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让他撑开父元素的高低大小.