実際のフロントエンド面接の質問の分析

今回は、実際のフロントエンド面接の質問の分析についてお届けします。実際のフロントエンド面接の質問を分析する際の注意点は何ですか?実際のケースを見てみましょう。

フロントエンドインタビュー用のCSS

---

display: none;とvisibility: hidden;

• 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 は、hidden を継承するため、消えます。 visibility:visible; を設定することで、子孫ノードは通常のフロー display 要素を明示的に変更できます。通常、ドキュメントのリフローが発生します。 visibility 属性を変更すると、要素が再描画されるだけです🎜🎜🎜🎜 スクリーン リーダーは、display: none; 要素の内容を読み取りません。 code>visibility : hidden 要素の内容🎜🎜

🎜🎜css ハックの原則と一般的に使用されるハック🎜🎜🎜🎜🎜原則: さまざまなブラウザーの CSS サポートとさまざまな解析結果を使用して書き込む特定のブラウジングデバイススタイル用。 K 共通の HACK 属性 hack🎜🎜🎜🎜 セレクター Hack🎜🎜🎜🎜ie 条件 注記 🎜🎜 🎜🎜Link と @import 🎜🎜link は HTML メソッド、@import は CSS メソッドです🎜🎜🎜🎜link code> は、 の並列ダウンロードを最大限にサポートします。 > @import ネストが多すぎるとシリアルダウンロードが発生し、FOUC🎜🎜🎜🎜link を渡すことができます。rel="alternate stylesheet " は候補スタイルを指定します 🎜🎜 🎜🎜ブラウザは、 @import よりも前の link をサポートしています。古いブラウザでは @import を使用できます。ツールはスタイルを非表示にします🎜🎜🎜🎜@import はスタイル ルールの前になければなりません。また、他のファイルは css ファイルで参照できます🎜🎜🎜🎜 一般に、link は @import🎜🎜🎜🎜 CSS にはどのような継承プロパティがありますか? 🎜🎜🎜🎜letter-spacing🎜🎜🎜🎜text-整列🎜🎜🎜🎜テキストレンダリング🎜🎜🎜🎜 単語間隔🎜🎜🎜🎜空白🎜🎜🎜 🎜text-indent🎜🎜🎜🎜text-transform code>🎜🎜🎜🎜<code>text-shadow🎜🎜🎜🎜font🎜🎜🎜🎜行の高さ🎜🎜🎜🎜color 🎜🎜🎜🎜visibility🎜🎜🎜🎜cursor🎜🎜🎜🎜マージンの縮小🎜🎜🎜 🎜🎜2 つ以上の隣接する margin は、マージンと呼ばれる 1 つの margin にマージされます崩壊。ルールは次のとおりです: 🎜🎜🎜🎜🎜 通常のフロー内の 2 つ以上の隣接するブロック要素の垂直方向の margin は崩壊します 🎜🎜🎜🎜 浮動要素または inline-blockcode> 要素の margin または絶対位置の要素は、垂直方向の他の要素のマージンと一緒に折りたたまれません🎜

ブロックレベルの書式設定コンテキストを作成する要素には、その子要素とのマージン折りたたみがありません

要素の 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 ボックス モデルの 2 つのタイプがあります。
ボックス モデル: コンテンツ、パディング、マージン、ボーダー

違い: IE のコンテンツ部分はボーダーとパディングを考慮します。 ;

• 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 code>

• CSS優先度アルゴリズムを計算するにはどうすればよいですか?

• 優先順位の原則、同じ重み条件では最も近いスタイル定義が優先されます

• 読み込みスタイルは最後に読み込まれた位置に従うものとします

  🎜🎜🎜優先順位は次のとおりです: !重要 > > クラス > タグ

はインラインよりも優先されます🎜🎜🎜🎜🎜 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;
}

🎜🎜displayの値は何ですか？機能を説明します🎜🎜🎜🎜🎜blockはブロック型要素のように表示されます。 🎜🎜🎜🎜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 什么时候会显示间隙？(携程)

• スペースの削除、負のマージンの使用、font-size:0、letter-spacing、word-spacingの使用

フロートとフロートのクリアについて説明します

• フロートボックスは左または左に移動できます外側の端が、含まれているボックスまたは別のフローティング ボックスの境界に触れるまで右に移動します。フローティング ボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフローのブロック ボックスは、フローティング ボックスが存在しないかのように動作します。フローティング ブロック ボックスは、ドキュメントの通常のフローのブロック ボックス上にフローティングします

標準の CSS ボックス モデルを導入しますか? IE の下位バージョンのボックス モデルの違いは何ですか?

• ボックスモデルの構成: コンテンツ、パディング、ボーダー、マージン

• IE8以下のブラウザではDOCTYPEが宣言されていないため、コンテンツの幅と高さが異なります 奇妙なものと呼ばれる内部パディングとボーダーが含まれていますボックス モデル (IE ボックス モデル)

• 標準 (W3C) ボックス モデル: 要素の幅 = width + padding + border + margin

• 奇妙な (IE) ボックス モデル: 要素の幅 = width + margin

• 標準ブラウザは、CSS3 の box-sizing: border-box 属性を設定することで、「奇妙なモード」の解析と幅と高さの計算をトリガーします

