在CSS当中 , 我们通常使用@font-face来定义字体
除了可以引入外部字体之外 , 也可以给系统本地的字体定义别名
比如

1
2
3
4
5
6
7

@font-face {
  font-family : YH;
  src : local("microsoft yahei");
}
.font {
  font-family:YH;
}

这样我们就可以在需要使用这个字体的地方直接使用这个别名

阅读全文

使用上一节提到的transition已经可以实现相对简单的一些动画效果
但是对于相对复杂一些的效果 , 尤其是其中需要分为多个阶段的 , 就难以实现
CSS3的animation属性 , 就提供了更加强大的动画设计功能

阅读全文

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡
这种效果可以在鼠标点击 获得焦点 或对元素的任何改变中触发
并圆滑的以动画效果改变CSS的属性值

阅读全文

CSS3当中与动画有关的属性有 :

• transform - 变形
• transition - 转换
• animation - 动画

  阅读全文

Grid布局是网站设计的基础
是创建网格布局最强大和最简单的工具

FlexBox与Grid

FlexBox是一维布局系统 , 适合做局部布局 , 比如导航栏组件
Grid是二维布局系统 , 通常用于整个页面的规划
二者从应用场景来说并不冲突
虽然FlexBox也可以用于大的页面布局 , 但是没有Grid强大和灵活
二者结合使用更加轻松

阅读全文

熟悉flex布局方式以后 , 就会发现flex布局十分灵活
19.1当中提到的多列布局
使用flex都可以以十分简洁的代码搞定

阅读全文

Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
目前，它已经得到了所有浏览器的支持
Flex布局将成为未来布局的首选方案

阅读全文

常用的居中方法

1. 水平居中

   1 2 3

   <div class="parent"> <div class="child"></div> </div>

对于子元素的不同情况 , 需要进行不同的处理

阅读全文

媒体查询

媒体查询可以使用@media在css样式当中进行断点 , 让指定的css样式按照要求进行生效

1
2
3
4
5

@media (max-width:768px) {
  .box {
    color : red;
  }
}

上面写在媒体查询当中的css代码 , 在页面视窗宽度小于768px时生效

阅读全文