前端面试题整理-场景设计题

1. 如何使用 css 画一个三角形

借助 border 实现,在 width 和 height 都为 0 时,设置 border,便会呈现三角形。想要哪个方向的三角形,设置其他三边为 透明即可。
同时,可以通过调整不同边的宽度,来调整三角形的高度和宽度。

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三角符号</title>
    <style>
      /*记忆口诀:盒子宽高均为零,三面边框皆透明。 */
      div:after {
   
        position: absolute;
        width: 0;
        height: 0;
        content: " ";
        border-right: 100px solid transparent;
        border-top: 100px solid #000;
        border-left: 100px solid transparent;
        border-bottom: 100px solid transparent;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>

前端面试题整理-场景设计题_第1张图片

2. 移动端怎么做适配?

要区分响应式设计和移动端适配。
响应式设计是指一套代码,同时适配移动端,pc 端以及平板端。
而移动端适配,解决的是由于不同机型手机宽度不同导致的元素占比和设计稿不一致的问题。
(1)使用百分比布局,但是由于百分比依赖父元素的百分比,计算起来比较困难,不建议,但是可以实现移动端不同宽度屏幕的适配
(2)使用 vw/vh 布局,始终相对于视口宽高,比百分比换算简单,但是需要自己对着设计稿换算
(1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。
比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。)
(3)使用 rem 布局,rem 是相对于 html 的 font-size 进行换算,1 rem = 1 html font-size,一般会将 font-size 设置为 1/10 的 屏幕宽度,然后通过 postcss-pxtorem 这样的插件进行自动将代码中的 px 转换成 rem,来避免开发者自己计算
(‌ rem是一个相对单位,相对于html元素的字体大小,使用rem作为尺寸单位可以让页面元素在不同设备上保持等比例缩放。‌)
前端面试题整理-场景设计题_第2张图片

(4)vw + rem: 直接将 html 的 font-size 设置为 10 vw,也就是 1/10 的屏幕宽度,然后通过 pxtorem 的工具自动对项目中的 px 转换为 rem。

3. 如何隐藏一个元素

(1) display: none。 元素不可见,不占据空间,不可响应事件。会触发重绘和回流
(2) visibility: hidden。元素不可见,占据空间,不可响应事件,会触发重绘
(3) opacity: 0。 元素不可见,占据空间,可响应事件,会触发重绘
(4) position: absolute 移动到到视区外。元素不可见,不占据空间,不响应事件。重绘
(5) position: relative 移动到视区外。元素不可见,不可响应事件。占据空间,会触发重绘
(6) 设置宽高为 0。元素不可见,不会响应事件。会触发重绘和回流
(7)transform 移动到视区外。元素不可见,占据空间,不可响应事件,触发重绘
一般来讲,display: nonevisibility: hidden 是正常的方案,其他的属性并非为了隐藏元素而出现。仅仅只是可以实现。

4. 文字溢出如何处理,多行文本溢出呢?

(1)单行文本溢出
涉及到文本控制的有三个 css 属性:
white-space: nowrap 控制文本只显示一行,是其他属性生效的基础
overflow: hidden 超出隐藏,是 text-overflow 生效的基础
text-overflow: ellipsis 文本超出显示省略号
前端面试题整理-场景设计题_第3张图片
(2)多行文本溢出
涉及到多行文本控制,webkit 内核的浏览器提供了特殊的支持,由于移动端大部分都是 webkit 内核,涉及到的 css 属性如下:

display: -webkit-box; 
// 限制显示行数
-webkit-line-clamp: 2;
-webkit-box-orient: vertical

你可能感兴趣的:(前端学习,前端,javascript,css)