CSS 知识总结

好的收不到
299 阅读6分钟

css历史

  • css由李爵士的挪威同事赖先生首先提出CSS，Hakon wium Lie，它是Web打印概念的倡导者，用HTML和CSS写书

（层叠样式表（Cascading Style Sheet，简称：CSS））

层叠指的是什么

  • 样式层叠（可以多次对同一选择器进行样式声明）

  • 选择器层叠 （可以用不同选择器对同一个元素进行样式声明）

  • 文件层叠 （可以用多个文件进行层叠）

    这些特性使得CSS极度灵活

CSS版本

版本 时间
CSS 1 1996
CSS 2 1998
CSS 2.1 2004-2011
CSS 3 1999年起草
CSS 4* 分模块升级

CSS浏览器支持的特性

方法1：几十种浏览器全部跑一遍

方法2：使用caniuse.com查看

CSS语法

  • 语法一：样式语法

    选择器{
	属性名：属性值;
	/* 注释*/
}

    ⚠️注意

    1. 所有符号都是英文符号，如果写错了。浏览器或警告
    2. 区分大小写
    3. 没有//注释
    4. 最后一个分号可省略，建议不省略
    5. 任何地方写错了，都不会报错，浏览器会直接忽略

  • 语法二：at 语法

    @charset "UTF-8";  必须分号结尾
@import url(2.css); 必须分号结尾
@media(min-width:100px) and (max-width:200px){
	语法一
}

    ⚠️注意

    1. @charset必须放在第一行
    2. 前两个at 语法必须以分号;结尾
    3. charset 是字符集的意思,但是UTF-8是字符编码encoding，是历史遗留问题

常见错误

  • 选择器拼写错误
  • 属性名拼写错误
  • 属性值拼写错误
  • 大小写错误
  • 没写分号
  • 中文冒号
  • 没写反花括号
  • 没加单位

需要了解几个重要概念

文档流(Normal Flow)

【注】新的HTML5的标准，元素不分为内联和块元素的，所有元素都可以是内联或块级元素的。只要你给了它display为什么值，它就是什么，可以随意改变。

  • 流动的方向

    • inline 元素从左到右，到达最右边才会换行
    • block元素从上到下，每一个都另起一行
    • inline-block 也是从左到右(和inline的区别，不会出现头在第一行尾在第二行，它拥有block的特点，不会处于两行中间)

  • 宽度

    • inline宽度为内部inline元素的和，不能用width指定(不要在里面添加dispaly:block的元素)

    • block 默认自动(auto)计算宽度(不是100%!!!),可用width指定

      【注】⚠!!! 永远不要写宽度100%

    • inline-block 结合前两者特点，可用width指定

  • 高度

    • inline实际高度由 line-height 间接确定，跟height无关
    • block 高度由内部文档流元素决定，可以设置height
    • inline-block跟block类似，可以设置height

overflow 溢出

当内容的宽度和高度大于容器的时候，会溢出

  • auto是灵活设置 （当内容的宽/高都超出时会显示滚动条）
  • scroll 不管宽或高是否超出都会显示滚动条
  • hidden 直接将溢出的部分隐藏
  • visible(默认) 直接显示溢出部分
  • overflow可以分为 overflow-x和overflow-y

脱离文档流

block的高度不会把脱离文档流的高度算在里面

  • float(浮动)：left/right/both
  • position:absolute(绝对定位)/fixed

两种盒模型

  • content-box 内容盒 （内容就是盒子的边界）

    公式：content-box width = 内容宽度

  • border-box 边框盒 （边框才是盒子的边界）

    公式：border-box width = 内容宽度+padding+border

margin合并

  • 哪些情况会合并

    • 父子margin 合并

    • 兄弟margin 合并

      <style>  /*parent和margin和第一孩子的和最后的孩子合并了*/
  .parent{
  margin:30px 0;
  background:green;
}
.child{  /*孩子之间的margin也互相合并了*/
  border:2px solid blue;
  margin:30px 0;
}
</style>
<div class="parent"> 
  <div class="child">第一个孩子</div>
  <div class="child">第二个孩子</div>
  <div class="child">第三个孩子</div>
