Maison > Article > interface Web > Analyse de vraies questions d'entretien frontal

Analyse de vraies questions d'entretien frontal

php中世界最好的语言original: 2018-05-24 10:58:491573parcourir

Cette fois, je vais vous apporter une analyse de vraies questions d'entretien frontal. Quelles sont les précautions à prendre pour analyser de vraies questions d'entretien frontal. Ce qui suit est un cas pratique, jetons un coup d'oeil.

CSS pour les entretiens front-end

La différence entre l'affichage : aucun et la visibilité :

Contact : Ils peuvent tous les deux rendre l'élément invisible
La différence :

fera disparaître complètement l'élément ; depuis l'arbre de rendu, il n'occupe aucun espace lors du rendu display:none; ne fera pas disparaître l'élément de l'arbre de rendu. L'élément de rendu continue d'occuper de l'espace, mais le contenu n'est pas visible visibility: hidden
; qu'il soit hérité ou non, le nœud descendant disparaît en raison de la disparition de l'élément de l'arbre de rendu, et il ne peut pas être affiché en modifiant l'attribut du nœud descendant
; est un attribut hérité, le nœud descendant disparaît car il hérite de display: none, et le nœud descendant peut être affiché en définissant visibility:hidden; La formule hiddenvisibility: visible
d'un élément dans un flux régulier provoquant généralement une redistribution du document. La modification de l'attribut
entraînera uniquement le redessin de l'élément displayvisibility
, il lira le contenu de l'élément
. 🎜> élément display: none;visibility: hidden

principes de hack CSS et hacks couramment utilisés

La différence entre link et @import

est la méthode
, link est la méthode HTML @importCSS
prend en charge le téléchargement parallèle au maximum,
une imbrication excessive conduit à sérialisation Téléchargement, FOUC link @import
peut être spécifié via
pour spécifier le style candidat linkrel="alternate stylesheet"
plus tôt que
, vous pouvez utiliser link pour masquer les styles des anciens navigateurs @import@import
doit être avant les règles de style, vous pouvez référencer d'autres fichiers dans le fichier
@importcss
est meilleur que
link@import

Quelles sont les propriétés héritées du 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

effondrement des marges

adjacents ou plus seront fusionnés en un seul
, appelé effondrement de la marge. Les règles sont les suivantes : marginmargin

s'effondreront
margin
d'un élément flottant ou
ou d'un élément positionné de manière absolue ne s'effondrera pas avec la marge des autres éléments dans le sens vertical inline-block
Un élément qui crée un contexte de formatage au niveau du bloc n'aura pas de marge réduite avec ses éléments enfants
Le margin-bottom et Il se pliera également lorsqu'il est adjacentmargin-top

Introduire le modèle de boîte CSS standard ? Quelles sont les différences entre les modèles de box des versions inférieures d’IE ?

Il existe deux types, le modèle de boîte IE et le modèle de boîte W3C
Modèle de boîte : contenu, remplissage), marge, border;
Différence : la partie contenu d'IE calcule la bordure et le remplissage ;

Que sont les sélecteurs CSS ? Quelles propriétés peuvent être héritées ?

sélecteur d'identifiant (# myid)
sélecteur de classe (.myclassname)
Sélecteur de balise (p, h1, p)
Sélecteur adjacent (h1 + p)
Sélecteur enfant ( ul > li)
Sélecteur descendant (li a)
Sélecteur générique ( * )
Sélecteur d'attribut (a[rel = "external"])
Sélecteur de pseudo-classe Appareil (a:hover, li:nth -enfant)
Styles héritables :
font-size font-family color, UL LI DL DD DT
Styles non héritables :
border padding margin width height

Comment est calculé l'algorithme de priorité CSS ?

Principe de priorité prioritaire, celui ayant la définition de style la plus proche prévaudra dans le cas du même poids
Le chargé le style doit être basé sur le dernier style chargé Le positionnement est soumis à
La priorité est :
important est supérieur à la priorité en ligne!important > id > class > tag

Quelles sont les nouvelles pseudo-classes en 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        单选框或复选框被选中

Comment centrer p ? Comment centrer un élément flottant ? Comment centrer un p en position absolue ?

Définissez une largeur sur
, puis ajoutez l'pattributmargin:0 auto

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

Centrer un élément flottant

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

Centrer un p

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

affichage Quelles sont les valeurs ? Expliquer leur fonction

