Skip to main content

CSS 学习笔记

学习网站:

  1. https://50projects50days.com/
  2. https://css-tricks.com/
  3. CSS Reference - A free visual guide to CSS

·Flex

1. Flex

·Grid

Grid by Example 学习 CSS 网格布局时需要的一切。

1. gird creation

Info :

创建网格时,必须首先设置 display:grid 。要创建每个宽度为 150 像素的 3 列,请设置 grid-template-columns:150px 150px 150px

Property:

  • grid-template-cloumns

  • grid-template-rows

  • grid-gap: 8px 10px

    在行之间提供 8px 的间隙,在列之间提供 10px 的间隙。但为了防止溢出,通常在定义 grid-template-cloums 和 grid-template-rows 使用分数单位 fr

    Reference:尤斯托德 (euismod.dev)

Task:

创建一个 2x3 网格,其中每行的高度为 133 像素,每个列的宽度为 50%。

image-20210902100035470

·Answer:

HTML

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 133px 133px 133px;
}

2. gird-area

Task:

Recreate the grid below using grid areas. The sidebar should be 1/3 of the width with the main content taking up the rest of the space.

image of task goal

Answer:

HTML

<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
<div class="footer">Footer</div>
</div>

CSS

.container {
display: grid;
grid-template-columns: 33.333% 66.666%;
grid-template-rows: 10% 80% 10%;
grid-template-areas:
"h h h"
"s m m"
"f f f";
}
.header {
background: #ff5454;
grid-area: h;
}
.sidebar {
background: #61cc9e;
grid-area: s;
}
.main-content {
background: #ffffff;
grid-area: m;
}
.footer {
background: #54a3ff;
grid-area: f;
}

[]: https://www.euismod.dev/#/learn/3 "euismod grid-area 教学" []: Desktop/source/html/Coding_Starting_up/Grid "本地 CSS Grid.html"

·em and rem

img

·变量

·Image:cover contain auto

·box-shadow 给盒子添加阴影

box-shadow 属性用来给元素添加阴影,该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow 属性的阴影依次由下面这些值描述:

  • offset-x 阴影的水平偏移量;
  • offset-y 阴影的垂直偏移量;
  • blur-radius 模糊半径;
  • spread-radius 阴影扩展半径;
  • color

其中 blur-radiusspread-radius 是可选的。

可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

创意

· 绘制心形

把屏幕里的元素变成心形。 在 heart::after 选择器里,把 background-color 改成 pink,把 border-radius 改成 50%。

接下来,用类选择器选取 class 为 heart(只是 heart)的元素,为它添加 transform 属性。 使用 rotate() 函数并设置角度为 -45 度。

最后,在 heart::before 选择器里面,设置 content 属性值为空字符串。

<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content:"";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class="heart"></div>

· 利用渐变绘制加号

image-20211103204139044

.input-add .plus {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); //❗
background-size: 50% 2px, 2px 50%; // ❗
background-repeat: no-repeat;
background-position: center;
}