box-sizing の一般的に使用される属性は何ですか?それぞれの機能は何ですか?

• box-sizing: content-box; // デフォルト標準 (W3C) ボックス モデル要素の効果

• box-sizing: border-box; // 奇妙な (IE) ボックス モデル要素の効果をトリガーします

• box-sizing:inherit; // 親要素の box-sizing 属性の値を継承します

CSS セレクターとは何ですか? :

サブセレクター li

• 子孫セレクター li a

• ワイルドカードセレクター *

• 属性セレクター a[rel='external']

• 擬似-class selector a:hover, li: nth -child
どのような CSS プロパティを継承できますか?継承できないプロパティはどれですか?
• 継承可能なスタイル: フォントサイズ、フォントファミリー、カラー、リストスタイル、カーソル

• 継承できないスタイル: 幅、高さ、境界線、パディング、マージン、背景

• CSS はセレクターの優先順位を計算しますか?

最も近い定義を持つものが優先されます: インラインスタイル > 内部スタイル > 外部スタイル

• 外部からロードされたスタイルが含まれる場合、後でロードされたスタイルが以前にロードされたスタイルと内部スタイルをオーバーライドします

• セレクターの優先度: Inline style[1000] > id[100] > class[10] > 属性設定の中で、! important が最も高い優先度を持ちます。インラインスタイルの擬似クラス

CSS3?

• :root HTML要素に相当するドキュメントのルート要素を選択します

• :empty 子要素のない要素を選択します

• :target 現在アクティブなターゲット要素を選択します

• :not(selector) セレクター要素以外の要素を選択します

:enabled 使用可能なフォーム要素を選択します

:disabled 無効なフォーム要素を選択します

• :checked 選択されたフォーム要素を選択します

• :内要素 最初にコンテンツを追加します
在: 最終的に要素内にコンテンツを追加する前に

• : 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(奇数)

• :nth-of-type(even)

• :nth-of-type(3n+1)

• :first-of-type

• : last-of-type

• :only-of-type

• ::selection ユーザーが選択した要素を選択

• :first-line 要素の最初の行を選択

• :first -letter 要素の最初の文字を選択します
要素を非表示にする方法をいくつか挙げてください

visibility: hidden; この属性は単に要素を非表示にしますが、要素はスペースを占有します

不透明度: 0; CSS3 プロパティ、0 を設定すると要素を完全に透明にすることができます

• 要素を表示領域の外側に配置するには、大きな左の負の位置を設定します

• 要素は非表示になります。文書内のスペースを占有することはなくなります。

• transform:scale(0); 要素を無限に小さくスケールするように設定すると、要素は非表示になり、要素の元の位置が保持されます
HTML5 属性、効果は表示と同じです:none; ですが、この属性は要素のステータスを記録するために使用されます
height: 0; 要素の高さを 0 に設定し、境界線を削除します

• <p hidden="hidden">

  ので、この要素はページから「消えます」
rgba() の透明効果と opacity の違いは何ですか?

不透明度は要素の透明度および要素内のすべてのコンテンツ（テキストを含む）に作用します

rgba() は要素自体の色またはその背景色にのみ作用し、子要素は要素を継承しません透明効果

CSS 属性の内容は何をするのですか?

content 属性は、追加のコンテンツやスタイルを挿入するために、疑似要素の前後に特別に適用されます

CSS3 の新機能は何ですか?

新しいセレクター p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

フレックスボックスモデル表示: flex;

• 複数列レイアウト列 - count: 5;

• メディアクエリ @media (max-width: 480px) {.box: {column-count: 1;}}

• パーソナライズされたフォント @font-face{font-family: BorderWeb ; :url(BORDERW0.eot);}

• カラー透明度カラー: rgba(255, 0, 0, 0.75);

• 角丸ボーダー半径: 5px;

• グラデーション背景:linear -gradient (赤、緑、青);

• shadow box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

• reflection box-reflect: 以下 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 什么时候会显示间隙？

• 隣接するインラインブロック要素が改行またはスペースで区切られている場合、

• インラインブロックに設定されている場合、非インラインブロックの水平要素にも水平方向のスペースが生じます。

  vertical -align:top; を使用して垂直方向のギャップを排除します

• 親要素に font-size: 0 を追加して、垂直方向のギャップを排除することができます

• li タグを記述します縦の隙間をなくすために同じ行に隙間がありますが、コードの可読性は悪いです
overflow: スクロール時にスムーズにスクロールできない問題に対処するにはどうすればよいですか?

スクロール ホイール イベントをリッスンし、jquery のアニメーションを使用して、一定の距離までスクロールするときにスムーズな効果を実現します。

内部に 2 つの ps を含む高さ適応 p で、1 つは高さ 100px で、もう 1 つは残りの高さを埋めることを願っています

オプション 1:

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

• 
  .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; }オプション 2:

  .container {position:relative; }

  .sub {position:absolute;ボトム : 0; }

  
  

  オプション 3:
.container {display:flex; }
• .sub { flex:1 }

• この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

• avalon フロントエンドプロジェクトでの解析の使用
  

🎜🎜 React-router v4 を使用する手順の詳細な説明🎜🎜🎜🎜🎜 🎜

以上が実際のフロントエンド面接の質問の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。