실제 프론트엔드 면접 질문 분석

이번에는 실제 프론트엔드 면접 질문 분석을 가져오겠습니다. 실제 프론트엔드 면접 질문 분석 시 주의사항은 무엇인가요?

프런트 엔드 인터뷰를 위한 CSS

---

display: none; 및 visible: hide;

• Contact: 둘 다 요소를 보이지 않게 만들 수 있습니다.

• 차이:

• display :none; 렌더링 시 요소가 렌더링 트리에서 완전히 사라지고 공간을 차지하지 않습니다. visibility:hidden; , 렌더러 요소는 계속 공간을 차지하지만 콘텐츠는 보이지 않습니다display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见

• display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式

• 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

• 读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

css hack原理及常用hack

• 原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。

• 常见的hack有

• 属性hack

• 选择器hack

• IE条件注释

link 与 @import 的区别

• link 是HTML方式， @import 是CSS方式

• link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现FOUC

• link 可以通过 rel="alternate stylesheet" 指定候选样式

• 浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式

• @import 必须在样式规则之前，可以在css文件中引用其他文件

• 总体来说：link优于@import

CSS有哪些继承属性

• 关于文字排版的属性如：

• word-break

• letter-spacing

• text-align

• text-rendering

• word-spacing

• white-space

• text-indent

• text-transform

• text-shadow

• font

• line-height

• color

• visibility

• cursor

外边距折叠(collapsing margins)

• 毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：

• 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

• 浮动元素或inline-block元素或绝对定位元素的margin

  🎜🎜display: none; 렌더링 트리의 요소는 하위 노드의 속성을 수정하여 표시할 수 없습니다. visibility:hidden은 상속된 속성입니다. visibility: visible;을 설정하면 하위 노드가 일반 흐름을 명시적으로 🎜🎜🎜🎜 수정할 수 있습니다. display 요소는 일반적으로 문서 리플로우를 발생시킵니다. visibility 속성을 ​​수정하면 요소가 다시 그려집니다🎜🎜🎜🎜스크린 리더는 display: none; 요소의 내용을 읽지 않습니다. code>visibility : 숨겨진 요소 콘텐츠🎜🎜

🎜🎜css 해킹 원리 및 일반적으로 사용되는 해킹🎜🎜🎜🎜🎜원리: CSS에 대한 다양한 브라우저 지원 및 다양한 구문 분석 결과를 사용하여 작성 특정 검색 장치 스타일에 대해. K 공통 HACK 속성 hack🎜🎜🎜🎜 Selector Hack🎜🎜🎜🎜ie 조건 참고 🎜🎜 🎜🎜Link 및 @import 🎜🎜link는 HTML입니다. 메서드, @import는 CSS 메서드🎜🎜🎜🎜link code>는 최대 범위까지 병렬 다운로드를 지원합니다. > @import 중첩이 너무 많으면 직렬 다운로드가 발생하고 FOUC🎜🎜🎜🎜링크를 전달할 수 있습니다. rel="alternate stylesheet"는 후보 스타일을 지정합니다 🎜🎜 🎜🎜브라우저는 @import 이전의 link를 지원합니다. 이전 브라우저에서는 @import를 사용할 수 있습니다. 이 도구는 스타일을 숨깁니다🎜🎜🎜🎜@import는 스타일 규칙 앞에 와야 하며 css 파일에서 다른 파일을 참조할 수 있습니다🎜🎜🎜🎜일반적으로 link가 @import🎜🎜🎜🎜CSS에는 어떤 상속된 속성이 있나요? 🎜🎜🎜🎜letter-spacing🎜🎜🎜🎜text- 정렬🎜🎜🎜🎜텍스트 렌더링🎜🎜🎜🎜 단어 간격🎜🎜🎜🎜공백🎜🎜🎜 🎜텍스트 들여쓰기🎜🎜🎜🎜텍스트 변환🎜🎜🎜🎜텍스트 그림자🎜🎜🎜🎜글꼴🎜🎜🎜🎜줄 높이🎜🎜🎜🎜색상🎜🎜🎜🎜가시성🎜🎜🎜🎜커서🎜🎜🎜🎜collapsing margins🎜🎜🎜 🎜🎜두 개 이상의 인접한 margin이 하나의 margin으로 병합됩니다. 이를 여백이라고 합니다. 무너지다. 규칙은 다음과 같습니다: 🎜🎜🎜🎜🎜일반 흐름에서 둘 이상의 인접한 블록 요소의 수직 여백은 🎜🎜🎜🎜플로팅 요소 또는 인라인 블록으로 축소됩니다. code> 요소의 여백 또는 절대 위치 요소는 수직 방향에서 다른 요소의 여백과 함께 축소되지 않습니다🎜

