前端知识点之CSS相关

送你颗糖呀
20 阅读4分钟

CSS相关

1.显示/隐藏元素的几种方法

  • display: none（元素隐藏）display: block（元素显示）。
  • visbility: hidden（元素隐藏）visbility:visible（元素显示）。
  • position：使用left，top将元素移到视野之外。
  • z-index：将元素移动到最底层。
  • opacity：将元素的透明度变为0。
  • transform：scale(0)将元素的大小变为0。

2.使元素水平垂直居中的方法

  • position + margin负值。
  • position + margin auto。
  • position + cale计算属性。
  • position + transform。
  • 利用行内元素的text-align: center以及vertical-align: center。
  • 利用display: table-cell（text-align: center以及vertical-align: center）。
  • flex：justify-content: center; align-items: center。
  • 如果是实现文字的居中，text-align: center; line-height = height;

3.实现响应式布局的方法

  • 使用%进行布局：百分比布局的宽高%是相对于父元素而言的。
  • 使用媒体查询 + rem。
  • 使用vw，vh：vw，vh的宽度高度是相对于视口而言的。
  • flex弹性布局：但是兼容性比较差。
  • ui库的栅格系统：element-plus等。

4.谈谈BFC的理解

BFC（块级格式化上下文）：其实就是一个独立的布局区域，其内元素的布局不受外部的影响。BFC可以一个元素的css属性。设置BFC的属性如下：

  • overfloat: hidden;
  • display: flex;
  • display: inline-block;
  • display: table-cell;
  • position: absolute;
  • position: flexed;

BFC的特性如下：

  1. BFC是一个独立的布局空间，其内元素的布局不受外部的元素布局的影响。
  2. 对于浮动的元素，再计算BFC高度时也会把浮动的元素计算在内。

BFC所解决的问题：

  1. 浮动的子元素导致其父元素高度塌陷的问题（特性2）。
  2. 两个相邻的元素margin合并的问题（特性1）。

5.CSS的选择器及优先级

常用的css选择器有：

  • ID选择器
  • 类选择器
  • 元素选择器
  • 属性选择器
  • 后代选择器
  • 子元素选择器
  • 伪类选择器
  • 伪元素选择器

选择器的优先级：!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 伪元素选择器 > 通配符选择器 = 子元素选择器 > 后代选择器。

6.CSS中的单位有哪些？

CSS中的单位有以下几种：

  • px：像素单位
  • %：百分比，但是指的是相对于父元素的百分比
  • em：相对于父元素字体的大小
  • rem：相对于根元素（html）字体的大小
  • vw：视口宽度的百分比
  • vh：视口高度的百分比

7.设备像素，css像素，设备像素比

设备像素：其实就是物理像素，是设备上的一个物理像素点。

css像素：css像素是一个虚拟的像素值，它会根据设备的物理像素比映射成真实的设备像素。

设备像素比：即设备像素与css像素的比值，表示一个css像素对应多少个设备像素值。

8.换肤功能的实现方案

换肤功能具体的实现方案有两种：第一种是通过写多组不同的css选择器，然后动态的改变css选择器的值（代码量比较大），或者将不同主题的css选择器独立为不同的文件，使用Link标签动态引入。第二种就是定义多套不同主题的css变量，var引入变量，使用setProperty去动态的切换不同主题自定义属性的值（这种方法比较好）。

9.多语言切换的实现方案

  1. 采用谷歌/微软的翻译Api，调他们的接口实现翻译。
  2. 新建多个不同语言的翻译对照表，动态的切换语言。

10.rem的计算方法

rem的值是相对于根元素而言的，1rem=1*根元素的font-size。

rem所对应的px计算公式：16px / 1920px = x / 屏幕尺寸。

11.绘制三角形方法

1.使用border。

div {
    width: 0;
    height: 0;
    border: 1px soild;
    border-color: red transparent transparent transparent;
}

2.使用渐变。

div {
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 	50%, transparent 100%);
}

3.通过svg或者canvas进行绘制。

4.使用clip-path对元素进行剪裁。

div{
	width: 100px;
    height: 100px;
    background: gold;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

5.利用代表三角形的字符。

<div class="one">&#9658; </div>
<div class="two">&#9660; </div>
<div class="three">&#9650; </div>
<div class="four">&#8895; </div>
<div class="five">&#9651; </div>

12.在一个父元素中每行显示两个子元素，且子元素上下左右之间的间距都为12px，超出父元素部分的子元素出现滚动条.

1.使用浮动的方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 400px;
      height: 600px;
      overflow: scroll;
      padding: 6px;
      background-color: antiquewhite;
    }
    .show {
      float: left;
      width: calc(50% - 12px);
      height: 200px;
      margin: 6px;
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="show">1</div>
    <div class="show">2</div>
    <div class="show">3</div>
    <div class="show">4</div>
    <div class="show">5</div>
    <div class="show">6</div>
    <div class="show">7</div>
    <div class="show">8</div>
    <div class="show">9</div>
    <div class="show">10</div>
    <div class="show">11</div>
    <div class="show">12</div>
    <div class="show">13</div>
    <div class="show">14</div>
  </div>
</body>
</html>

2.使用flex布局的方式：

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
      height: 600px;
      padding: 6px;
      overflow: scroll;
      background-color: antiquewhite;
    }
    .show {
      width: calc(50% - 12px);
      height: 200px;
      margin: 6px;
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="show">1</div>
    <div class="show">2</div>
    <div class="show">3</div>
    <div class="show">4</div>
    <div class="show">5</div>
    <div class="show">6</div>
    <div class="show">7</div>
    <div class="show">8</div>
    <div class="show">9</div>
    <div class="show">10</div>
    <div class="show">11</div>
    <div class="show">12</div>
    <div class="show">13</div>
    <div class="show">14</div>
  </div>
</body>
</html>
avatar
文章
阅读
粉丝