前端八股-他人分享

1.app怎么做适配的

1. 基于手机系统开发的原生 App (Android/iOS):

Android: Android 开发通常使用 dp (Density-independent Pixels) 作为单位，它会根据屏幕密度自动进行缩放，从而在不同分辨率的设备上保持一致的外观。此外，还可以使用 ConstraintLayout 等布局工具来创建灵活的布局，并根据屏幕尺寸和方向进行调整。
iOS: iOS 开发通常使用 Auto Layout 和 Size Classes 来实现适配。Auto Layout 可以定义视图之间的约束关系，使布局能够自动适应不同的屏幕尺寸和方向。Size Classes 则可以根据屏幕尺寸和方向定义不同的布局方案。

2. Web App:

设置 viewport meta 标签:
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- width=device-width: 将视口宽度设置为设备宽度，确保页面宽度与设备宽度一致。
- initial-scale=1.0: 设置初始缩放比例为 1.0，即页面不进行缩放。
- maximum-scale=1.0: 设置最大缩放比例为 1.0，禁止用户放大页面。
- user-scalable=no: 禁止用户缩放页面。
使用媒体查询和响应式做适配:
- 通过媒体查询，可以根据不同的屏幕尺寸、方向等特性应用不同的 CSS 样式，从而实现页面的自适应布局。
- 优点：可以精确控制不同屏幕尺寸下的布局和样式。
- 缺点：需要编写大量的媒体查询规则，维护成本较高。
使用 rem 或 vw/vh 等相对单位:
- rem (root em) 是相对于根元素字体大小的单位，可以根据根元素字体大小的变化自动调整元素尺寸。
- vw (viewport width) 和 vh (viewport height) 是相对于视口宽度和高度的单位，可以根据视口尺寸的变化自动调整元素尺寸。
- 优点：可以实现更灵活的布局，代码更简洁。
- 缺点：需要对页面进行整体的布局规划，才能更好地利用这些单位。
使用 flexible.js 等适配方案:
- flexible.js 是一个常用的 Web App 适配方案，它通过动态修改 html 元素的 font-size 来实现适配。
- 原理：根据屏幕宽度计算出一个合适的 font-size，然后使用 rem 作为单位进行布局。
- 优点：使用简单，适配效果较好。
- 缺点：可能会影响页面的性能，需要谨慎使用。

2.rem em vw vw 百分比区别

px (像素): 绝对单位，表示屏幕上的一个物理像素点。在不同分辨率的屏幕上，相同像素值的元素大小可能会有所不同。
rem (root em): 相对单位，相对于根元素 (<html>) 的字体大小。如果根元素的字体大小设置为 16px，那么 1rem 就等于 16px。
em (element em): 相对单位，相对于当前元素的字体大小。如果当前元素的字体大小设置为 14px，那么 1em 就等于 14px。如果当前元素没有设置字体大小，则会继承父元素的字体大小。
vw (viewport width): 相对单位，相对于视口宽度的百分比。1vw 等于视口宽度的 1%。
vh (viewport height): 相对单位，相对于视口高度的百分比。1vh 等于视口高度的 1%。
百分比 (%): 相对单位，相对于父元素的宽度或高度的百分比。

相同点:

它们都是 CSS 中用于设置尺寸的单位。

不同点:

它们参照的对象不同，导致在不同场景下的表现也不同。

注意:

vw 和 vh 是相对于视口 (viewport) 的，而视口指的是浏览器窗口中可以显示网页内容的区域，不包括浏览器工具栏、地址栏等。
当页面存在滚动条时，100vw 表示视口内容区域的宽度，不包括滚动条的宽度；而 100% 表示包含滚动条在内的整个浏览器窗口的宽度。

3.750px 设计稿，20px 为多少 rem?

首先设计图是UI设计提供给前端开发工程师的设计稿，750的设计图出自于手机屏幕为375px*667px的iphone678手机屏幕的设计稿，这里也可以称之为2倍图。20px的字体大小涉及到了单位的转换，页面中默认的字体大小为16px，那么此时的1rem = 16px; 那么20px通过计算得出公式 1rem = 16px; ?rem = 20px; 得出结果为:1.25rem