블록 수준 서식 지정 컨텍스트를 생성하는 요소에는 해당 하위 요소와 여백 접기가 없습니다.

요소의 margin-bottom 및 margin-top자체 >인접하면 접힐 수도 있습니다. margin-bottom和margin-top相邻时也会折

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 有两种， IE 盒子模型、W3C 盒子模型；

• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

• 区  别： IE的content部分把 border 和 padding计算了进去;

CSS选择符有哪些？哪些属性可以继承？

• id选择器（ # myid）

• 类选择器（.myclassname）

• 标签选择器（p, h1, p）

• 相邻选择器（h1 + p）

• 子选择器（ul > li）

• 后代选择器（li a）

• 通配符选择器（ * ）

• 属性选择器（a[rel = "external"]）

• 伪类选择器（a:hover, li:nth-child）

• 可继承的样式： font-size font-family color, UL LI DL DD DT

• 不可继承的样式：border padding margin width height

CSS优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准

• 载入样式以最后载入的定位为准

• 优先级为: !important >  id > class > tag important 比 内联优先级高

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中

如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？

• 给p设置一个宽度，然后添加margin:0 auto

• 표준 CSS 박스 모델을 소개하시나요? IE 하위 버전의 박스 모델 간 차이점은 무엇입니까?

IE 박스 모델과 W3C 박스 모델의 두 가지 유형이 있습니다.
박스 모델: 콘텐츠, 패딩, 여백, 테두리

차이점: IE의 콘텐츠 부분은 테두리와 패딩을 고려합니다. ;

