0
点赞
收藏
分享

微信扫一扫

css知识总结

程序猿不脱发2 03-23 11:00 阅读 2

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. 元素水平垂直居中的方式有哪些?

  1. flex
  2. absolute + margin
  3. absolute + transform
  4. gird
  5. table

7. CSS属性中有那些可以被继承,那些不可以被继承?

  • 能够继承的属性:
  1. 字体系列的属性:font-size、font-family、font-weight、font-style;
  2. 文本系列的属性:
  1. 内联元素:color、line-height、word-spacing、letter-spacing、text-transform;
  2. 块级元素:text-align、text-indent、
  1. 元素可见性:visibility
  • 不能被继承的属性:
  1. 盒子模型的属性:width、height、margin、padding、border;
  2. 背景属性:background、background-color、background-image
  3. 定位属性: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布局基础知识

  1. grid布局的基本概念
    grid容器:采用grid布局的父元素。
    grid项目:grid布局中每个格子内部放置的元素。
    grid内容:显示项目的区域。
    行:横向
    列:纵向
    网格线:网格布局中横向和纵向的线条。
    单元格:横纵线交汇的区域被称为单元格。
    间距:网格与网格之间的距离被称为间距。
  2. 容器属性
  • 容器划分行列
    • 取值为数值
      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;
  1. 项目属性
  • 合并单元格属性
    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>; */
  }
```

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

举报

相关推荐

0 条评论