0%

CSS技术总结

写CSS就是在写配置文件,到处充满了经验、技巧,要求对各种属性特别熟练。甚至很多地方是利用浏览器不完善边边角角,进而实现一些酷炫功能。

Layout布局

  1. 默认盒模型:margin,padding,width,height,background,border,max-height,overflow,box-shadow
  2. position定位,分为absulute,fixed,利用top, right, bottom, left,对某块内容进行定位布局
  3. flex,最大的作用就是把元素纵向排列,变成横向排列
  4. grid,和flex差不多,比flex功能更多一些,更复杂一点
  5. 为了适应不同宽度的终端屏幕,还有@media

Typography字体

  1. 基础的字体,大小,颜色:font-family,font-size,color,font-weight

  2. 行高,字间距:line-height,letter-spacing,word-spacing

  3. 对齐:text-align,vertical-align,

  4. 其他缩进,换行,变换:wrap,text-transform,text-decoration,text-shadow

伪类

  1. 常见的::before、::after、:hover。hover还是挺重要,很多效果通过hover实现很简单
  2. 还有些可以实现简单逻辑:first-of-type nth-of-type

动画

CSS3的动画,还挺厉害。

transform,若干个函数,旋转,移动,拉伸,还有3D旋转

transition可以指定某个属性的动画。transition,property、duration、time funtion、delay

最佳实践

规范,减少具体指定

定义变量

OO CSS: 分离container和内容,分离结构和skin

对CSS的感受

创建页面就2步

  1. create a HTML element

  2. CSS style the element

其实CSS就是对一个个的内容块进行装饰,达到设计稿的要求。可以多关注一些CSS类库,多看看MDN