css知识总结 - 技术栈

1. 说一下CSS的盒模型。

在HTML页面中所有的元素都可以看成是一个盒子。

盒子的组成：内容content、内边距padding、边框border、外边距margin。

盒模型的类型：

标准盒模型：width = content
IE盒模型（怪异盒模型）：width = content + padding + border
控制盒模型的模式：border-sizing: content-box(默认值，标准盒模型)、border-box(IE盒模型)。

2. CSS选择器的优先级

CSS的特性：继承性、层叠性、优先级

标签、类/伪类/属性、全局选择器、行内样式、id、!important

优先级： !important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

3. 隐藏元素的方法有哪些

display: none; 元素在页面上消失，不会占据空间。
opacity: 0; 设置元素的透明度为0，元素不可见，占据空间位置。
visibility: hidden; 元素在页面上消失，占据空间位置，一种不可见的状态。
position: absolute; 设置定位，移出可见区域。
clip-path

4. px、rem、em的区别是什么？

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的，绝对单位长度。
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size: 62.5%; 1rem = 10px; (16px * 62.5% = 10px)
em，相对单位，相对于父元素的font-size的值。

5. 重排和重绘有什么区别？

重排必定会引发重绘

重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小。
重绘：计算好盒模型的位置、大小和其他一些属性后，浏览器会根据每个盒模型的的特性进行绘制。
浏览器的渲染机制：
对DOM元素的大小、位置进行修改后，浏览器需要重新计算元素的几何信息，会触发重排。
只对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算DOM元素的集合信息，直接绘制了该元素的新样式。这时会触发重绘。

6. 元素水平垂直居中的方式有哪些？

flex
absolute + margin
absolute + transform
gird
table

7. CSS属性中有那些可以被继承，那些不可以被继承？

能够继承的属性：

字体系列的属性：font-size、font-family、font-weight、font-style;
文本系列的属性：

内联元素：color、line-height、word-spacing、letter-spacing、text-transform;
块级元素：text-align、text-indent、

元素可见性：visibility

不能被继承的属性：

盒子模型的属性：width、height、margin、padding、border；
背景属性：background、background-color、background-image
定位属性：float、clear、position、top、left、right、bottom、overflow、min-width、max-width、min-height、max-height;

8. CSS预处理器？

LESS、SASS

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。

优点：提高代码复用率和可维护性

缺点：需要引入编译过程有学习成本

9. grid布局基础知识

grid布局的基本概念
grid容器：采用grid布局的父元素。
grid项目：grid布局中每个格子内部放置的元素。
grid内容：显示项目的区域。
行：横向
列：纵向
网格线：网格布局中横向和纵向的线条。
单元格：横纵线交汇的区域被称为单元格。
间距：网格与网格之间的距离被称为间距。
容器属性

容器划分行列
- 取值为数值
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
- 取值百分比
  grid-template-rows: 20% 30% 50%;
  grid-template-columns: 20% 30% 50%;
- 重复函数 repeat
  grid-template-rows: repeat(3, 20%);
  grid-template-columns: repeat(3, 100px);
- 自动填充
  grid-template-rows: repeat(auto-fill, 15%);
  grid-template-columns: repeat(auto-fill, 15%);
- auto自动
  grid-template-rows: 100px auto 100px;
  grid-template-columns: 100px auto 100px;
- fr片段划分
  grid-template-rows: 1fr 2fr 3fr;
  grid-template-columns: 1fr 2fr 3fr;
- minmax()
  grid-template-rows: 200px 200px minmax(100px, 200px);
  grid-template-columns: 200px 200px minmax(100px, 200px);
调整间距
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-gap: 20px 10px;
gap: 30px 10px;
容器内内容的对齐方式
justify-content: center;
align-content: center;
place-content: center;
place-content: space-between space-evenly;
取值范围：start、end、center、space-around（间距环绕）、space-between（两端对齐）、space-evenly（间距平分）。
网格内项目的对齐方式
justify-items: center;
align-items: center;
place-items: center;

项目属性

合并单元格属性
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 4;
grid-column-end: 6;
grid-row: 1/2;
grid-column: 4/6;

单个项目位置

复制代码

  justify-self 和 align-self
  `justify-self` 属性设置单元格内容的水平位置（左中右），跟 `justify-items` 属性的用法完全一致，但只作用于单个项目。
  `align-self` 属性设置单元格内容的垂直位置（上中下），跟 `align-items` 属性的用法完全一致，也是只作用于单个项目。
  .item {
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
    /* 简写 place-self: <align-self> <justify-self>; */
  }

注意点：复合属性的书写都是先上下再左右