代码示例:

<!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>
        /* 设置根元素字体大小为 7.5px */
        html {
            font-size: 7.5px;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 20px; /* 转换为 rem: 20px / 7.5px = 2.6666667rem */
            width: 2.6666667rem; 
            height: 20px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

4.简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

1.使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置

* {

 margin: 0;

 padding: 0;

}

div {

 float: left

}

.box1 {

 width: 200px;

 height: 200px;

 background-color: red;

}

.box2 {

 width: 100px;

 height: 100px;

 background-color: blue;

 transition: all linear 1s;//表示所有元素线性变换

}

.box1:hover+.box2 {//相邻兄弟选择器，表示当触发box1鼠标移至box1时则对相邻兄弟Box2向左移动100px

 transform: translateX(-100px);

}

2.使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现

* {

 margin: 0;

 padding: 0;

}
div {

 float: left;

}
.box1 {

 width: 200px;

 height: 200px;

 background-color: red;

}
.box2 {

 width: 100px;

 height: 100px;

 background-color: green;

}

.box1:hover+.box2 {

 animation: mover linear 1s;

}

@keyframes mover {

 0% {

  transform: translateX(0px);

 }

 100% {

  transform: translateX(-100px);

 }

}

3.可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动

    div {
        float: left;
    }

    .box1 {
        width: 300px;
        height: 300px;
        background-color: red;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        position: relative; /* 添加 position: relative; 使得可以使用 left 属性进行定位 */
    }
</style>


<script>
    // 获取元素
    const box1 = document.querySelector('.box1');
    const box2 = document.querySelector('.box2');

    // 设置初始位置
    let x = 0;

    // 绑定鼠标移入事件
    box1.addEventListener('mouseover', () => {
        let intervalId = setInterval(() => {
            x -= 1; // 每次向左移动 1px
            box2.style.left = x + 'px';
        }, 10); // 每 10 毫秒移动一次

        // 鼠标移出 box1 时清除定时器
        box1.addEventListener('mouseout', () => {
            clearInterval(intervalId);
        });
    });

    // 绑定鼠标移出事件
    box1.addEventListener('mouseout', () => {
        let intervalId = setInterval(() => {
            x += 1; // 每次向右移动 1px
            box2.style.left = x + 'px';
            if (x >= 0) { // 当回到初始位置时停止
                clearInterval(intervalId);
                x = 0;
            }
        }, 10); // 每 10 毫秒移动一次
    });
</script>

5、boder实现0.5像素

实现方法：CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能代码如下：

::before 伪元素的主要原因是为了避免直接修改元素本身的边框属性 ，从而保持元素的原始尺寸和布局。

* {
  margin: 0;
  padding: 0;
  }

.border3 {
  position: relative; /* 使其成为相对定位元素，以便伪元素可以相对于它进行定位 */
}

.border3::before {
  content: ''; /* 伪元素必须有 content 属性，即使为空 */
  position: absolute; /* 使伪元素绝对定位 */
  width: 200%; /* 将伪元素的宽度设置为父元素的两倍 */
  height: 200%; /* 将伪元素的高度设置为父元素的两倍 */
  border: 1px solid red; /* 设置 1px 的红色边框 */
  transform-origin: 0 0; /* 将变换的原点设置为左上角 */
  transform: scale(0.5, 0.5); /* 将伪元素缩小 50% */
  box-sizing: border-box; /* 将边框和内边距包含在元素的总宽度和高度中 */
}
1
2
3
4
5
  
# 6.场景题（两个盒子，左边固定宽，右边自适 应，你能想到几种方法）

#### 方法一：float来和BFC实现

.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}

.left {
width: 200px;
height: 100%;
background: red;
float: left;
}

.right {
height: 100%;
background: pink;
overflow: hidden; /* 触发 BFC */
}

1
2
3


#### 方法二：absolute定位和margin值实现

.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
position: relative; /* 使 .content 成为相对定位元素 */
}

.left {
width: 200px;
height: 100%;
background: red;
position: absolute; /* 绝对定位 */
}

.right {
height: 100%;
background: pink;
margin-left: 200px; /* 留出左侧元素的空间 */
}

