vue

css基础

Posted by アライさん on 2022年03月31日

一、样式

1
<h2 style="color:red;">红色</h2>

长宽单位：

  • px：像素
  • %：百分比
  • in：英寸
  • mm：毫米
  • em：根据父级字体尺寸。如果字体是12pt，那么2em就是24pt。
  • rem：根据根级别字体尺寸（html的字体尺寸）。
  • vw：10vw = 视窗宽度的10%尺寸
  • vh：10vh = 视窗宽度的10%尺寸
  • vmin：10vmin = 视窗长宽中较小的一个的10%尺寸
  • vmax：10vmax = 视窗长宽中较大的一个的10%尺寸
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!-- 引入Lobster字体 -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  /* root中的变量可被后面的选择器继承 */
  :root {
      /* 定义变量penguin-skin为灰色 */
      --penguin-skin: gray;
  }
  
  /* 当屏幕尺寸小于350px时，使用下面的属性 */
  @media (max-width: 350px) {
    :root {
      --penguin-size: 200px;
      --penguin-skin: black;
    }
    /* p标签的字体大小 */
    p {
      font-size:20px;
    }
  }


  /* 为所有h2标签设置默认颜色，优先级低于直接在h2标签中设置 */
  /* 使用变量--penguin-skin的颜色，取不到则为红色 */
  h2 {
    color:var(--penguin-skin, red);
    display:flex;
    /* 排列方式：row、column、row-reverse、column-reverse */
    flex-direction:row-reverse;
  }
  .customStyle {
    /* 可以覆盖root的属性 */
    --penguin-skin: white;
    color:red;
    font-size:16px;
     /* 优先使用Lobster字体，不行的话使用monospace */
    font-family: Lobster,monospace;
  }
  .thick-green-border {
    width:100px;
    /* !important代表这个样式级别最高，不会被其他同属性取代 */
    border-color: green!important;
    border-width: 10px;
    border-style: solid;
    /* border-radius可以设置10px，或者百分比 */
    border-radius: 50%;
    background-color:#000000;
    opacity:0.5;
    text-transform:uppercase;
    font-weight:300;
    line-height:25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  /* id="hello"的样式 */
  #hello {
    /* 背景色 */
      background-color:silver;
    /* h代表色环角度，s代表饱和度，l代表亮度 */
    background-color:hsl(0, 100%, 50%);
    /* 线性渐变色。deg是角度，从哪个位置开始。后面几种颜色，代表渐变的几种颜色 */
    background:linear-gradient(35deg, #CCFFFF, #FFCCCC);
    background:linear-gradient(35deg, #CCFFFF, #FFCCCC,#000000);
    /* 线性渐变色。deg是角度，从哪个位置开始。后面几种颜色，不同位置的起止颜色 */
    repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
    background:url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
    /* 内容色（文字颜色） */
    color: #fff;
    padding: 20px;
    margin: -20px;
    /* 水平居中 */
    margin:auto;
    padding-top:40px;
    padding-right:20px;
    padding-bottom:20px;
    padding-left:40px
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
    padding:10px 20px 30px 40px;
    /* in代表英寸、mm代表毫米、em、rem都是相对尺寸 */
    padding-bottom:1.5em;
    position:relative;
    position:absolute;
    /* fixed代表固定，比如固定在上方，不随网页滚动 */
    position:fixed;
    top:15px;
    /* 靠右 */
    float:right;
    /* 堆叠的顺序，越大越在上层 */
    z-index:2;
    /* 放大2倍 */
    transform:scale(2);
    /* 沿X轴倾斜24度（变成平行四边形，不是旋转） */
    transform: skewX(24deg);
  }
  
  /* 所有type为checkbox的都会用这个样式 */
  [type='checkbox'] {
    margin:10px 0px 15px 0px;
  }
  
  /* 设置标签a的hover属性的颜色 */
  a:hover {
    color:blue;
  }
</style>
<h2 id="hello" >16px红色文本</h2>
<div class="thick-green-border"></div>
<!-- 同时使用2种样式class -->
<img class="customStyle thick-green-border" scr="url">

样式优先级

带有!important的样式级别最高。
其次是标签的style属性中的样式。
然后 id样式 > class样式
style中class样式后定义的 > class前定义的

二、动画

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {
    /* 要使用的动画名 */
    animation-name:rainbow;
    /* 一次循环用时 */
    animation-duration:4s;
    /* 动画结束后定格在结束状态，不填默认是恢复到最初状态 */
    animation-fill-mode: forwards;
    /* 动画循环次数，infinite代表无限循环 */
    animation-iteration-count: 3;
    animation-timing-function:ease-out;
    /* 手动设置的贝塞尔曲线 */
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  }

  /* 关键帧动画 */
  @keyframes rainbow {
    /* 0%时的颜色和位置 */
    0% {
      background-color:blue;
      top: 0px;
      opacity:1;
    }
    50% {
      background-color:green;
      top: 50px;
      opacity:0.1;
    }
    100% {
      background-color:yellow;
      top: 0px;
      opacity:1;
    }
  }




</style>
<div id="rect"></div>

三、Flex弹性盒子

父元素设置：display: flex;

justify-content

  • flex-start

  • flex-end

  • space-between

  • space-around

  • space-evenly

align-items(相当于crossAxisAlignment)

  • flex-start

  • flex-end

  • center

  • stretch：拉伸填满容器

  • baseline：文字基线对齐

flex-wrap

  • nowrap：不换行
  • wrap：从上往下、从左往右，自动换行
  • wrap-reverse：反向，从下往上、从右往左，自动换行

flex-grow、flex-shrink

flex-grow相当于Expanded(flex:1)

flex-shrink相当于反的Expanded(flex:1)

  • flex-shrink:1; flex-shrink:2;

    2比1小一半

  • flex-grow:1;flex-grow:2;

    2比1大一倍

flex-basis

设置尺寸。

flex-basis：20em;

flex-basis：auto;

flex:1 0 10px;

组合设置。

第一个数字代表flex-grow

第二个数字代表flex-shrink

第三个数字代表flex-basis 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- box1和box2的总宽度是300px。 -->
<!-- 当页面大于300px时，采用flex-grow。box1是box2的2倍 -->
<!-- 当页面小于300px时，采用flex-shrink。box1是box2的一半 -->
<!-- 当页面等于300px时，大家都是150px -->
#box-1 {
  background-color: dodgerblue;
  flex:2 2 150px;
  height: 200px;
}

#box-2 {
  background-color: orangered;
  flex:1 1 150px;
  height: 200px;
}

