CSS 知识总结

dan_n
158 阅读4分钟

CSS基础

学习资源

  1. mdn
  2. 张鑫旭 www.zhangxinxu.com/wordpress/c…
  3. css-tricks css-tricks.com/snippets/cs…
  4. CSS spec中文版 www.ayqy.net/doc/css2-1/…

层叠样式表

  1. 样式层叠
  2. 选择器层叠
  3. 文件层叠

语法

样式语法

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

at语法

常用的有以下3种，前两行必须分号结尾

@charset "UTF-8"; /*charset字符集Unicode，字符编码UTF-8*/
@import url("style.css");
@media (min-width: 100px) and (max-width:300px){
    语法1
}

文档流

规定文档元素的流动方向，分为inline, block, inline-block

宽度

  • inline：内部inline元素的和，不能用width指定
  • block默认自动计算宽度(width:auto)，可以width指定
  • inline-block结合前两者特点，默认和inline一样，但可用width指定，不会跨行

高度

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

📌注意

  1. 过时观点：元素分为块级和内联元素。可以用display指定
  2. inline元素内部不能有block
  3. width: 100%不等同于auto

溢出overflow

示例代码

  • visible 默认，可见
  • hidden 隐藏
  • scroll 永远显示滚动条
  • auto 超出才显示滚动条

📌注意

  1. 如果div内部没有内容，高度为0；span则不同，即使没有内容也会占据高度
  2. 示例代码中横向滚动条是第二个div设置宽度大于父容器造成，但父容器内部文字依旧遵循原来的宽度

脱离文档流

示例代码

3种方式

  • float
  • position: absolute
  • position: fixed

盒模型

  • 从外到内：margin, border, padding, content
  • content box：width只包含内容宽度
  • border box：width包含border, padding, content ✅

margin合并

示例代码

  • 兄弟元素margin合并
  • 父子元素margin合并

布局

float

兼容IE，不用于手机端

实现

子元素加float并设置width，父元素加上.clearfix

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

实践

用float实现两栏布局，三栏布局，平均布局（负margin） 代码

flex

A Complete Guide to Flexbox | CSS-Tricks

container的属性

dispaly, flex-direction, flex-wrap, justify-content, align-items, align-content

item的属性

order, flex-grow, flex-shrink, flex-basis, flex, align-self

实践

用flex实现两栏布局，三栏布局，平均布局（负margin）代码

grid

A Complete Guide to CSS Grid | CSS-Tricks

container的属性

  • display：grid / inline-grid
  • grid-template-columns，grid-template-rows 代码
  • grid-gap grid-column-gap grid-row-gap 设置item间隙 代码
  • grid-template-areas 代码

item的属性

  • 范围 grid-[column|row]-[start|end]
  • 区域 grid-area

实践

实现7张大中小图片展示 代码

定位

position

代码

relative

相对定位，升起来但不脱离文档流

absolute

脱离原来的位置，另起一层

不是相对于relative定位，相对于祖先元素中最近的一个定位元素（position不是static）

fixed

相对于视口

手机上尽量不要用这个属性

z-index层叠上下文

代码

  • 每个层叠上下文就是一个新的小世界，这个小世界里面的z-index和外界无关，处在同一个小世界的z-index才能比较
  • 哪些属性会创建层叠上下文 层叠上下文 - CSS（层叠样式表） | MDN
  • 负z-index与层叠上下文 代码

动画

1. 浏览器渲染过程

  1. 根据HTML文档构建HTML树
  2. 根据CSS构建CSSOM
  3. 两棵树合并成一棵渲染树render tree
  4. 布局 Layout （文档流，盒模型，计算元素的大小和位置）
  5. 绘制 Paint （边框颜色，文字颜色，阴影等）
  6. 合成 Compose （根据层叠关系展示画面）

更新样式

  1. div.style.xxx = 属性值
  2. classList添加样式 —— 推荐使用 ✔️
  3. div.remove()

更新样式会触发的流程

查询 www.lmame-geek.com/css-trigger…

  1. div.remove()
  2. 改变背景色
  3. transform

CSS动画优化

JS：requestAnimationFrame代替setTimeout或setInterval

CSS：使用will-change或translate

2. transform

developer.mozilla.org/en-US/docs/…

transform: none | transform-function

2.1 translate

developer.mozilla.org/en-US/docs/…

translateX(<length-percentage>) 指length和percentage两种

translateY(<length-percentage>)

translate(<length-percentage>, <length-percentage>)  ?表示可选

translateZ(<length>)

实现垂直水平居中 codepen.io/AmberWANGDM…

2.2 scale

developer.mozilla.org/en-US/docs/…

scaleX(<number>)

scaleY(<number>)

scale(<number>, <number>?)

2.3 rotate

developer.mozilla.org/en-US/docs/…

rotate(<angle>)

rotateZ(<angle>)

rotateX(<angle>) 绕X轴旋转，视觉上好像扁了

rotateY(<angle>)

rotate3d

2.4 skew

skewX(<angle>)

skewY(<angle>)

skew(<angle>, <angle>?)

3. transition

补充中间帧

语法

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

过渡方式参考 developer.mozilla.org/en-US/docs/…

注意

  • 最好不要写在hover里
  • 不是所有属性都能过渡，如display
  • display和visibility的区别：visibility可以实现过渡，但是设置为hidden元素依然占据位置
  • 过渡必须有起始，可能有中间点 代码

4. animation

developer.mozilla.org/zh-CN/docs/…

代码

语法

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

@keyframes 动画名 { 百分比 {} | from {} to {}}

CSS学习总结

  • 属性很多，以下知识点需要经常复习

    • 文档流
    • flex
    • 层叠上下文z-index
    • 浏览器渲染过程

  • 随用随查 keywords + mdn

avatar
文章
阅读
粉丝