1
2
3


#### 方法三：calc(100% - 固定内容的宽度) 用calc函数动态计算数值

.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}

.left {
width: 200px;
height: 100%;
background: red;
float: left;
}

.right {
height: 100%;
background: pink;
float: left;
width: calc(100% - 200px); /* 使用 calc() 函数计算宽度 */
}


#### 方法四：flex布局轻松搞定

**`flex: 1;` 的含义：**

- **`flex-grow: 1;`:** 表示该项目将占用剩余空间的 1 份。如果有多个项目设置了 `flex-grow`，它们将根据各自的值按比例分配剩余空间。
- **`flex-shrink: 1;` (默认值):** 表示当容器空间不足时，该项目将按比例缩小 1 份。
- **`flex-basis: 0%;` (默认值):** 表示该项目在分配剩余空间之前，其初始主尺寸为 0。

.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
display: flex;
}

.left {
width: 200px;
height: 100%;
background: red;
}

.right {
height: 100%;
background: pink;
flex: 1; /* 自动填充剩余空间 */
}

1
2
3


#### 方法五：使用table和table-cell实现

.content {
border: 1px solid #000;
width: 100%;
height: 800px;
display: table;
}

.left {
width: 200px;
height: 100%;
background: red;
display: table-cell;
}

.right {
height: 100%;
background: pink;
display: table-cell;
}


# 7.css布局，左侧宽度最小150px，最大25 %， 右侧自适应。怎么实现

#### 方法一：1.float+BFC【BFC区域不会和设置浮动的区域重合】

