进阶CSS

背景图片

1
2
3
4
5
6
7
8
body {
    background-image: url("tree.png"); /*背景图片*/
    background-repeat: no-repeat; /* repeat-x repeat-y 重复方向*/
    background-position: right top;  /*放置位置*/
    background-attachment: scroll; /*或者fixed*/
    background-size: cover;
    /*cover填满，contain等比缩放，或者 100px 100px*/
}

或者简写

顺序为 color, image, repeat, attachment, position

1
2
3
body {
    background: #ffffff url("tree.png") no-repeat fixed right top;
}

box-sizing: border-box;

使内边距+border+元素 = width or height

本来width设置之后，再加padding是会增加宽度的

设置高度和宽度范围

max-height: 1600px;

min-height: 500px;

max-width, min-width;

轮廓：outline

跟 border 差不多，但是它不算作是元素的宽高

outline: red solid 3px;

outline-offset: 20px; 轮廓与元素边框之间的空间；

图片与文字对齐

vertical-align: bottom; top, middle

文本

转换

text-transform: uppercase; lowercase, capitalize

间距

text-indent: 2em; 第一行的缩进

letter-spacing: 3px; 字母与字母

word-spacing: 5px; 单词与单词

white-space: nowrap; 默认是有换行

阴影

text-shadow: 2px 2px 5px red; 水平阴影，垂直阴影，模糊值，颜色

字体

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
1
2
font-family: "Times New Roman", Times, serif;
font-size: 10vw; viewpoint width  相当于自适应字体

列表

list-style-type: upper-roman; lower-alpha

list-style-image: url(‘pig.gif’);

不展现元素的方法

display: none; 元素彻底消失

visibility: hidden; 不可见，但依旧占位

position: sticky

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .b {
        position: sticky;
        top: 0px;
        border: 2px cyan solid;
    }
    .a {
        height: 1000px;
        width: 200px;
        border: red solid
    }
</style>
<div class='a'></div>
<div class='b'>
    我是有sticky属性的div
</div>
<div class='a'></div>

其作用是当 给定的 sticky 标签会像正常的位置排列，不会有任何变化，但是当滚动屏幕时，sticky 标签到达给定的 top 距离时，就不会再滚了， 定在那儿，相当于 relative + fixed

flex 双居中的方法

1
2
3
4
5
6
7
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 3px solid green; 
}

伪类

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

1
2
3
4
5
6
7
8
9
10
11
12
13
div:hover p {
  display: block;
}
/*设置当悬浮到div上时，p发生的变化*/

li a:hover:not(.active) {
    background-color: #ddd;
    /*除了.active其他都有hover属性*/
}

input[type=text]:focus {
  background-color: lightblue; /*鼠标点击输入框时候的特效*/
}

图像精灵

1
2
3
4
5
#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0; /*图片，以及要展示的图片定位*/
}

渐变

1
2
3
4
5
#grad {
    background-image: linear-gradient(to bottom right, red, yellow);
    /* position，color1， color2*/
    /*也可以用角度 90deg */
}

2D 转换

进行位移

1
2
3
div {
  transform: translate(50px, 100px);
}

进行旋转

1
2
3
div {
  transform: rotate(20deg);
}

等比缩放

1
2
3
4
div {
  transform: scale(2, 3);
  transform: scale(2);
}

倾斜

1
2
3
div {
  transform: skew(20deg, 10deg);
}

旋转点

1
2
3
4
5
div {
	transform: rotate(45deg);
	transform-origin:20% 40%;
    /* 横着的点，竖着的点 */
}

3D 转换

1
2
3
4
5
#myDiv {
    transform: rotateX(150deg);
    transform: rotateY(150deg);
    transform: rotateZ(150deg);
}
属性 描述
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

过渡

时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
    /* 过渡属性和时间 */
  transition-delay: 1s;
    /* 动画延迟生效 */
}

div:hover {
  width: 300px;
  height: 300px;
}

过渡速度曲线

transition-timing-function

  • ease - 默认，慢快慢
  • linear - 匀速
  • ease-in -慢快快
  • ease-out - 快快慢
  • ease-in-out - 慢快慢

过渡 + 转换

1
2
3
4
5
6
7
8
9
10
11
12
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

动画

@keyframes 规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example; /*指定动画名*/
  animation-duration: 4s; /*持续时间*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s; /* 延迟 */
  animation-iteration-count: 3; /*运行次数 也可以 infinite*/
  animation-direction: normal;
  /* 默认normal，reverse表示动画反着来，alternate表示先正再反，alternate-reverse表示相反的alternate*/
  animation-timing-function: ease; /* 同上过渡 */
  animation-fill-mode: forwards; 
  /*默认动画结束后会回到开始状态，这是这个可以改变动画结束后呈现的状态*/
  /* forwards（最后一帧）, backwards（第一帧）, both */
}

简写

1
2
3
4
5
6
7
8
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
1
2
3
div {
  animation: example 5s linear 2s infinite alternate;
}

图像滤镜

filter

图像适应容器

object-fit

CSS 变量

在 root 里声明变量代表全局变量，也可以在选择器里面声明，局部变量

格式是 两个破折号+名字：变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

flex 布局

在父容器加上 display: flex; 后，就可以使用 flex 的属性了

flex-direction （父元素属性）

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

其值有：row, column, column-reverse, row-reverse

flex-wrap（父元素属性）

flex-wrap 属性规定是否应该对 flex 项目换行。

其值有：nowrap, wrap, wrap-reverse

上面两个可以简写为

flex-flow: row wrap;

justify-content（父元素属性）

justify-content 属性用于对齐 flex 项目。

其值有

  • center 中心对齐
  • flex-start / end 开头 / 末尾 对齐
  • space-around 用 margin 均分剩余空间
  • space-between 两边靠边，用 margin 均分剩余空间

align-items（父元素属性）

align-items 属性用于垂直对齐 flex 项目。

其值有

  • center
  • stretch 拉伸填充容器（默认）
  • flex-start / end

align-content（父元素属性）

align-content 属性用于对齐弹性线。

同 justify-content，只是方向变了而已

order（子元素属性）

其值默认为 0，可以改成 数字

flex-grow（子元素属性）

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

默认为 0 ，可以改成 数字

flex-shrink（子元素属性）

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

默认为 1 ，可以改成 数字

flex-basis（子元素属性）

flex-basis 属性规定 flex 项目的初始长度。

flex-basis: 200px;

flex（子元素属性）

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

align-self（子元素属性）

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

媒体查询

1
2
3
4
5
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
1
2
3
4
5
6
7
8
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}