CSS学习总结

一、CSS的基础必会，CSS相关的基础使用，常用的样式

CSS的引入

内联

html嵌入<style>

html里面link链接（并行加载）

@import导入（最后加载）

选择器

通用选择器，标签选择器，id选择器，class选择器，属性选择器，父代，子代，兄弟，伪类选择器

position

static 正常布局，也是默认行为，此时top, right, bottom, left 和 z-index 属性无效

relative 相对向前正常布局所在位置定位，top, right, bottom, left, margin都可用，不脱离文档流

absolute 相对父层有relative或absolute的元素定位，否则相对body定位,margin失效，top, right, bottom, left可用，脱离文档流

fixed 相对body定位

sticky 特殊的fixed，开始是在文档流正常位置，一旦滚动到不可见区域，转为fixed

float

float： left/right/none 脱离文档流，浮在父元素左或右，字体环绕

clear: both 清除浮动

overflow,overflow-x,overflow-y

visible 默认，会溢出

hidden 隐藏

scroll 出现滚动条，够显示都出滚动条

auto 浏览器自动判断，不够显示才加滚动条

overlay 滚动条占用内容区域

display

block

inline

inline-block

flex

none

border

border: width style color;

border-top/bottom/left/right: width style color;

border: unset;

border-radius: 10px;

border-radius: 50%;

box-shadow: h-shadow v-shadow blur spread color inset

h-shadow:阴影在水平方向的偏移距离，必须值
取值为正：阴影向右偏移
取值为负：阴影向左偏移

v-shadow:阴影在垂直方向的偏移距离，必须值
取值为正：阴影向下偏移
取值为负：阴影向上偏移

blur:阴影模糊距离，取值越大，模糊效果越明显，以px为单位的数值（可选值）

spread:阴影的大小，指定要在基础阴影上扩充出来的大小，取值以px为单位的数值（可选值）

color:阴影颜色（可选值）

inset:将默认的外阴影改为内阴影（可选值）

outline: width style color;

box-sizing

content-box

默认行为

实际width(180px) = border(20px * 2) + padding(20px* 2) + content(100px)

border-box

一般实际项目会改为border-box，这样width固定，内容区域会变大变小随着padding的不同

实际占用width(100px) = border(20px * 2)，padding(20px * 2)，content(20px)

background

background-color

backgroud-image: url(...)

background-repeat:

repeat 默认值，横向纵向都平铺

no-repeat 不平铺（图片只显示一次）

repeat-x 只在水平方向平铺

repeat-y 只在垂直方向平铺

background-size

width height px或者百分比

cover 等比放大，两边完全覆盖才停，可能变形

contain 等比放大, 一边完全覆盖才停，不变形，但可能留白

background-position

每一个背景图片设置初始位置，可负

background-position: top/bottom/left/right/center

background-position: background-position: 25% 75%;

background-position: bottom 50px right 100px;

background-position: right 35% bottom 45%;

渐变，线性，径向，重复

background: linear-gradient(blue, pink); 默认上下

background: linear-gradient(to right, blue, pink); 可指定左右

background: linear-gradient(to bottom right, blue, pink);指定对角

background: linear-gradient(70deg, blue, pink); 精确方向

background: radial-gradient([size at position], color-point1,color-point2,...);

background: repeating-linear-gradient(angle,color-point1,color-point2,...);

background: repeating-radial-gradient ([size at position],color-point1,color-point2,...);

font/text

font-family: 字体

font-size: 大小

font-weight 粗细

font-style: 字体样式

font-variant：大小写

font： style variant weight size family;

如果用简写方式，必须设置family的值，否则无效
font:12px; 错误
font:12px "黑体"; 正确

color: 字色

text-align: left/center/right/justify 对齐

text-decoration 效果

line-height：行高，实现行高内呈现垂直居中的效果

text-indent 缩进

text-shadow： h-shadow v-shadow blur color; 阴影

