复习css

徐铭源16211127
123 阅读2分钟

一、体系化学习css

1.语法:

    语法1:样式语法
    选择器{
     属性名:属性值;
    }
    
    语法2:@语法:
    @charset "uft-8";
    @import url(2.css)
    @media(min-width:100px) and (min-width:200px) {
        语法1
    }

2.文档流

inline元素(内联元素):可以多个元素占一行,不能指定宽度和高度,由内容填充,会切割自己
block元素(div元素):每一个元素独占一行,如果不设置宽度则默认填满
inline-block元素:多个元素占一行,不会切割自己


脱离文档流:float position:absolute fixed

可以用display设置这个属性

3.盒模型 image.png

从内到外
margin > border > padding > content

二、布局 1.flex布局

    display:flex;
    flex-direction:row/column;
    flex-wrap:warp;
    justify-content:center/sapce-between;
    align-items:center;
    一般使用flex布局就能解决所有问题，float和grid暂时没学

进阶技巧:

  1. css布局前提:*{margin: 0;padding: 0;box-sizing:border-box;}
  2. .face*5 按tab生成五个class = face的div 类似的有span{第$个元素}*8
  3. .a > .b {语法1} 有很多类似的选择器写法,可查阅mdn

4.position的用法：记住relative和absolute即可

父：position：relative
子：postion：absolute top: 10px;

注:absolute的文档解释:"生成绝对定位的元素，相对于 static(默认） 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。"

配合z-index和flex可以满足大部分css的需求了

三、动画 1.浏览器渲染过程

1. 根据HTML构建HTML树(DOM)
2. 根据CSS构建CSS树(CSSOM)
3. 将两棵树合并成一颗渲染树(render tree)
4. Layout布局(文档流、盒模型、计算大小和位置)
5. paint绘制(把边框颜色、文字阴影、阴影画出来)
6. compose合成(根据层叠关系展示画面)
   
*csstrigger上可以搜到各种代码在不同浏览器上的渲染过程*

2.前端高手不用left做动画

* JS优化:使用requestAnimationFrame代替setTimeout或setinterval
* CSS优化:使用will-change或translate
  1. transform
* 位移 translate
* 缩放 scale
* 旋转 rotate
* 倾斜 skew
>transform:scale(1.5);

## transition
* 作用:补充中间帧
* 语法:transition:属性名 时长 过渡方式 延迟
* 并不是所有属性都能过渡:display:none=>block 没法过渡,一般改成visibility:hidden=>visible

>transition:all 0.5s;
  1. @keyframes 声明关键帧
> @keyframes myheart<br/>
  {<br/>
      0%   {transform:scale(1.0)}<br/>
      50%  {transform:scale(1.2)}<br/>
      100% {transform:scale(1.0)}<br/>
  }

animation 
* animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 
>animation: rotate 5s linear 0s infinite alternate;

作业:heart.html: 16211127.github.io/htmlworks/h…

css代码:github.com/16211127/ht…

avatar
文章
阅读
粉丝