align-self

不同的子元素，使用自己的align-items。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#box-container {
  display: flex;
  height: 500px;
}
#box-1 {
  background-color: dodgerblue;
  align-self:center;
  height: 200px;
  width: 200px;
}

#box-2 {
  background-color: orangered;
  align-self:flex-end;
  height: 200px;
  width: 200px;
}

order:1;

order属性，可以强行调整html元素顺序。

默认先写的元素在前，后写的在后。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    #box-1 {
    background-color: dodgerblue;
    order:2;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    order:1;
    height: 200px;
    width: 200px;
  }
</style>

<!-- 通过上面的order设置，强行调换了box顺序。实际显示时，box2在左边或上面-->
<div id="box-1"></div>
<div id="box-2"></div>

四、grid网格

自身设置display:grid;

  • grid-template-columns:100px 200px 300px; 3列，宽度分别是100px,200px,300px

  • grid-template-rows:50px 100px; 2行，高度分别是50px,100px。

  • grid-template-columns: auto 50px 10% 2fr 1fr; auto代表它自己的尺寸。%代表容器尺寸的百分比。fr代表占剩余空间的比例。

  • grid-column-gap:10px; 列的横向间距为10px。

  • grid-row-gap:5px; 行的竖向间距为5px。

  • grid-gap:5px 10px; 只有一个值，代表行列间距都这个值。

    有2个值，前一个代表行的竖向间距。后一个代表列的横向间距。

  • grid-column: 2 / 4; 代表这一个格子，占据2～3列。

  • grid-row:2 / 4; 代表这一个格子，占据2～3行。

  • justify-items:center; start、center、end。所有子cell的横向方向对齐方式。

  • align-items:end; start、center、end。所有子cell的竖直方向对齐方式。

grid-template-areas

1
2
3
4
5
grid-template-areas:
  /* 单元格分为4个区域，分别是header、advert、content、footer */
  "header header header"
  "advert content content"
  "advert footer footer";

grid-template-areas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  grid-template-areas:
    /* 单元格分为4个区域，分别是header、advert、content、footer */
    "header header header"
    "advert content content"
    "footer footer footer";
}

.item5 {
  background: PaleGreen;
  /* 由于grid-template-areas中设置了footer占了第3行的3列，所以item5也会占据那么多 */
  grid-area:footer;
    /* 这4个数字分别代表，占据水平的第3线，垂直的第1线，水平的第4线，垂直的第4线之间 */
    grid-area: 3/1/4/4;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 可以用这种方式，在不同窗口大小下，调整元素位置 -->
@media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

  @media (min-width: 400px){
    .container{
      grid-template-areas:
        "header header"
        "advert content"
        "footer footer";
    }
  }

cell

  • justify-self:center; start、center、end。子cell的对齐方式。

repeat方法

grid-template-columns:repeat(3,1fr) 20px;

repeat(2, 1fr 50px) 20px;

repeat的第一个数字代表重复多少次。
1fr 50px代表 第1个格子1fr，第2个格子50px, 第3个格子1fr,第4个格子50px….循化n遍。
最后一个20px代表最后一个格子的尺寸。

repeat(3, minmax(90px, 1fr));

minmax(90px, 1fr) 代表最小尺寸90px，最大尺寸1fr。

repeat(auto-fill, minmax(60px, 1fr));

auto-fill代表尽量放入由几个元素，会用空白位把改行放满，minmax(60px, 1fr)代表最小60px，最大1fr。

repeat(auto-fit, minmax(60px, 1fr));

auto-fit代表尽量放入由几个元素，不会用空白位把改行放满，minmax(60px, 1fr)代表最小60px，最大1fr。

上面是auto-fill，下面是auto-fit

范例

1
2
3
4
5
6
/*  相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。 */
#image {
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}



Tags
vue