text-overflow: ellipsis; 文字显示不小...

table

border-collapse: separate(分离，默认) / collapse(合并)

border-spacing： h-space(水平边距) v-space(垂直边距)，边距分离模式才能生效

伪类

a:link /* unvisited link */

a:visited /* visited link */

a:hover /* mouse over link */

a:active /* selected link */

input:checked /* checkbox checked */

input:disabled /* disabled inpu */

p:empty /* no childen element */

input:empty / * enabled input */

p:first-child /* first child of it's parent */

inut:focus /* input have focus */

...

伪元素

p::first-letter

p::first-line

h1::before

h1::after

::marker

::selection

CSS函数

width: max(50%, 300px); // 50% 或 300px最大的值, 同理min()

width: calc(100% - 100px); 计算

CSS变量

:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --fontsize: 25px;
}

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

/* 更改小屏颜色主题 */
@media screen and (min-width: 450px) {
  .body{
    --blue: #AAA;
  }
}

使用变量的方式，我们可以很好控制主题颜色，纯javascript如何获取，并修改变量呢？

// 获取变量的值
getComputedStyle(document.querySelector(":root")).getPropertyValue("--blue")

// 修改变量的值
document.querySelector(":root").style.setProperty("--blue", "red")

@font-face

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

计数器

常用于生成标号

counter-reset：section; // 重置计数器为 section 0

counter-increment: section; // 增加一次

content: "出现次数 " counter(section) ": "; // 配合::before and ::after，使用counter计算次数

tranform 转换， X方向向右 Y方向向下沿着圆心位置移动

transform: scale(a); 元素x和y方向均缩放a倍
transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍
transform: scaleX(a); 元素x方向缩放a倍，y方向不变
transform: scaleY(b); 元素y方向缩放b倍，x方向不变

transform: translateX(n) 2D变化，沿着X轴平移n
transform: translateY(n); 沿着Y轴平移n
transform: translate(m, n);元素x方向平移m，y方向平移n

transform: rotate(deg); 元素旋转多少度

transform: skewX(n); 元素沿着X轴倾斜
transform: skewY(n); 元素沿着Y轴倾斜
transform: skew(m, n);元素沿着X，Y轴倾斜

transform: matrix(a,b,c,d,e,f) 矩阵转换

transform: translate3d(x,y,z) 3D变换

transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);

transform: scale3d(2.5, 1.2, 0.3);

transition 渐变

transition: transition-property transition-duration transition-timing-function

transition-timing-function
linear – 线性函数，返回值一个输入值一样的结果。
ease – 减缓函数, 是缺省值, 等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – 等同于 cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – 等同于 cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)

div {
  opacity: 1;
  transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

animation 动画

animation-name: anim;
animation-duration: 2s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;ease-in-out – 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)