bloquer .
aucun Valeur par défaut. Apparaît comme un type d'élément en ligne.
inline-block est affiché comme un élément en ligne, mais son contenu est affiché comme un élément de type bloc.
list-item s'affiche comme un élément de type bloc et ajoute un balisage de liste de styles.
table Cet élément sera affiché sous forme de table au niveau du bloc.
inherit Spécifie que la valeur de l'attribut d'affichage doit être héritée du élément parent

Quelles sont les origines de positionnement relatif et absolu de la position ?

absolu

Génère un élément en position absolue, par rapport au premier élément parent dont la valeur n'est pas une position statique.

corrigé (l'ancien IE ne prend pas en charge)

Générer des éléments absolument positionnés, positionnés par rapport à la fenêtre du navigateur.

relatif

Génère un élément relativement positionné, positionné par rapport à sa position normale.

statique

默认值。没有定位，元素出现在正常的流中（忽略 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 什么时候会显示间隙？(携程)

Supprimez les espaces, utilisez des marges négatives, utilisez la taille de police : 0, l'espacement des lettres, l'espacement des mots

Parlez de flottant et clair float

Une boîte flottante peut être déplacée vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte contenante ou d'une autre boîte flottante. Étant donné que la boîte flottante ne fait pas partie du flux normal du document, la boîte de bloc du flux normal du document se comporte comme si la boîte flottante n'existait pas. La boîte de bloc flottante flottera sur la boîte de bloc du flux normal du document

Introduire le modèle de boîte CSS standard ? Quelles sont les différences entre les modèles de box des versions inférieures d’IE ?

Composition du modèle de boîte : contenu, padding, border, margin
Dans les navigateurs d'IE8 et inférieurs, DOCTYPE n'est pas déclaré, et la largeur et la hauteur du contenu incluront le remplissage intérieur et les bordures, appelé modèle de boîte étrange (modèle de boîte IE)
Modèle de boîte standard (W3C) : largeur de l'élément = largeur + rembourrage + bordure + marge
Modèle de boîte étrange (IE) : largeur de l'élément = largeur + marge
Les navigateurs standards déclenchent l'analyse du "mode bizarre" et calcul de la largeur et de la hauteur en définissant l'attribut box-sizing: border-box de CSS3

Quels sont les attributs couramment utilisés du box-sizing ? Quelles sont les fonctions de chacun ?

box-sizing: content-box; // Effet d'élément de modèle de boîte standard par défaut (W3C)
box-sizing : border-box ; // Déclenche l'effet de l'élément de modèle de boîte étrange (IE)
box-sizing : hérite de la valeur de l'attribut box-sizing du parent ; element

Que sont les sélecteurs CSS ?

sélecteur d'identifiant #id
sélecteur de classe .class
tag sélecteur p , h1, p
Sélecteur adjacent h1 + p
Sous-sélecteur li
Sélecteur descendant li a
Sélecteur Wildcard *
Sélecteur d'attribut a[rel='external' ]
Sélecteur de pseudo-classe a:hover, li:nth-child

Quelles propriétés CSS peuvent être héritées ? Quelles propriétés ne peuvent pas être héritées ?

Styles héritables : taille de police, famille de polices, couleur, style de liste, curseur
Style non héritable : largeur , height, border, padding, margin, background

Comment CSS calcule-t-il la priorité du sélecteur ?

Le même poids, selon celui qui se rapproche le plus de la définition : Style en ligne> Style interne> Style externe
Y compris le chargement externe Lorsque style, le style chargé ultérieurement écrase le style chargé précédemment et le style interne
Priorité du sélecteur : style en ligne[1000] > id[100] > 1]
Dans le même ensemble de paramètres d'attribut, !important a la priorité la plus élevée, supérieure au style en ligne

Que sont les nouvelles pseudo-classes en CSS3 ?

