行内元素的空隙问题

行内元素之间有空隙，这是因为行内元素的排版规则，他会把换行符、空格、tab 等当做一个空格处理。

可以给父元素设置 font-size: 0;，然后给子元素设置 font-size，这样就可以解决行内元素之间的空隙问题。

<div class="box">
  <div>111</div>
  <div>111</div>
  <div>111</div>
</div>
<style>
  .box {
    width: 100px;
    height: 100px;
    border: red 1px solid;
    margin-left: 100px;
    /* font-size: 0; */
  }
  .box div {
    display: inline;
    background-color: blue;
    /* font-size: 16px; */
  }
</style>

取消注释即可，不取消的话俩个 div 之间有空隙

width / height

可选值：auto、百分比、固定值

宽高自适应

width的默认值就是 auto，他有这些含义：

• 充分利用可用空间：比如 div, p 的的宽度默认是 100%于容器的宽度
• 适应内容：比如 span, a 的宽度默认是适应内容的宽度，收缩到合适

margin / padding

外边距和内边距

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

box-sizing

用于定义文档如何计算一个元素的总宽度和高度。

• content-box: 标准盒子模型，默认值，宽度和高度只包括内容，不包括边框和内边距。实际宽度 = width + padding * 2 + border * 2
• border-box: 怪异盒子模型，宽度和高度包括内容、内边距和边框，即使设置了 padding 和 border，元素的宽度和高度也不会改变。实际宽度 = width

他们都不包括外边距 margin

box-shadow

定义元素的阴影，具体看文档吧

边框

border 就是 border-width、border-style、border-color 三个属性的简写，但是使用 border 定义的时候就只能定义四个边的宽度一样。单独使用 border-width 可以分别定义四条边宽度。

border-radius

设置元素的圆角，可以设置四个值，分别对应左上、右上、右下、左下的圆角。

字体

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 的简写，害必须按这个顺序，而且不能省略 font-size 和 font-family🤬

• font-family: 字体系列，可以设置多个，用逗号隔开，如果第一个字体不存在，就会使用第二个，以此类推。
• font-size: 字体大小
• font-style: 字体样式，可以设置为 italic 斜体，normal 正常，oblique 倾斜
• font-weight: 字体粗细，可以设置为 bold 粗体 700，normal 正常 400，lighter 更细，bolder 更粗，100-900 数字

文本

text-align

用于定义字体的水平对齐方式，可选值：

• left/right/center: 左/右/居中 对齐
• justify: 俩端对齐，但是最后一行不会对齐
• justify-all: 俩端对齐，包括最后一行
• start/end: 由文本方向决定，比如阿拉伯语，start 就是右对齐，end 就是左对齐

vertical-align

定义行内元素在行框内的垂直对齐方式

• baseline: 默认值，元素的基线与父元素的基线对齐
• sub/supr: 把当前盒的基线放在父元素的下标/上标位置
• top/bottom: 元素的顶端与行框的 top/bottom 对齐
• text-top/text-bottom: 元素的顶端/底端与父元素的顶端/底端对齐
• middle: 元素的中点与行框的中点对齐

text-decoration

他也是简写属性，用来定义元素的文本装饰

text-decoration: | |

text-decoration-line:

• none: 默认值，无装饰
• underline: 下划线
• overline: 上划线
• line-through: 删除线
• blink: 闪烁

text-decoration-style:

• solid: 实线
• double: 双实线
• dotted: 点线
• dashed: 虚线
• wavy: 波浪线

text-transform

定义文本如何转换大小写

• none: 默认值，不转换
• capitalize: 首字母大写
• uppercase: 全部大写
• lowercase: 全部小写
• full-width: 全角

text-justify

俩端对齐的方式

text-indent

块内文本内容的缩进

text-overflow

可以用来实现文本溢出时的省略号
要让他生效，需要定义 white-space: nowrap; 和 overflow: hidden;

• clip: 默认值，不显示省略号，直接裁剪
• ellipsis: 显示省略号

word-wrap

当内容超过指定容器的边界时是否断行

• normal: 默认值，不断行
• break-word: 强制断行

word-break

定义文本的字间和字符间的换行

• normal: 默认值，依据各自语言的规则，允许在字间发生换行
• keep-all: 对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行，Non-CJK 文本表现同 normal
• break-all: 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行
• break-word: 与 break-all 类似，但是不允许在连续的英文字符内换行

white-space

指定元素是否保留文本之间的空格、换行

• normal: 默认值，合并空白符，换行符
• pre: 原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同

   元素效果

• nowrap: 合并空白符，换行符，不换行

line-height

可以使用它来做垂直居中，默认是按照 base-line 对齐，可以用vertical-align: middle

背景

https://tsejx.github.io/css-guidebook/concept/properties/background

变换

transform

可以旋转、缩放、倾斜、平移元素

部分取值：

• translateX(x): 沿着 x 轴平移
• translate(x, y): 沿着 x、y 轴平移
• scale(x, y): 缩放
• rotateX(angle): 沿着 x 轴旋转
• rotate(angle): 旋转，需要先定义变形的原点(transform-origin)，然后再旋转

做个例题：用 css3 实现秒针的转动

<div class="clock">
  <dv class="second"></dv>
</div>

<style>
  .clock {
    width: 200px;
    height: 200px;
    border: blue 1px solid;
    border-radius: 50%;
    position: relative;
  }
  .second {
    height: 96px;
    width: 2px;
    background-color: black;
    position: absolute;
    top: 4px;
    left: 50%;
    transform-origin: 50% 100%;
    animation: rotateSeconds 60s linear infinite;
  }
  @keyframes rotateSeconds {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>

动画

animation

就是所有属性的简写，除了 animation-play-state

animation: name duration function delay count direction;

animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

animation-name

就是关键帧的名称，配合@keyframes 一起使用，需要设置运动时间，不然不会播放

<div class="box"></div>
<style>
  .box {
    height: 100px;
    width: 100px;
    background-color: blue;
    animation-name: move;
    animation-duration: 4s;
    position: absolute;
  }
  @keyframes move {
    from {
      left: 0px;
    }
    to {
      left: 200px;
    }
  }
</style>

animation-duration

动画持续时间，6s、0.5s、3ms

animation-timing-function

速度曲线，默认 ease

• linear: 匀速
• ease: 慢-快-慢
• ease-in: 慢-快
• ease-out: 快-慢
• ease-in-out: 很慢-慢-快-慢-很慢
• cubic-bezier(n,n,n,n): 自定义速度曲线

animation-delay

延迟时间，默认 0。可以为负数，-2s 让动画立刻开始，但是跳过 2s。

animation-iteration-count

动画播放次数，默认 1，可以设置为 infinite 无限循环

animation-direction

是否反方向播放，默认 normal

animation-play-state

可以用来控制播放动画的状态，暂停 paused，继续 running

过渡

可以把元素的样式从一种变换为另一种

规则

@font-face 自定义字体

@import 样式导入

一定要先于除了@charset之外的所有规则

@import './style.css';
@import url('style.css');

@keyframes 关键帧

指定动画名称和效果

@keyframes move {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}

@keyframes move2 {
  0% {
    left: 0px;
  }
  50% {
    left: 100px;
  }
  100% {
    left: 200px;
  }
}

@media 媒体查询