</div>

      【注】只会合并上下margin，左右不会!!!!

  • 如何阻止合并

    • 父子合并用padding/border 挡住
    • 父子合并用overflow:hidden 挡住
    • 父子合并用display：flex
    • 兄弟合并是符合预期的
    • 兄弟合并可以用inline-block消除

基本单位

长度

  • px像素
  • em 相对于自身font-size 的倍数
  • 百分数
  • 整数
  • rem
  • vw和vh

颜色

  • 16进制#FF6600 或者 F60(只有两个相同的数字才可以这样写)
  • GRGBA 颜色 rag(0,0,0)或者rgba(0,0,0,1)
  • hsl颜色 hsl(360,100%,100%)

2.浏览器渲染原理

  • 根据HTML构建HTML树（DOM）
  • 根据CSS构建CSS树
  • 将两棵树合并成一颗渲染树（render tree）
  • Layout 布局（文档流、盒模型、计算大小和位置）
  • Paint 绘制 （把边框颜色、文字颜色、阴影等画出来）
  • Compose 合成（根据层叠关系展示画面）

3.CSS 动画的两种做法（transition 和 animation）

transition

  • 作用：补充中间帧

  • 语法

    • transition：prpperty(属性名,默认all 全部) duration(时长) timing-function(过渡方式) delay（延迟）

      transiton:1s;(直接默认为 all 1s)	
transition: left 200s linear;

    • 过渡方式有：linear(匀速)｜ease(默认，逐渐慢下）｜ease-in(加速)｜ease-out（减速）｜ease-in-out（先加后减）｜cubic-beaier|steps(4,end)(走四步到相应位置）| step-strart｜step-end

  • 可以过渡CSS

    • CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
    #demo{
  width:100px;
  height:200px;
  border:1px solid black;
  margin:50px;
  transition: 2s;
  background:yellow;

}
#demo:hover{
  width:200px;
  height:100px;
  background-color: #FFCCCC;
  transform:translateX(50px);
}

  • 注意：不是所有的属性都能过渡

    • display：none => clock 没发过渡
    • 一般改成 visibility：hidden => visible

  • 过渡必须要有起始（一般只有一次动画，或者两次，比如hover和非hover状态的过渡）

  • 除了起始，还有中间的有两种办法

    1. 使用两次transform

      .a = transform => .b

      .b = transform => .c

      如何知道中间点（用setTimeout 或者监听 transitioned事件）

    2. 使用animatio

      声明关键帧

      添加动画

animation

  • 缩写语法

    • animation：时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名

    • 时长：1s 或者1000ms

    • 过渡方式：跟transition取值一样

    • 次数：3 或者 2.4 或者 infinite(无限)

    • 方向：reverse(反向）｜alternate（正反交替）｜alternate-reverse（反向开始反正交替）

    • 填充模式：none｜forwards（停在结束位置）｜backwards（在延迟情况下让0%在延迟前生效）｜both（前面两个都有）

    • 是否暂停：paused｜running

      button.onclick = function(){
  demo.classList.add('start')
}
xxx.onclick = function(){
  demo.style.animationPlayState = 'paused'
}
yyy.onclick = function(){
  demo.style.animationPlayState = 'running'
}

    • 以上所有属性都有对应的单独属性

  • 让动画停在最后一帧

    animation:xxx 1.5s forwards;最后面加上forwards

  • @keyframes

    • 标准写法

      1. 搜索keyframes mdn

      2. 一种写法是from to

        @keyframes xxx{
	form{
	
	}
	to{
	
	}
}

      3. 另一种写法是百分数(广泛)

        @keyframes xxx{
  0%{
    transform:none;
  }
  50%{
    transform:translateX(200px);
  }
  100%{
    transform:translateX(200px) translateY(100px);
  }
}
avatar
文章
阅读
粉丝