```css
.left{ 

min-width: 150px;

max-width: 25%; 

height: 300px; 

background-color: red; 

float: left; 

} 

.right{ 

height: 300px; 

background-color: yellow; 

overflow: hidden;

}

方法二：弹性盒子

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
}

.left {
  min-width: 150px;
  max-width: 25%;
  height: 300px;
  background: green;
}

.right {
  flex: 1;
  height: 300px;
  background: red;
}

8.css引入的方式有哪些，link和@import的区别是什么

XHTML（可扩展超文本标记语言）是一种标记语言，它具有与 HTML 相同的表达能力，但语法更加严格。它是 HTML 的一个更严格和更纯净的版本，基于 XML 标准。

XHTML 的主要特点：

基于 XML 标准： XHTML 的语法规则遵循 XML 标准，这意味着它必须符合 XML 的严格语法要求。
大小写敏感： XHTML 标签和属性名都是大小写敏感的，例如  和  是不同的标签。
标签必须正确嵌套： XHTML 标签必须正确嵌套，例如 This is bold text. 是错误的，正确的写法是 This is bold text.。
所有标签必须关闭： XHTML 中的所有标签都必须关闭，即使是空标签，例如   必须写成  。
属性值必须用引号括起来： XHTML 中的属性值必须用引号括起来，例如 This is an example.。

区别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。

区别2：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而 @import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候明显。

区别3：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而 link标签无此问题。

区别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制 dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

9.一个容器（页面），里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应

* {

 margin: 0;

 padding: 0;

}
.container {

 max-width: 1000px;

 height: 500px;

 background-color: yellow;

 margin: 20px auto;

 display: flex;

}
.container .left {

 width: 300px;

 background-color: orange;

}
.container .right {

 flex: 1;

 background-color: red;

}

10.CSS3动画知道吗，怎么实现的

CSS3动画主要是通过animation这个属性来进行实现，使用动画的时候需要先进行声明动画然后再去调用，哪里需要产生动画效果哪里就使用animation进行调用

* {

 margin: 0;

 padding: 0

}



div {

 width: 200px;

 height: 200px;

 background-color: red;

 /*调用动画*/

 animation: movers 20s linear infinite alternate

}

/*声明动画*/

@keyframes movers {

 form {

  width: 200px;

  height: 200px;

  background-color: red;

 }
 to {

  width: 400px;

  height: 400px;

  background-color: green;

  border-radius: 50%;

 }}

animation:复合属性

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

form 初始状态 to 结束装填可以替换成 0% 初始状态 100% 结束状态后面的百分比可以称之为关键帧动画

11.CSS3新增了哪些东西

1. 选择器:

结构性伪类选择器:
- :first-of-type 选择属于其父元素的首个
  元素的每个
  元素。
- :last-of-type
- :only-of-type
- :only-child
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n) 选择属于其父元素的第二个子元素的每个
  元素。
目标伪类选择器: :target
UI 元素状态伪类选择器:
- :enabled
- :disabled
- :checked
属性选择器:
- [attribute]
- [attribute=value]
- [attribute~=value]
- [attribute|=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]

2. 盒子模型:

border-radius: 创建圆角边框。
box-shadow: 为元素添加阴影效果。
box-sizing: 控制盒子模型的计算方式 (content-box 或 border-box)。
border-image: 使用图片作为边框。

3. 背景和边框:

background-size: 设置背景图片的大小。
background-origin: 指定背景图片的定位区域。
background-clip: 指定背景的绘制区域。
multiple backgrounds: 允许为一个元素设置多个背景图片。
linear-gradient() 和 radial-gradient(): 创建渐变背景。

4. 文本效果:

text-shadow: 为文本添加阴影效果。
word-wrap (现已更名为 overflow-wrap): 控制文本的换行行为。
text-overflow: 指定当文本溢出容器时如何显示。
word-break: 指定如何断开单词。

5. 字体:

@font-face 规则: 允许使用自定义字体。

6. 2D/3D 变换:

transform 属性: 实现元素的 2D 或 3D 变换，例如旋转、缩放、平移等。
transform-origin 属性: 设置变换的原点。
perspective 属性: 设置 3D 变换的透视效果。

7. 过渡和动画:

transition 属性: 实现平滑的过渡效果。
animation 属性: 创建复杂的动画效果。
@keyframes 规则: 定义动画的关键帧。

8. 多列布局:

column-count: 指定列数。
column-gap: 设置列之间的间距。
column-rule: 设置列之间的分割线。
column-fill: 控制列的填充方式。
column-span: 指定元素是否跨越多个列。
column-width: 设置列的宽度。

9. 其他特性:

媒体查询 (Media Queries): 允许根据不同的设备特性应用不同的样式。
响应式设计: 使用 CSS3 的新特性，例如媒体查询、弹性布局等，可以创建适应不同屏幕尺寸的网页。

12.当margin-top、padding-top 的值是百分比时,分别是如何计算的?

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢

正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。

13.定位知道吗，说下几种不同的定位分别有什么特点，详细说明

static静态定位，是元素自带的默认的定位方式。

relative是相对定位，他是基于元素本身的位置进行定位的，不会脱离文档流。

fixed是固定定位是基于浏览器窗口进行定位的，会脱离文档流。参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影响

absolute是绝对定位，是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文档流，常用的场景是子绝父相。

sticky是粘性定位，是css新增的属性值；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位要求时；position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。

14.display有哪几种属性值？分别代表什么？ Img属于什么元素？

display控制元素的显示类型

常用的 display 属性值：

none: 元素不显示，并且不占据任何空间。它就像从文档流中被移除一样，后续元素会占据其原本的位置。常用于隐藏元素。
block: 元素显示为块级元素。块级元素会独占一行，并且可以设置宽度和高度。常见的块级元素有 div、p、h1-h6、ul、ol、li 等。
inline: 元素显示为行内元素。行内元素不会独占一行，其宽度和高度由内容决定，并且会与其他行内元素排列在同一行。常见的行内元素有 a、span、img、strong、em 等。
inline-block: 元素显示为行内块元素。行内块元素结合了块级元素和行内元素的特点，既可以设置宽度和高度，又可以与其他行内元素排列在同一行。常见的行内块元素有 input、button、textarea 等。
flex: 将元素转换为 Flex 容器，启用 Flexbox 布局。Flexbox 布局是一种强大的布局方式，可以轻松地创建灵活、响应式的布局。
grid: 将元素转换为 Grid 容器，启用 Grid 布局。Grid 布局是一种二维布局方式，可以轻松地创建复杂的网格布局。
table、table-row、table-cell 等: 将元素转换为表格元素，用于创建表格布局。

其他 display 属性值：

除了以上常用的属性值之外，display 属性还有其他一些不太常用的属性值，例如 list-item(此元素会作为列表显示。)、run-in(此元素会根据上下文作为块级元素或内联元素显示。)、table 等

img属于什么元素：浏览器中的computed计算属性中的图片的display的取值为inline，虽然为inline 但是实际开发的时候图片是作为行内块元素进行使用的，因为遵循能设置宽度高度，并且还能横向显示；所以属于行内块元素，但是有些程序员也会把图片认为是行内元素也是可以(由于 img 元素可以设置宽度和高度，并且可以与其他行内元素排列在同一行，因此它在实际应用中更像是行内块元素。)，从另一个角度讲img也称作是置换元素；置换元素是指其内容不受 CSS 的控制，而是由外部资源决定的元素。常见的置换元素还有 iframe、video、audio 等。

15.display：inline-block后为什么有间距

display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。

解决这种问题的方式有：

将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。

给元素设置float:left,缺点需要清除浮动。

设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。

16.Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?

Doctype的作用

1.<！DOCTYPE>声明叫做文档类型DTD，它的作用就是用来标识浏览器使用哪种文档类型，让浏览器知道以何种方式解析文档。

2.必须位于HTML文档的第一行，处于标签之前，但是不属于HTML文档标签。

3.声明文档的解析类型（document.compatMode），是为了避免浏览器的怪异模式。

核心区别:

严格模式 (Standards Mode): 浏览器按照 W3C 标准解析渲染页面，确保跨浏览器一致性。
混杂模式 (Quirks Mode): 浏览器模拟旧版浏览器的行为，以兼容早期网页的渲染方式，但可能导致不同浏览器显示差异。

触发模式的关键：DOCTYPE 声明

严格模式：
- 使用 严格的 DOCTYPE 声明 ，例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 使用 HTML5 的 DOCTYPE 声明： <!DOCTYPE html> (HTML5 没有严格意义上的 DTD，但默认使用严格模式)
混杂模式：
- 缺少 DOCTYPE 声明
- 使用不规范或错误的 DOCTYPE 声明
- 使用过渡型 DOCTYPE 声明，但缺少 URL，例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

关键渲染差异 (示例)：

特性	严格模式	混杂模式
行内元素尺寸	无法设置宽度和高度	可以设置宽度和高度
百分比高度	需要父元素定义高度才能生效	即使父元素没有高度也可能生效
盒模型	`width`/`height` 只包含内容	`width`/`height` 包含内容、内边距和边框
`margin: 0 auto`	水平居中	可能失效
图片 `padding`	生效	失效

HTML5 的影响：

HTML5 简化了 DOCTYPE 声明 (<!DOCTYPE html>), 并鼓励使用严格模式，以提高网页的跨浏览器兼容性和可维护性。

17.对WEB标准以及w3c的理解与认识？

web标准可以分为结构、表现和行为

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点 1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助 1）标签字母要小写 2）标签要闭合 3）标签不允许随意嵌套 2.对于css和js来说 1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

18.FireFox中标签的居中问题的解决办法

dfvdfv

<div id="a" style="width:200px;border:1px solid red;text-align:center;">
  <div id="b" style="background-color:blue;width:30px;margin:0 auto">&nbsp;</div>
  </div>

text-align:center;针对行内元素、文本

margin:0 auto针对块级元素

19.Flex的横向平铺填充

<div style="width: 1000px;height: 500px;display: flex;">
<span style="flex:1;">1</span>
<span style="flex:1;">2</span>
<span style="flex:1;">3</span>
<span style="flex:1;">4</span>
<span style="flex:1;">5</span>
</div>

flex用法场景：

移动端和PC端布局中；能够高效解决间距调整的问题（移动端布局和PC端布局）

能快速高效实现元素水平垂直居中（点击删除的弹窗）

能够实现快速元素均分，避免了百分比设置的不确定性

快速实现多列布局，能高效实现瀑布流布局

后台管理系统的两栏和三栏布局

20.flex:0 1 100px什么意思？flex两个参数,三个参数什么意思？表示三个参数，flex-grow、 flex-shrink、flex-basis

1.flex：1 解析为 flex：1 1 0%。2.flex：auto解析为 flex：1 1 auto。3.flex：none解析为 flex：0 0auto。4.flex：解析为flex：0 0 auto。4.flex：0 auto解析为flex：0 1 auto。

flex属性是flex-grow（放大）、flex-shrink（缩小）、flex-basis（宽度）的简写属性。
flex-grow默认值为0，当值大于0时，当父元素有剩余空间时当前元素放大，父元素没有剩余空间时，该元素不放大。
flex-shrnk默认值为1，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小。
flex-basis相当于width属性。

21.父元素visibility：hidden；子元素设置 visibility：visible，子元素显示吗

这时候子元素是显示的，原理如下：当只是给父元素添加visibility：hidden，子元素会继承父元素的visibility：hidden的值，也会跟着父元素隐藏。如果给父元素添加visibility：hidden；同时在给子元素添加visibility：visible，子元素是显示的。

原因：添加给子元素visibility：visible是大于父元素添加的visibility：hidden的。所以优先执行子元素的visibility：visible属性。

22.知道渐变嘛，说下你的了解

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

基本语法:background-image: linear-gradient(direction, color-stop1, color-stop2, …);

径向渐变（Radial Gradients）- 由它们的中心定义

基本语法:background-image: radial-gradient(shape size at position, start-color, …, lastcolor);

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。

size的取值 closest-side，farthest-side，closest-corner，farthest-corner

重复渐变:repeating-linear-gradient() 函数用于重复线性渐变：

#grad { /* 标准的语法 */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }

23.一条0.5px的线，几种方法

1.transform: scale(0.5,0.5);

2.<meta name="viewport" content="width=device-width, initial-scale=0.5, minimumscale=0.5, maximum-scale=0.5"/><!--
这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px
要记得viewport只针对于移动端，只在移动端上才能看到效果
-->

3.border: 0.5px solid red;//ios8以上支持，以下显示为0

渐变模拟：设置 1px 通过 css 实现的背景图片，50%有颜色，50%透明。

-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);

前端八股-他人分享

http://example.com/2024/08/11/前端八股-他人分享/

作者

John Doe

发布于

2024年8月11日

许可协议

面经上一篇

算法hot150 下一篇

前端八股-他人分享

1.app怎么做适配的

2.rem em vw vw 百分比区别

3.750px 设计稿，20px 为多少 rem?

4.简单的一个盒子移动到另一个盒子，你用什 么方式实现动画效果

1.使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置

2.使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现

3.可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发 移动

5、boder实现0.5像素

方法二：弹性盒子

8.css引入的方式有哪些，link和@import的 区别是什么

9.一个容器（页面），里面有两个div左 右摆放并且高度和容器高度一致，左div不会随 着页面左右伸缩而变化，右div随页面左右伸缩 宽度自适应

10.CSS3动画知道吗，怎么实现的

11.CSS3新增了哪些东西

12.当margin-top、padding-top 的值是百分比 时,分别是如何计算的?

13.定位知道吗，说下几种不同的定位分别有什么特点，详细说明

14.display有哪几种属性值？分别代表什么？ Img属于什么元素？

15.display：inline-block后为什么有间距

16.Doctype的作用? 严格模式和混杂模式的区 分，以及如何触发这2种模式?

17.对WEB标准以及w3c的理解与认识？

18.FireFox中标签的居中问题的解决办法

19.Flex的横向平铺填充

20.flex:0 1 100px什么意思？flex两个参数,三个 参数什么意思？表示三个参数，flex-grow、 flex-shrink、flex-basis

21.父元素visibility：hidden；子元素设置 visibility：visible，子元素显示吗

22.知道渐变嘛，说下你的了解

23.一条0.5px的线，几种方法

4.简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

3.可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动

8.css引入的方式有哪些，link和@import的区别是什么

9.一个容器（页面），里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应

12.当margin-top、padding-top 的值是百分比时,分别是如何计算的?

16.Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?

20.flex:0 1 100px什么意思？flex两个参数,三个参数什么意思？表示三个参数，flex-grow、 flex-shrink、flex-basis