css grid随页面大小_CSS 知识总结

近来学习了CSS全解，主要可以分为几部分：CSS基础概念、CSS布局、CSS定位和CSS动画，接下来我会按照这几部分逐一进行总结。

一、CSS基础概念

1、CSS可以给HTML加样式，使其变得好看。它的名称叫做层叠样式表。

层叠，指的是样式层叠、选择器层叠、文件层叠。

样式层叠：可以多次对同一选择器进行样式声明。

选择器层叠：可以用不同选择器对同一元素进行样式声明。

文件层叠：可以用多个文件进行层叠。

因为这些特性使得CSS极度灵活，但也因此，导致不正交，所以被很多人吐槽。

2、当前使用最广泛的版本是：CSS 2.1，二最新的版本，则是：CSS 3。从CSS3开始，进行了分模块更新。

3、对于CSS的语法，它是比较简单的，主要有两种语法。

3.1: 选择器{属性名：属性值；/*注释*/}

注意事项：

所有符号都是英文符号，如果写错了，浏览器会警告。

区分大小写。

没有//注释。

最后一个分号可以省略。但建议不要省略。

任何地方写错了，都不会报错，浏览器会直接忽略。

3.2：at语法

@charset "UTF-8";（声明字符编码）

@import url(2.css);（导入css文件）

@media(min-width:100px) and (max-width:200px){语法一}；（媒体查询）

注意事项：

@charset "UTF-8"必须放在第一行。

前两个at语法必须以分号；结尾。

charset是字符集的意思，到那时UTF-8是字符编码encoding，这是历史遗留问题。

4、调试：

对于CSS的调试，主要有五种方法，分别为：

4.1、使用W3C验证器（这个不便捷，一般比较少用）

4.2、使用VSCode看颜色。

4.3、使用WebStom看颜色（推荐使用这个编辑器）。

4.4、使用开发者工具看警告。

4.5、善用border大法。（就是给元素加Border）

5、权威资料，推荐：MDN。

6、文档流：即文档中元素流动的方向，具体可以参考一下图片示例：

6.1、overflow:在文档流中，如果文字过长导致溢出的话，可以采用overflow属性进行设置。overflow有4个取值：auuo-灵活设置，scroll-永远显示，hidden-直接隐藏溢出部分，visible-直接显示溢出部分，它可以分为overflow-x和overflow-y。一般使用auto比较多，因为它能够灵活处理滚动条，如果使用scroll的话，那么滚动条会一直存在，即使它的文字没有过长也会存在。

6.2、脱文文档流的方法，可以使用几个元素，他们是：

float。

position:absolute/fixed。

7、盒模型：两种，分别为content-box(内容盒模型)和（border-box）边框盒模型。

content-box width=内容宽度

border-box width=内容宽度+padding+border

一般推荐使用border-box(边框盒模型)

8、margin合并：会有两种合并情况-父子margin合并和兄弟合并。

margin合并也只是上下合并，左右并不能合并。具体请看下图：

二、CSS布局：（floatflexgrid三种布局）

1、float布局；

步骤：

a、子元素加上float:left和width。

b、在父元素上加.clearfix。

.

2、flex布局：

.

3、Grid布局：

.container{
  display:grid/inline-grid;
  grid-template-columns:40px 1fr auto 50px 40px;(控制列宽)
  grid-template-rows:25% 100px auto; （控制行高）
  grid-column-gap:10px;
  grid-row-gap:10px;
  grid-gap:10px;
  grid-template-areas:
  "header header header"
  "aside main ad"
  "footer footer footer"
}
.item{
  grid-column-start:2;
  grid-column-end:2;
  grid-row-start:1;
  grid-row-end:2
}
.item-1{
  grid-area:header
}

三、CSS定位：

1、定位与布局的区别：布局是屏幕平面上的，而定位是垂直于屏幕而言的。

2、属性-position

static:默认值、待在文档流里。

relative:相对定位，升起来，不脱硫文档流。

absolute:绝对定位，定位基准是祖先里的非static,脱离文档流。

fixed:固定定位，定位基准是viewort(慎用)，脱离文档流。

sticky:粘滞定位。不脱离文档流。

2.1 relative-使用场景

a、用于做位移。

b、用于给absolute元素做父元素。

2.2 absolute-使用场景

脱离原来位置，另起一层。需要在父元素上加上relative，然后进行定位。

2.3 fixed-使用场景

广告栏以及回到顶部按钮。

手机上尽量不要用这个属性，因为容易采坑。

四、CSS动画

1、浏览器的渲染原理：

渲染过程:

根据HTML构建HTML树（DOM）

根据CS构建CSS树（CSSOM）

将两棵树合并成一颗渲染树（render tree）

Layout布局（文档流、盒模型、计算大小和位置）

Paint绘制（把边款颜色、文字颜色、阴影等画出来）

Compose合成（根据层叠关系展示画面）

以上就是浏览器渲染过程，它的渲染原理，其实就是根据HTML和CSS各自生成各自的树，然后两者合起来，形成一个渲染树，再根据渲染树的内容，进行布局、绘制和合成。主要就是JS/CSS>样式>布局>绘制>合成这五个步骤。

2、动画：transform/animation

两者都是CSS的动画属性，区别就是当动画需要用到多帧的时候，transform需要使用多次，而animation只需要使用一次。

2.1 transform:有四个常用功能-位移translate/缩放scale/旋转rotate/倾斜skew

具体的使用以及语法，可以参看MDN.

它可以组合使用，实现多重效果，如：

transform:scale(0.5) translate(-100%,-100%)

transform:none 取消所有

2.2 transition:（过度） 属性名 时长过渡方式 延

它的作用是可以补充中间帧。

2.3 animation:可用于多帧动画的制作

用法：

声明关键帧

添加动画

2.3.1 声明关键帧

完整语法：1

@keyframes 名称{
from{
transform:translateX(0%);
}
to
{
transform:translateX(100%)
}
}

完整语法：2

@keyframes 名称{
0%(top:0;left:0;)
30%(top:50px;)
68%,72%(left:50px)
100%(top:100px;left:100%)
}

2.3.2 添加动画 animation

animation:时长|过度方式|延迟|次数|方向|填充模式|是否暂停|动画名;

时长：1s或者1000ms

过度方式：跟transition取值一样，如linear

次数：3或者2.4或者infinite

方向：reverse|alternate|alternate-reverse

填充模式：none|forwards|backwards|both

是否暂停：paused|running

以上所有属性都有对应的单独属性。

对于CSS知识的总结，大概就这么多。