• CSS 선택자는 무엇인가요? 어떤 속성을 상속받을 수 있나요?
id 선택기(# myid)
class 선택기(.myclassname)
태그 선택기(p, h1, p)
인접 선택기(h1 + p)
하위 선택기(ul > li)

하위 항목 선택기 (li a)

• 와일드카드 선택기 (*)

• 속성 선택기(a[rel = "external"])

의사 클래스 선택기(a:hover, li: nth-child)
상속 가능한 스타일: 글꼴 크기 글꼴 계열 색상, UL LI DL DD DT

• 상속 불가능한 스타일 ：테두리 패딩 여백 너비 높이 code>

• CSS 우선순위 알고리즘을 계산하는 방법은 무엇입니까?

• 우선순위 원칙, 동일한 중량 조건에서 가장 가까운 스타일 정의가 우선합니다.

• 로딩 스타일은 마지막으로 로드된 위치를 따릅니다.

  🎜🎜🎜우선순위는 다음과 같습니다: !important > > 클래스 > 태그 important는 inline🎜🎜🎜🎜🎜CSS3의 새로운 의사 클래스가 무엇인가요? 🎜🎜

  p{
      width:200px;
      margin:0 auto;
   }

  🎜🎜P를 중앙에 맞추는 방법은? 부동 요소를 중앙에 배치하는 방법은 무엇입니까? 절대 위치에 있는 p를 중앙에 배치하는 방법은 무엇입니까? 🎜🎜🎜🎜🎜너비를 p로 설정한 다음 margin:0 auto 속성을 ​​추가하세요🎜🎜🎜

  //确定容器的宽高 宽500 高 300 的层
  //设置层的外边距
   .p {
        width:500px ; height:300px;//高度可以不设
        margin: -150px 0 0 -250px;
        position:relative;         //相对定位
        background-color:pink;     //方便看效果
        left:50%;
        top:50%;
   }

  🎜🎜🎜플로팅 요소를 중앙에 배치🎜🎜🎜

    position: absolute;
    width: 1200px;
    background: none;
    margin: 0 auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

  🎜🎜 🎜 절대 위치에 있는 p를 중심으로 🎜🎜🎜

  // 把上、左、右三条边隐藏掉（颜色设为 transparent）
  #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

  🎜🎜디스플레이의 가치는 무엇인가요? 기능을 설명하세요. 🎜🎜🎜🎜🎜블록은 블록 유형 요소처럼 표시됩니다. 🎜🎜🎜🎜none 기본값입니다. 인라인 요소 유형처럼 보입니다. 🎜🎜🎜🎜inline-block은 인라인 요소처럼 표시되지만 내용은 블록형 요소처럼 표시됩니다. 🎜🎜🎜🎜list-item은 블록형 요소처럼 표시되며 스타일 목록 마크업을 추가합니다. 🎜🎜🎜🎜table 이 요소는 블록 수준 테이블로 표시됩니다. 🎜🎜🎜🎜inherit 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. 🎜🎜🎜🎜🎜 상대 및 절대 위치 지정 원점은 무엇입니까? 지위? 🎜🎜🎜🎜🎜absolute🎜🎜🎜🎜🎜 값이 정적이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 요소를 생성합니다. 🎜🎜🎜🎜🎜고정(이전 IE는 지원하지 않음) 🎜🎜🎜🎜🎜 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 🎜🎜🎜🎜🎜relative🎜🎜🎜🎜🎜 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 🎜🎜🎜🎜🎜정적🎜

• 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。

• inherit

• 规定从父元素继承 position 属性的值

CSS3有哪些新特性？

• 新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）

• 圆角           （border-radius:8px）

• 多列布局        （multi-column layout）

• 阴影和反射        （ShadowReflect）

• 文字特效      （text-shadow、）

• 文字渲染      （Text-decoration）

• 线性渐变      （gradient）

• 旋转          （transform）

• 增加了旋转,缩放,定位,倾斜,动画，多背景

• transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

用纯CSS创建一个三角形的原理是什么？

// 把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

一个满屏 品 字布局 如何设计?

• 简单的方式：

• 上面的p宽100%，

• 下面的两个p分别宽50%，

• 然后用float或者inline使其不换行即可

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

• IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;

• Firefox下,只能使用getAttribute()获取自定义属性。

• 解决方法:统一通过getAttribute()获取自定义属性

• IE下,even对象有x,y属性,但是没有pageX,pageY属性

• Firefox下,event对象有pageX,pageY属性,但是没有x,y属性

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

• 行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

为什么要初始化CSS样式

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

对BFC规范(块级格式化上下文：block formatting context)的理解？

• 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型

• 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响

css定义的权重

// 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值：
/*权重为1*/
p{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 p{
}
/*权重为10+1=11*/
.class1 p{
}
/*权重为10+10+1=21*/
.class1 .class2 p{
}
// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

display:inline-block 什么时候会显示间隙？(携程)

• 공백 제거, 음수 여백 사용, 글꼴 크기:0, 문자 간격, 단어 간격 사용

부동 및 투명 부동에 대해 이야기해 보세요

• 부동 상자는 왼쪽이나 왼쪽으로 이동할 수 있습니다. 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 경계에 닿을 때까지 오른쪽으로 이동합니다. 플로트 상자가 문서의 일반 흐름에 없기 때문에 문서의 일반 흐름의 블록 상자는 플로트 상자가 존재하지 않는 것처럼 동작합니다. 플로팅 블록박스는 일반적인 문서 흐름의 블록박스 위에 떠있게 됩니다

표준 CSS 박스 모델을 소개하시나요? IE 하위 버전의 박스 모델 간 차이점은 무엇입니까?

• Box 모델 구성: 콘텐츠, 패딩, 테두리, 여백

• IE8 이하 브라우저의 경우 DOCTYPE이 선언되지 않으며 콘텐츠 너비와 높이가 달라집니다. 이상한라고 불리는 내부 패딩과 테두리가 포함되어 있습니다. 상자 모델(IE 상자 모델)

• 표준(W3C) 상자 모델: 요소 너비 = 너비 + 패딩 + 테두리 + 여백

• 이상한(IE) 상자 모델: 요소 너비 = 너비 + 여백

• The 표준 브라우저는 CSS3의 box-sizing: border-box 속성을 설정하여 "이상한 모드" 구문 분석과 너비 및 높이 계산을 시작합니다

상자 크기 조정에 일반적으로 사용되는 속성은 무엇입니까? 각각의 기능은 무엇입니까?

• box-sizing: content-box; // 기본 표준(W3C) 상자 모델 요소 효과

• box-sizing: border-box; // 이상한(IE) 상자 모델 요소 효과 트리거

• box-sizing: acquire; // 상위 요소의 box-sizing 속성 값을 상속합니다.

CSS 선택자는 무엇인가요?

• id 선택자                                                                    ​

• 하위 선택기 ul > li

• 하위 항목 선택기 li a

• 와일드카드 선택기 *

• 속성 선택기 a[rel='external']

• 의사 클래스 선택기 a:hover, li: nth -child

• 어떤 CSS 속성을 상속받을 수 있나요? 상속받을 수 없는 속성은 무엇입니까?

• 상속 가능한 스타일: 글꼴 크기, 글꼴 계열, 색상, 목록 스타일, 커서

• 상속 불가능한 스타일: 너비, 높이, 테두리, 패딩, 여백, 배경

어떻게 되나요? CSS 계산 선택기 우선 순위?

• 가장 가까운 정의가 우선합니다. 인라인 스타일 > 내부 스타일 > 외부 스타일

• 외부에서 로드된 스타일이 포함되면 나중에 로드된 스타일이 이전에 로드된 스타일 및 내부 스타일을 재정의합니다.

선택기 우선순위: 인라인 스타일[1000] > id[100] > class[10] > Tag[1]

• 동일한 속성 설정에서 !important가 가장 높은 우선순위를 갖습니다. 새로운 의사 클래스는 무엇입니까? 인라인 스타일로

• CSS3?

• :root html 요소와 동일한 문서의 루트 요소를 선택합니다.

• :empty 하위 요소가 없는 요소를 선택합니다.

:target 현재 활성화된 대상 요소를 선택합니다

• :not(selector) 선택기 요소 이외의 요소 선택

• :enabled 사용 가능한 양식 요소 선택

• :disabled 비활성화된 양식 요소 선택

• :checked 선택한 양식 요소 선택

• :after inside the 요소 먼저 콘텐츠를 추가하세요

  위치: 요소 내부에 최종적으로 콘텐츠를 추가하기 전

• : NTH-Child(n)는 상위 요소 아래의 지정된 요소와 일치하고 NTH-Last-Child(n N )의 모든 하위 요소는 지정된 하위 요소와 일치합니다. 상위 요소 아래에서 모든 하위 요소 중 n번째 하위 요소를 정렬하며 뒤에서 앞으로

• :nth-child(odd)

• :nth-child(even)

• : nth-child (3n+1)

• :first-child

• :last-child

• :only-child

• :nth-of-type(n) 상위 요소 아래에 지정된 일치 하위 요소 , n번째로 정렬됨

• :nth-last-of-type(n)은 유사한 하위 요소 중 n번째로 정렬된 상위 요소 아래 지정된 하위 요소와 일치하며 뒤에서 앞으로 계산됩니다.

• :nth -of-type(홀수)

• :n번째 유형(짝수)

• :n번째 유형(3n+1)

• :first-of-type

• : last-of-type

• :only-of-type

• ::selection 사용자가 선택한 요소를 선택합니다

• :first-line 요소의 첫 번째 줄을 선택합니다

• :first -letter 요소의 첫 번째 문자를 선택하세요
요소를 숨기는 여러 가지 방법을 나열하세요

visibility: Hidden; 이 속성은 단순히 요소를 숨기지만 요소가 차지합니다. 공간은 여전히 ​​존재합니다

opacity : 0; CSS3 속성을 0으로 설정하면 요소가 완전히 투명해집니다.

• position:absolute; 요소를 가시 영역 외부에 배치하려면 큰 왼쪽 음수 위치를 설정하세요.

• display: none; 더 이상 문서의 공간을 차지하지 않습니다.

• transform: scale(0); 요소를 무한히 작게 조정하도록 설정하면 요소가 보이지 않고 요소의 원래 위치가 유지됩니다.
HTML5 속성, 효과는 디스플레이와 동일합니다. :none;, 그러나 이 속성은 요소의 상태를 기록하는 데 사용됩니다
height: 0;               요소의 높이를 0으로 설정하고 테두리를 제거하여

• <p hidden="hidden">

  filter: Blur(0); 이 요소는 페이지에서 "사라집니다"
rgba()의 투명도 효과와 불투명도의 차이점은 무엇입니까?

불투명도는 요소와 요소 내의 모든 콘텐츠(텍스트 포함)의 투명도에 영향을 미칩니다.

rgba()는 요소 자체의 색상이나 배경 색상에만 영향을 미치며 하위 요소는 투명도 효과

CSS 속성 콘텐츠의 기능은 무엇인가요?

content 속성은 추가 콘텐츠나 스타일을 삽입하기 위해 사전/이후 의사 요소에 특별히 적용됩니다.

CSS3의 새로운 기능은 무엇입니까?

새 선택기 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

flex box 모델 표시: flex;

• 다중 열 레이아웃 열 - 개수: 5;

• 미디어 쿼리 @media(최대 너비: 480px) {.box: {column-count: 1;}}

• 맞춤형 글꼴 @font-face{font-family: BorderWeb ; :url(BORDERW0.eot);}

• 색상 투명도 색상: rgba(255, 0, 0, 0.75);

• 둥근 모서리 테두리 반경: 5px;

• 그라디언트 배경:선형 -gradient (빨간색, 녹색, 파란색);

• 그림자 상자-그림자:3px 3px 3px rgba(0, 64, 128, 0.3);

• 반사 상자-반사: 2px 이하;

• 文字装饰       text-stroke-color: red;

• 文字溢出       text-overflow:ellipsis;

• 背景效果       background-size: 100px 100px;

• 边框效果       border-image:url(bt_blue.png) 0 10;

• 转换

• 旋转          transform: rotate(20deg);

• 倾斜          transform: skew(150deg, -10deg);

• 位移          transform: translate(20px, 20px);

• 缩放          transform: scale(.5);

• 平滑过渡       transition: all .3s ease-in .1s;

• 动画           @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

• Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局

经常遇到的浏览器的JS兼容性有哪些？解决方法是什么？

• 当前样式：getComputedStyle(el, null) VS el.currentStyle

• 事件对象：e VS window.event

• 鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y

• 按键码：e.which VS event.keyCode

• 文本节点：el.textContent VS el.innerText

请写出多种等高布局

• 在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像

• 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行

• css3 flexbox 布局： .container{display: flex; align-items: stretch;}

css垂直居中的方法有哪些？

• 如果是单行文本, line-height 设置成和 height 值

.vertical {
      height: 100px;
      line-height: 100px;
    }

• 已知高度的块级子元素，采用绝对定位和负边距

.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

• 未知高度的块级父子元素居中，模拟表格布局

• 缺点：IE67不兼容，父级 overflow：hidden 失效

.container {
      display: table;
    }
    .content {
      display: table-cell;
      vertical-align: middle;
    }

• 新增 inline-block 兄弟元素，设置 vertical-align

• 缺点：需要增加额外标签，IE67不兼容

.container {
  height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
  display: inline-block;  /*行内块显示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*设置新增元素高度为100%*/
}

• 绝对定位配合 CSS3 位移

.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}

• CSS3弹性盒模型

.container {
  display:flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
}

圣杯布局的实现原理？

• 要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽

• 好处：重要的内容放在文档流前面可以优先渲染

• 原理：利用相对定位、浮动、负边距布局，而不添加额外标签

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

什么是双飞翼布局？实现原理？

• 双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局

• 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

在CSS样式中常使用 px、em 在表现上有什么区别？

• px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能

• em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size

解释下什么是浮动和它的工作原理？

• 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。

此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

• 工作原理：

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素引起的问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素

• 与浮动元素同级的非浮动元素会跟随其后

列举几种清除浮动的方式？

• 添加额外标签，例如 <p style="clear:both"></p>

• 使用 br 标签和其自身的 clear 属性，例如 <br clear="all" />

• 父元素设置 overflow：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1;

• 父元素也设置浮动

• 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout

清除浮动最佳实践（after伪元素闭合浮动）：

.clearfix:after{
    content: "\200B";
    display: table;
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？

• 当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：

没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC

• 产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将停止之前的渲染。

• 等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。

• 解决方法：使用 link 标签将样式表放在文档 head

介绍使用过的 CSS 预处理器？

• CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）

• 开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用

• 使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性

• 最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS

CSS优化、提高性能的方法有哪些？

• 多个css合并，尽量减少HTTP请求

• 将css文件放在页面最上面

• 移除空的css规则

• 避免使用CSS表达式

• 选择器优化嵌套，尽量避免层级过深

• 充分利用css继承属性，减少代码量

• 抽象提取公共样式，减少代码量

• 属性值为0时，不加单位

• 属性值为小于1的小数时，省略小数点前面的0

• css雪碧图

浏览器是怎样解析CSS选择器的？

• 浏览器解析 CSS 选择器的方式是从右到左

在网页中的应该使用奇数还是偶数的字体？

• 在网页中的应该使用“偶数”字体：

• 偶数字号相对更容易和 web 设计的其他部分构成比例关系

• 使用奇数号字体时文本段落无法对齐

• 宋体的中文网页排布中使用最多的就是 12 和 14

margin和padding分别适合什么场景使用？

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin

• 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding

抽离样式模块怎么写，说出思路？

• CSS可以拆分成2部分：公共CSS 和 业务CSS：

• 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务

• 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

元素竖向的百分比设定是相对于容器的高度吗？

• 元素竖向的百分比设定是相对于容器的宽度，而不是高度

全屏滚动的原理是什么？ 用到了CSS的那些属性？

• 原理类似图片轮播原理，超出隐藏部分，滚动时显示

• 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

• 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本

• 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式

• 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

什么是视差滚动效果，如何给每页做不同的动画？

• 
  

• 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验

• 一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的

• 实现原理

• 以 “页面滚动条” 作为 “视差动画进度条”

• 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的

• 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

a标签上四个伪类的执行顺序是怎么样的？

link > visited > hover > active

• L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

伪元素和伪类的区别和作用？

• 伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。

• 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• 伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中双冒号和单冒号有什么区别？

• 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

• 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after

• 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

• 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

• 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

如何修改Chrome记住密码后自动填充表单的黄色背景？

• 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的

• 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"

• 解决方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a>
<a href="logo.jpg" download="网站LOGO" >下载</a>

iOS safari 如何阻止“橡皮筋效果”？

  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });

