搜尋

首頁  >  文章  >  web前端  >  前端面試真題解析

前端面試真題解析

php中世界最好的语言
php中世界最好的语言原創
2018-05-24 10:58:491577瀏覽

這次帶給大家前端面試真題解析，前端面試真題解析的注意事項有哪些，下面就是實戰案例，一起來看一下。

前端面試之CSS

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不會和垂直方向上的其他元素的margin折疊

    • 建立了區塊層級格式化上下文的元素，不會和它的子元素發生margin折疊

    • 元素本身的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
    屬性

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

  • 居中一個浮動元素

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

    • #讓絕對定位的p居中

  •   position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  • display有哪些值？說明他們的功能

  • block         象塊類型元素一樣顯示。

none          缺省值。象行內元素類型一樣顯示。

    inline-block  象行內元素一樣顯示，但其內容象區塊類型元素一樣顯示。

    • list-item     象塊類型元素一樣顯示，並新增樣式清單標記。

    • table         此元素會作為區塊級表格來顯示

  • inherit       規定應該從父元素繼承display 屬性的值

  • ######################## ##########position的值relative和absolute定位原點是？ ###############absolute################產生絕對定位的元素，相對於值不為static的第一個父元素進行定位。 ###############fixed（舊IE不支援）################產生絕對定位的元素，相對於瀏覽器視窗進行定位。 ###############relative################產生相對定位的元素，相對於其正常位置進行定位。 ###############static###

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

  • 移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

談談浮動和清除浮動

  • 浮動的框可以向左或向右移動，直到他的外緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的區塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上

介紹一下標準的CSS的盒子模型？低版IE的盒子模型有什麼不同的？

  • #盒子模型構成：內容(content)、內填(padding)、 邊框(border)、外邊距(margin)

  • #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選擇器有哪些？

  • id選擇器       #id

  • 類別選擇器       .class

  • 標籤選擇器     p, h1, p

  • 鄰近選擇器     h1 p

  • 子選擇器       ul >

    • 後位選擇器     li a

    • 萬用字元選擇器   *

    • 屬性選擇器     a[rel='external']

    • 偽類別選擇器    a:hover, li:nth-child

CSS哪些屬性可以繼承？哪些屬性不可以繼承？

    可以繼承的樣式：font-size、font-family、color、list-style、cursor

    • 不可繼承的樣式：width、height、border、padding、margin、background

#CSS如何計算選擇器優先？

    相同權重，定義最近者為準：行內樣式> 內部樣式> 外部樣式

    • 含外部載入樣式時，後載入樣式會覆寫其前面的載入的樣式和內部樣式

    • 選取器優先權: 行內樣式[1000] > id[100] > class[ 10] > Tag[1]

    • 在同一組屬性設定中，!important 優先權最高，高於行內樣式

CSS3新增偽類有哪些？

    :root           選擇文件的根元素，等同於html 元素

  • ##:empty          選擇沒有子元素的元素

  • ####################################################################################################################################' #########:target         選取目前活動的目標元素############:not(selector)  選擇除selector 元素意外的元素################## ###:enabled        選擇可用的表單元素############:disabled       選擇已停用的表單元素############:checked   選擇已停用的表單元素############:checked        ###########:after          在元素內部最前面加上內容###

  • :before         在元素內部最後加上內容

  • :nth-child(n)      符合父元素下指定子元素，並在所有子元素中排序第n

  • :nth-last-child(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(odd)

  • :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;   這個屬性只是簡單的隱藏某個元素，但是元素佔用的空間任然存在

  • opacity: 0;           CSS3屬性，設定0可以讓一個元素完全透明

  • position: absolute;   設定一個很大的left 負值定位，使元素定位在可見區域之外

  • #display: none;        元素會變得不可見，且不會再佔用文件的空間。

  • transform: scale(0);  將一個元素設為縮放無限小，元素將不可見，元素原來所在的位置將被保留

  • #

  • height: 0;            將元素高度設為0 ，並消除邊框

    • ##filter: blur(0);      CSS3屬性，將一個元素的模糊度設為0，從而使這個元素「消失」在頁面中

rgba() 和opacity 的透明效果有什麼不同？

    opacity 作用於元素以及元素內的所有內容（包括文字）的透明度

    • rgba() 只作用於元素自身的顏色或其背景色，子元素不會繼承透明效果

css 屬性content 有什麼作用？

    content 屬性專門應用在before/after 偽元素上，用於插入額外內容或樣式

    • ##CSS3有哪些新特性？

新增選擇器    p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

  • #彈性盒模型    display: flex;

  • 多列版面配置      column-count: 5;

  • 媒體查詢      @media (max- width: 480px) {.box: {column-count: 1;}}

  • 個人化字體    @font-face{font-family: BorderWeb; src:url(BORDERW0.eot );}

  • 顏色透明度    color: rgba(255, 0, 0, 0.75);

  • #圓角          border-radius: 5
    • px;

    • 漸變          background:linear-gradient(red, green, blue);

    • 64, 128, 0.3);

    • 倒影          box-reflect: below 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 什么时候会显示间隙？

  • 相鄰的inline-block 元素之間有換行或空格分隔的情況下會產生間距

  • 非inline-block 水平元素設定為inline -block 也會有水平間距

  • 可以藉助vertical-align:top; 消除垂直間隙

  • 可以在父級加font-size ：0; 在子元素裡設定所需的字體大小，消除垂直間隙

  • 把li 標籤寫到同一行可以消除垂直間隙，但程式碼可讀性差

overflow: scroll 時不能平滑滾動的問題怎麼處理？

  • 監聽滾輪事件，然後捲動到一定距離時用 jquery 的 animate 實現平滑效果。

一個高度自適應的p，裡面有兩個p，一個高度100px，希望另一個填滿剩下的高度

  • #方案1：
    .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; }


  • #相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

  • 推薦閱讀：

  • avalon前端專案中使用解析

  • React-router v4使用步驟詳解

#

以上是前端面試真題解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Ajax發送和接收請求下一篇：Ajax發送和接收請求

相關文章

看更多