:root Sélectionne l'élément racine du document, qui est équivalent à l'élément html
:empty Sélectionne les éléments sans enfant elements
:target Sélectionnez l'élément cible actuellement actif
:not(selector) Sélectionnez des éléments autres que l'élément sélecteur
:enabled Sélectionnez les éléments de formulaire disponibles
:disabled Sélectionnez les éléments de formulaire désactivés
:checked Sélectionnez les éléments de formulaire sélectionnés
:après Ajouter du contenu au début de l'élément
:before Ajouter le dernier contenu à l'intérieur de l'élément
:nth-child(n) Faire correspondre l'élément enfant spécifié sous l'élément parent et trier parmi tous éléments enfants nth
:nth-last-child(n) correspond à l'élément enfant spécifié sous l'élément parent, trie le nième élément enfant parmi tous les éléments enfants, en comptant de l'arrière vers l'avant
:ntième-enfant (impair)
:ntième-enfant (pair)
: nième-enfant (3n+1)
:premier-enfant
:dernier-enfant
:only -child
:nth-of-type(n) Correspond à l'élément enfant spécifié sous l'élément parent et trie le nième
:nth-last-of-type(n) correspond à l'élément enfant spécifié sous l'élément parent et trie le nième élément enfant parmi les éléments enfants similaires, en comptant de l'arrière vers l'avant
: nième de type (impair)
: nième de type (pair)
: nième -of-type(3n+1)
:premier-de-type
:dernier de type
:only- of-type
::selection Sélectionnez l'élément sélectionné par l'utilisateur
:first- line Sélectionnez la première ligne de l'élément
:first-letter Sélectionnez le premier caractère de l'élément

Veuillez énumérer plusieurs façons pour masquer des éléments

visibilité : caché ; Cet attribut masque simplement un élément, mais l'espace occupé par l'élément existe toujours
opacité : 0 ; attribut CSS3, le réglage 0 peut rendre un élément complètement transparent
position : absolue Définir une grande valeur négative de positionnement pour positionner l'élément en dehors de la zone visible
affichage : aucun ; L'élément deviendra invisible et ne prendra plus de place dans le document.
transform: scale(0); Définissez un élément à l'échelle infiniment petite, l'élément sera invisible et la position d'origine de l'élément sera conservée
Attribut HTML5, l'effet est le même que display:none;, mais cet attribut est utilisé pour enregistrer l'état d'un élément <p hidden="hidden">
hauteur : 0; Fixer la hauteur de l'élément à 0, Et éliminer la bordure
filter: Blur(0); Attribut CSS3, définir le flou d'un élément à 0, faisant ainsi "disparaître" l'élément " de la page

Quelle est la différence entre les effets de transparence de rgba() et d'opacité ?

l'opacité s'applique à l'élément et tout le contenu de l'élément (y compris le texte
rgba() s'applique uniquement au). element Sa propre couleur ou sa couleur de fond, les éléments enfants n'hériteront pas de l'effet de transparence

Que fait l'attribut css content ?

L'attribut content est spécialement appliqué aux pseudo-éléments avant/après pour insérer du contenu ou des styles supplémentaires

CSS3 Quelles sont les nouvelles fonctionnalités ?

Nouveau sélecteur p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
Affichage du modèle de boîte flexible : flex ;
Nombre de colonnes de disposition à colonnes multiples : 5 ;
Requête média @media (largeur maximale : 480px) {.box : {column-count : 1 ;}}
Police personnalisée @font-face{font-family : BorderWeb ; src:url(BORDERW0.eot );}
Couleur de transparence : rgba(255, 0, 0, 0.75);
Rayon de bordure des coins arrondis : 5px ;
文字装饰 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 什么时候会显示间隙？

Lorsqu'il y a un saut de ligne ou une séparation d'espace entre des éléments de bloc en ligne adjacents, un espace se produira
Les éléments horizontaux non en ligne sont définis to inline -block aura également un espacement horizontal
Vous pouvez utiliser vertical-align:top pour éliminer les espaces verticaux
Vous pouvez ajouter une police -size au parent :0; Définissez la taille de police requise dans l'élément enfant pour éliminer l'espace vertical
Écrire la balise li sur la même ligne peut éliminer l'espace vertical, mais le la lisibilité du code est mauvaise

débordement : Comment résoudre le problème du défilement fluide lors du défilement ?

Écoutez l'événement de roue, puis utilisez l'animation de jquery pour obtenir un effet fluide lors du défilement jusqu'à une certaine distance.

Un p adaptatif en hauteur avec deux ps à l'intérieur, un avec une hauteur de 100px, et j'espère que l'autre remplit la hauteur restante

Option 1 :
.sub { height: calc(100%-100px); }
Option 2 :
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }
Option 3 :
.container { display:flex; flex-direction:column; }
.sub { flex:1; }
Je te crois lisez cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Utilisation de l'analyse syntaxique dans les projets front-end avalon
Explication détaillée des étapes d'utilisation de React-router v4

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Ajax envoi et réception de requêtesArticle suivant：Ajax envoi et réception de requêtes

Articles Liés

Voir plus