CSS知识总结

用户5919911482690
314 阅读3分钟

CSS概述

CSS发明者

李爵士的同事赖先生

CSS特点：层叠

  • 样式层叠

    可以多次对同一选择器进行样式声

  • 选择器层叠

    可以用不同选择器对同一个元素进行样式声明

  • 文件层叠

    可用多个文件进行层叠

劣势：极度灵活带来的隐患

CSS版本

最广泛的版本（IE支持） CSS2.1 最新版本 CSS3

CSS文档流

什么是文档流

指的html元素正常情况下的布局流动方向

行内元素从左到右依次排列，自动换行 块级元素从上到下依次排列，独占一行

八个字概括：从左至右，从上到下

tips:行内块元素与行内元素的区别在于行内块元素不会跨两行

宽度

  • 行内元素的宽度由内部行内元素的总和决定，不能用width指定
  • 块级元素默认自动计算宽度（能多宽有多宽），可以用width指定
  • 行内块元素结合两者特点，等于内部行内元素宽度和，可用width指定

高度

  • 行内元素高度由line-height间接确定，与height无关（还会受字体影响）
  • 块级元素高度由内部文档流元素决定，可用height指定
  • 行内块元素和块级元素类似

如何脱离文档流

float position: absolute/fixed

CSS布局

布局种类

固定宽度布局，常见宽度：960/1000/1024 不固定宽度布局,靠文档流的原理来布局，常用与手机端页面 响应式布局：混合布局，PC端固定宽度，手机端不固定

float布局

步骤

子元素上加float和width 在父元素上加.clearfix

经验

  • 最后一个不设width
  • 不需要做响应式，因为这个布局是专门为IE准备的，手机端没有IE
  • IE6/7存在双倍margin-left bug，解决方法： 1.加一行_margin-left:一半px 2.加一行display:inline-block

浏览器渲染原理

步骤

  1. 根据HTML构建HTML树(DOM)
  2. 根据CSS构建CSS树(CSSOM)
  3. 将两棵树合并成一棵渲染树(render tree)
  4. Layout布局(文档流、盒模型、计算大小和位置)
  5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Composite合成(根据层叠关系展示画面)

三种渲染方式

  1. JS/CSS->样式->布局(layout)->绘制(paint)->合成(composite)
  2. JS/CSS->样式 -------------->绘制(paint)->合成(composite)
  3. JS/CSS->样式 --------------------------->合成(composite)

几个优化渲染的技巧

  1. 用transform代替left做css动画
  2. 使用requestAnimation代替setTimeout和setInterval
  3. 使用will-change或translate

CSS动画

实现动画的两种方式

  1. transition过渡实现

语法: transition：属性名 | 时长 | 过渡方式 | 延迟

选择器{
transition: all 1s ease 200ms;
}
  1. animation动画实现

语法：animation: 名字 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名

选择器{
animation: xxx 1.5s ease 200ms;
}
@keyframes xxx {
from { transform: none; } 
to { transform: translateX(100%); }
 }
avatar
文章
阅读
粉丝