你对 line-height 是如何理解的？

• line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离

• 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的

• 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容

• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中

• line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高

• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px

• 百分比：将计算后的值传递给后代

设置元素浮动后，该元素的 display 值会如何变化？

• 设置元素浮动后，该元素的 display 值自动变成 block

怎么让Chrome支持小于12px 的文字？

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

  -webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思？

• font-style: oblique; 使没有 italic 属性的文字实现倾斜

如果需要手动写动画，你认为最小时间间隔是多久？

• 16.7ms 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms

display:inline-block 什么时候会显示间隙？

• 인라인 블록 요소가 줄바꿈이나 공백으로 구분되면 간격이 발생합니다.

• 인라인 블록이 아닌 수평 요소도 인라인 블록으로 설정하면 수평 간격이 생깁니다. 수직 -align:top;을 사용하여 수직 공백 제거

• 부모 요소에 글꼴 크기: 0을 추가하여 수직 공백을 제거하려면 하위 요소에 필요한 글꼴 크기를 설정하세요. 세로 간격을 없애기 위한 줄 간격은 있지만 코드 가독성이 떨어집니다

• overflow: 스크롤할 때 스크롤이 부드럽게 되는 문제를 어떻게 처리합니까?
스크롤 휠 이벤트를 듣고 jquery의 animate를 사용하면 특정 거리까지 스크롤할 때 부드러운 효과를 얻을 수 있습니다.

내부에 두 개의 PS가 있는 높이 적응형 p, 하나는 높이가 100px이고 다른 하나가 남은 높이를 채우길 바랍니다

옵션 1:

.sub { height: calc ( 100%-100px); }

옵션 2:

.container { 위치:상대적; }
• .sub { 위치: 절대: 100px; 하단: 0; }

  
  .sub { height: calc(100%-100px); }

• 方案2：
  .container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }

• 方案3：
  .container { display:flex; flex-direction:column; }
.sub { flex:1; }

  옵션 3:

  .container { display:flex-direction:column;

  
  

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:

• avalon 프런트 엔드 프로젝트에서 구문 분석 사용

• 
  React-router v4를 사용하는 단계에 대한 자세한 설명

🎜🎜

위 내용은 실제 프론트엔드 면접 질문 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!