CSS 小白知识点-布局

过年那天写的,写了一半出去玩了,没写完,啦啦啦

display**

在去Google 块级元素行内元素有什么区别之前,先搞明白CSS中的displaydisplay是控制布局的关键,所有元素以什么样的角色展现,都是由display来控制的。


CSS 小白知识点-盒模型

CSS假定每个元素都会生成一个或者多个矩形框,这称为元素框(规范的将来版本可能允许非矩形框,不过对现在来说,框都是矩形的)。各元素框中心有一个内容区(content area)。这个内容区周围有可选的内边框、边框和外边框。——《CSS权威指南》

任何一个页面,都是由一个一个的盒子构成;而每个元素,其实都是一个矩形盒子,也就是所谓的盒模型;所以,写一个页面,无非就是把这些盒子按照一定方式进行排列,是不很简单——凡是都是盒子

以Google的开发者网站来展示:


CSS第三课 栅格系统

这一节内容我自己都觉得比较鸡肋,就当捧个场$_$,感兴趣的完全可以自行参考 uikitbootstrap 的实现,以及二者的差异。

实现自己的栅格系统,实现响应式布局

利用栅格系统,完成设计稿的第二块区域。学有余力的同学,可以尝试再用inline-block实现。

section two


CSS第二课 优雅
  1. 设定一个通用的排版样式
  2. 完成第一个模块


CSS第一课 你热了么

按照Sketch设计稿,实现一个完整的页面:

希望你学完这一些列课程后,能够系统地掌握CSS,真正把CSS玩转