伪类与伪元素

伪类

伪类包含两种：状态伪类（UI 伪类）和结构性伪类。

阅读更多

css 弹性布局

认识弹性盒子

阅读更多

概述

访问网页的设备有着不同的屏幕尺寸、分辨率和处理能力。

响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。

实现这一切的核心要素是：媒体查询（Media Query）。

阅读更多

Transform 属性

Transform | scale：更改元素的大小

CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。

举个雷子：

阅读更多

颜色渐变

• 背景色并不局限于单色，CSS 还提供了颜色过渡，也就是渐变
• background里使用linear-gradient()来实现线性渐变
• 下面是它的语法：

1

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);

• 第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

举个栗子：

1
2
3
4
5
6
7

div {
  border-radius: 20px;
  width: 80%;
  height: 100px;
  margin: 50px auto;
  background: linear-gradient(35deg, #ccffff, #ffcccc, rgb(204, 204, 255));
}

效果如下

线性渐变条纹

• repeating-linear-gradient()函数和linear-gradient()很像，主要区别是repeating-linear-gradient()重复指定的渐变。
• repeating-linear-gradient()有很多参数，此处只介绍角度值和起止渐变颜色值
• 角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13

iv {
  border-radius: 20px;
  width: 70%;
  height: 400px;
  margin: 50 auto;
  background: repeating-linear-gradient(
    45deg,
    yellow 0px,
    yellow 40px,
    black 40px,
    black 80px
  );
}

• 渐变开始于 0 像素位置的yellow，然后过渡到距离开始位置 40 像素的yellow
• 由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值black，然后过渡到距离开始位置 80 像素的red。
• 理解它是如何过渡的–
• 0px [黄色 -- 过渡 -- 黄色] 40px [黑色 -- 过渡 -- 黑色] 80px
• 如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。

position：定位

普通流：

• CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。
• 块级元素自动从新的一行开始（比如标题、段落以及 div），
• 行内元素排列在上一个元素后（比如图片以及 span）。
• 元素默认按照这种方式布局称为文档的普通流

  CSS 提供了 position 属性来覆盖普通流。

阅读更多

应用视觉设计

文本样式

text-align：文本对齐

使用 text-align 属性创建视觉平衡

text-align属性：控制文本的对齐方式****

• text-align: justify;两端对齐，即每行的左右两端都紧贴行的边缘。
• text-align: center;文本居中对齐。
• text-align: right;文本右对齐。
• text-align: left;是的默认值，文本左对齐。

^{和_{：文本上下标}}

阅读更多

盒模型：css 定义所有的 html 元素都可以拥有像盒子一样的外形和平面空间

标准盒模型(W3C 盒模型)

元素实际宽度： width+左右 padding+左右 border+左右 margin；

元素实际高度： height+上下 padding+上下 border+上下 margin

阅读更多

使用Vue实现对数据的增删改查

阅读更多