CSS知识总结

402 阅读5分钟

CSS基础

CSS英文全称为Cascading Style Sheets,意为层叠样式表,是一种样式表语言,用来描述HTML或XML等文档的呈现。它会告诉浏览器应该如何渲染文档中的元素。

CSS使用最广泛的版本为CSS2.1,支持IE浏览器;但目前使用的最新版本为CSS3。

1. CSS层叠的灵活性

  • 样式层叠

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

  • 选择器层叠

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

  • 文件层叠

    可以用多个文件进行层叠。

Tips: 请收藏Can I Use?来查看样式可被哪些浏览器支持。


2. 语法

为了把styles.cssindex.html联结起来,可以在HTML文档中,语句模块里面加上下面的代码:

<link rel="stylesheet" href="styles.css">
  • 样式语法

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

如:

h1{
    color: red;
}

或者:

.special {
  color: orange;
  font-weight: bold;
  }

等等。

  • at语法

@charset "UTF-8"(必须放在第一行) @import url(style2.css);

@media (min-width: 100px) and (max-width: 200px) {
    [样式语法]
}

3. Border调试大法

border: 1px solid red;

1. 怀疑某个元素有问题
2. 给该元素加border
3. 若border没有出现,说明选择器错了或者语法错了
4. 若border出现了,看效果是否符合预期
5. bug解决了才可以把border删除

4. 文档流

  • 流动方向

inline元素从左至右到达最右边才会换行,如span
bolck元素从上至下,每一个元素都独占一行,如div
inline-block元素结合了前两者的特点,从左至右,但是单个元素不会跨行。

如图所示:

文档流动方向

  • 宽度

inline: 宽度为内部各inline元素宽度之和,不能用width指定;
block: 默认自动计算高度,可用width指定;
inline-block: 可由width指定。

Warning: 永远不要写宽度为100%。

  • 高度

inline: 由行高line-height间接确定,与height无关;
block: ;由内部文档流元素的高度确定,可用height指定;
inline-block: 与block类似,可用height指定。

  • overflow溢出

当内容的宽度或高度大雨容器的宽/高时,会产生溢出的现象;
可用overflow属性设置是否显示滚动条,一般设置为:auto

  • 脱离文档流

使用下列属性的元素可以脱离文档流: float
position: absolut | fixed;

5. 盒模型

.box{
box-sizing: content-box | border-box;
}

content-box:内容盒,内容就是盒子的边界;
border-box:边框盒,边框才是盒子的边界。
border-box的宽度 = 内容宽度 + padding +border
一般使用border-box。

盒模型

CSS布局

  • 布局方式的选择

CSS布局方式的选择

1. float布局

  • 兼容IE 9之前的浏览器;
  • 不要用float布局手机页面!
  • 不要用float布局手机页面!
  • 不要用float布局手机页面!
① 子元素

设置float: leftwidth

② 父元素

设置

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}

现在基本不用,除非你必须兼容老版本的IE。

2. flex布局

  • 弹性框(父:flex container)与弹性块(子:flex items)

container

items

  • container的属性

1. display 声明容器类型
.container{
    display: flex | inline-flex;
}
2. flex-direction 主轴流动方向

主轴流动方向

3. flex-wrap 换行方式

换行方式

4. justify-content 主轴(默认横轴)对齐方式

主轴对齐方式

5. align-items 次轴(默认纵轴)对齐方式

次轴对齐方式

6. align-content 多行分布

多行分布

  • items的属性

1. order 排列顺序

order

2. flex-grow 拉伸比例

flex-grow

3. flex-shrink 压缩比例

默认值为1, 为0时防止压缩。

4. flex-basis 基准尺寸

默认值为auto

5. align-self item定制布局

align-self

6. flex 缩写形式
.item { 
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

这里有一个练习Flex布局的青蛙游戏 点击帮助青蛙回家吧~


3. grid布局

grid是一种二维的布局方式,是当前布局的发展方向。

1. display 声明容器类型

.container {
    display: grid | inline-grid; 
    }

2. 行与列

行与列

3. fr

free space 巧记:份

fr

4. gird-template-areas 分区

分区

分区效果

5. gap 间隙

gap

这里有一个练习Grid布局的小游戏,点击通关吧~


CSS动画

渲染原理,三种更新方式,CSS动画优化,transform,transition,animation

1. 浏览器渲染步骤

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

2.更新样式的方法

更新样式

3. CSS动画的两种做法

- transition

  • 作用

补充中间帧

  • 语法
transition: property duration timing-function delay;
            /*属性值 时长 过渡方式 延迟*/
  • 过渡方式
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

具体含义需查看文档 timing-function

代码示例

transition: margin-right 2s ease-in-out .5s;

Tips: 并不是所有属性都能过渡,如display: none → block
一般改写成visibility: hidden → visible

  • 处理多次过渡

方法1:使用多次tansform
方法2:animation

- animation

CSS Animations是CSS的一个模块,它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间,它们的重复次数以及它们如何重复来控制。

  • 子属性
说明
animation-name 指定由@keyframes描述的关键帧名称。
animation-duration 设置动画一个周期的时长。
animation-timing-function 设置动画速度, 即通过建立加速度曲线,设置动画在关键帧之间是如何变化。
animation-delay 设置延时,即从元素加载完成之后到动画序列开始执行的这段时间。
animation-iteration-count 设置动画重复次数, 可以指定infinite无限次重复动画
animation-direction 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-fill-mode 指定动画执行前后如何为目标元素应用样式。
animation-play-state 允许暂停和恢复动画。
  • 代码示例

1. from to

该例中<p>元素由浏览器窗口右边滑至左边

p {
  animation-duration: 3s;
  animation-name: slidein;
  }

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2. 百分数

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

参考资料

  1. 判断浏览器支持哪些特性
  2. CSS标准文档
  3. MDN
  4. css tricks
  5. 张鑫旭
  6. Freepik
  7. 365PSD
  8. dribbble设计师社区
  9. Flex青蛙游戏
  10. Grid Graden