面试scss和less

转载

lanhy 2024-10-11 15:52:00

文章标签 面试scss和less javascript 前端开发语言媒体查询 文章分类 架构后端开发

文章目录

1 CSS响应式布局

1.1 `name="viewport"`
1.2 媒体查询
1.3 百分比布局
1.4 rem布局
1.5 使用视口单位
1.6 图片响应式

1.6.1 使用 max-width
1.6.2 使用 background-image

1.7 成型方案

2 显示模式

2.1 块级元素（block）
2.2 行内元素（inline）
2.3 行内块元素（ inline-block）

3.盒子模型

3.1 box-sizing

4 实现一个div溢出的元素用...表示
5 实现水平垂直居中的方式
6 消除`float`浮动带来的影响
7 h5和css3新属性
8 Flex布局

1 CSS响应式布局

1.1 `name="viewport"`

设置视图标签(viewport)来告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

1.2 媒体查询

媒体查询可以针对不同的媒体类型(screen print)定义不同的样式

媒体查询根据 条件判断 告诉浏览器如何针对不同的宽度渲染页面

/* 随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式 */
/* 移动端优先使用min-width */
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* PC端优先使用max-width */
/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}

1.3 百分比布局

border-radius、 translate 的百分比，是相对于自身
padding、 marigin 的百分比，相对于直接父元素的width
height, width; top, bottom; left, right，都是相对于直接父元素

缺点：各属性使用百分比，相对父元素的属性并不是唯一的。导致百分比布局很复杂。

1.4 rem布局

em：相对于父级元素的font-size大小。rem：指的是相对于HTML根元素的font-size大小。默认html字体大小为16px,即16px=1rem。
根元素的 font-size 提供了一个基准，其他元素以 rem 为固定单位定义大小。
根据视图容器的大小，可以使用媒体查询或者JS动态修改根元素 font-size，其他元素也会发生响应式的变化。

1.添加resize事件监听，回调函数可以改变rem的大小

function refreshRem() {
    var docEl = document.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
window.addEventListener('resize', refreshRem);

2.利用媒体查询，以rem为单位设置不同尺寸设备下的字体大小

@media screen and (max-width: 1440px){
    html {
      font-size: 70% !important;
    }
  }
  @media screen  and (min-width: 1441px) and (max-width: 1680px){
    html {
      font-size: 75% !important;
    }
  }
  @media  screen and (min-width: 1681px){
    html {
      font-size: 80% !important;
    }
  }

1.5 使用视口单位

vw（viewWeight）相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh（viewHeight）相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin vw和vh中的较小值
vmax vw和vh中的较大值

1.6 图片响应式

1.6.1 使用 max-width

img {
    display: inline-block; // 元素相对于周围内容以内联形式呈现，但可以设置宽度和高度
    max-width: 100%;
    height: auto; // 保证图片进行等比缩放而不至于失真
}

max-width ：保证图片最大宽度为其容器的100%。如果图片宽度超过了其容器，图片会缩放，占满最大可用空间。

不能用 width: 100% 。这条规则会导致他显示的跟容器始终一样宽。在容器比图片宽的多的情况下，图片被无限拉伸。

1.6.2 使用 background-image

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

1.7 成型方案

Flex弹性布局
Grid网格布局
Col栅格系统

2 显示模式

2.1 块级元素（block）

块级元素的特点：

元素独占一行，在未设置宽度时，其宽度随父容器的宽度
可设置width，height，margin，padding属性
可以容纳内联元素和其他块元素

常见的块级元素有：

<h1~6>、<p>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。

用法：dispaly:block

2.2 行内元素（inline）

行内元素的特点：

元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
元素设置width,height属性无效。
元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

常见的行内元素：

<a>、<span>、<img>

用法：dispaly:inline

2.3 行内块元素（ inline-block）

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

用法：

display:inline-block

让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

3.盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距，和内容。

面试scss和less_前端

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

3.1 box-sizing

box-sizing 属性允许你以某种方式定义某些元素的盒模型

box-sizing: content-box|border-box|inherit:

W3C 标准盒模型（浏览器默认）：
content-box：padding和border 不被包含在定义的width和height之内。

面试scss和less_媒体查询_02

IE 盒模型（开发常用）：
border-box：padding和border 被包含在定义的width和height之内。

面试scss和less_媒体查询_03

4 实现一个div溢出的元素用…表示

方法一：overflow方式

.tree-text-over-style {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 100%;
    cursor: pointer;
  }

css3：box布局

-webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

方法二：lodash.truncate 截断字符串，如果字符串超出了限定的最大值。被截断的字符串后面会以 omission 代替，omission 默认是 “...”。

import {truncate} from "lodash";

<Typography>{truncate(node.name, {length: 10, separator: "..."})}</Typography>

方法三：js方法

/* 切割字符串 */
  const truncateTitle = (source = '',length,truncate) => {
    if (source.length > length) {
      let pre = source.substring(0,length);
      return pre + truncate;
    } else {
      return source;
    }
  };

5 实现水平垂直居中的方式

1.弹性布局

.parent {
    display:flex;
    /* 定义项目在主轴上如何对齐 */
    justify-content:center;
    align-items: center;
}

2.绝对定位

.child{
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

3.CSS3 transform translate 转换平移

.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 500px;
	height: 500px;
	background: #008000;
}

4.Grid布局

.parent{
 height: 100vh;
 display: grid;
 justify-content: center;
 align-content: center;
 }
.child{
 width: 500px;
 height: 500px;
 background: #008000;
 }

5.line-height=height + text-align

.parent{
 height: 100vh;
 line-height:100vh;
 text-align: center;
}
.child{
 display: inline-block;
 vertical-align: middle;
}

6 消除`float`浮动带来的影响

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

消除浮动：
1.设置after伪元素（公司常用），设置 clear：both属性

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

2.触发BFC或haslayout：设置父元素 overflow 或者display：table 属性

7 h5和css3新属性

1.H5

语义化标签(nav、aside、dialog、header、footer等)
canvas
拖放相关api
Audio、Video
获取地理位置
更好的input校验
web存储(localStorage、sessionStorage)
webWorkers(类似于多线程并发)
webSocket

2.CSS3

选择器
边框(border-image、border-radius、box-shadow)
背景(background-clip、background-origin、background-size)
渐变(linear-gradients、radial-gradents)
字体(@font-face)
转换、形变(transform)
过度(transition)
动画(animation)
弹性盒模型(flex-box)
媒体查询(@media)

8 Flex布局

justify-content

justify-content属性定义了子元素沿主轴方向的对齐方式，用来当子元素大小最大的时候，分配主轴上的剩余空间。也可以当子元素超出主轴的时候用来控制子元素的对齐方式。


align-content

align-content是当父元素所包含的行在交叉轴方向有空余部分时如何分配空间。与justify-content在主轴上如何对单个子元素对齐很相似。

align-items

align-items定义了子元素在交叉轴方向的对齐方向，这是在每个子元素仍然在其原来所在行的基础上所说的。可以看作是交叉轴上的justify-content属性;


flex-direction: row | row-reverse | column | column-reverse;   //flex-direction定义flex布局的主轴方向。


row: 行方向，flex-direction的默认值，在ltr(left to right， 从左到右)排版方式下从左到右排列，在rtl(right to left， 从右到左)排版方式下从右到左排列。
row-reverse: 行反方向，在ltr中从右向左，在rtl中从左到右。
column: 列方向，与row相似，只是从上到下。
column-reverse: 列反方向，与row-reverse相似，只是从下岛上。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。