@keyframes anim {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

或

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

@media 媒体查询，适配不同屏幕尺寸

@media not|only mediatype and (expressions) {
CSS-Code;
}

stylesheets for different media: <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types:
all
print
screen
speech

@media screen and (min-width: 480px) { css } // css apply if more than 480px

@media screen and (max-width: 480px) { css } // css apply if less than 480px

flex 弹性布局（一维）

学习参考（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

能灵活使用如下flex-container属性：
flex-direction: row/column; // 决定子元素走向，row(默认)或column
flex-wrap: wrap/nowrap; // 决定子元素是否wrap，不写默认nowrap，子元素会被压缩
flex-flow: row wrap; // 上面两个的结合体
justify-content: flex-start/flex-end/center/space-around/space-between;
align-items: flex-start/flex-end/center/stretch/baseline;
align-content: 和justify-content相同，刚好作用于另一个轴向，flex-wrap 属性设置为 wrap，会用到align-content 属性。

能灵活使用如下flex-item属性：
order: 2; // 决定item顺序
flex-grow: 2; // 拉伸占比
flex-shrink: 2; // 收缩占比
flex-basis: 200px; // item的长度
flex: flex-grow flex-shrink flex-basis; // 结合体
align-self: // 本元素重写父容器align-items

grid 网格布局（二维）

能灵活使用如下grid属性：
display:grid; // 网格布局
grid-template-columns: auto auto auto auto; // 四个等宽的列
grid-template-rows: 80px 200px; // 每行高度
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-gap: 10px; // row和column方向的item之间都是10px间隙
justify-content: space-evenly/space-around/space-between/center/start/end; // 定义item在水平方向排布方式,类似flex的justify-content
align-content: center/space-evenly/space-around/space-between/start/end; // 定义item在垂直方向排布方式，类似flex的align-content
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .'; // 指定属于自己的区域，将被合并

// 对单个网格元素占比
// 列
grid-column-start: 1; // 单个网格从哪开始
grid-column-end: 3; // 单个网格到哪结束
grid-column: 1 / 3; // 缩写从1开始到3前面结束，占用2列空间
grid-column: 1 / span 3; // 缩写从1开始到4前面结束，占用3列空间
// 行
grid-row-start: 1; // 单个网格从哪开始
grid-row-end: 3; // 单个网格到哪结束，上面定义占用可两个位置
grid-row: 1 / 3; // 缩写从1开始到3前面结束，占用2行空间
grid-row: 1 / span 3; // 缩写从1开始到4前面结束，占用3行空间
// 组合
grid-area: 1 / 2 / 5 / 6; // 单个网格从第1行第2列开始，到第5行前，第6列前终止
grid-area: 1 / 2 / span 4 / span 5; 和上面效果一样
grid-area: myArea; // 配合grid-template-areas使用，上面的myArea所在的(1,1)(1,2)(2,1)(2,2)将被划为一块

二、Sass的学习：可以简化css书写的一种扩展，文件后缀名.scss。经过转译器转成原生css才可以被浏览器识别。工作中我们会使用sass写，最终打包过程中转译为css。需要了解它以下特性

Sass变量

$variablename: value;

body {font-family: $variablename;}

value支持：
strings
numbers
colors
booleans
lists
nulls

Sass嵌套写法

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

// 支持属性嵌套
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

支持@import其它sass文件，如果文件以_开头，会被认为部分sass片段，不会被独立转译成css文件

@import "variables";
@import "colors";
@import "reset";

@mixin和@include的用法

@mixin important-text { // @mixin mixin_name
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

@mixin special-text {
  @include important-text; // @include mixin_name
  @include link;
  @include special-border;
}

.danger {
  @include important-text;
  background-color: green;
}

支持传参

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

@extend，支持继承

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

支持很多Sass方法

三、问答栏目，如果知道上面的知识，算基本入门了，开始看看下面的问题是否能答得上来。

CSS问答篇

一、CSS的基础必会，CSS相关的基础使用，常用的样式

CSS的引入

选择器

position

float

overflow,overflow-x,overflow-y

display

border

box-sizing

background

font/text

table

伪类

伪元素

CSS函数

CSS变量

@font-face

计数器

tranform 转换， X方向向右 Y方向向下 沿着圆心位置移动

transition 渐变

animation 动画

@media 媒体查询，适配不同屏幕尺寸

flex 弹性布局 （一维）

grid 网格布局（二维）

二、Sass的学习：可以简化css书写的一种扩展，文件后缀名.scss。经过转译器转成原生css才可以被浏览器识别。工作中我们会使用sass写，最终打包过程中转译为css。需要了解它以下特性

Sass变量

Sass嵌套写法

支持@import其它sass文件，如果文件以_开头，会被认为部分sass片段，不会被独立转译成css文件

@mixin和@include的用法

@extend，支持继承

支持很多Sass方法

三、问答栏目，如果知道上面的知识，算基本入门了，开始看看下面的问题是否能答得上来。

tranform 转换， X方向向右 Y方向向下沿着圆心位置移动

flex 弹性布局（一维）