前端面试题快问快答（2）

xianxin_
148 阅读6分钟

css sprite 是什么 , 有什么优缺点？

  • 概念:将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案
  • 优点:
    • 减少 HTTP 请求数,极大地提高⻚面加载速度
    • 增加图片信息重复度,提高压缩比,减少图片大小
    • 更换⻛格方便,只需在一张或几张图片上修改颜色或样式即可实现
  • 缺点:
    • 图片合并麻烦
    • 维护麻烦,修改一个图片可能需要从新布局整个图片,样式

display: none;与visibility: hidden;的区别？

  • 联系:它们都能让元素不可⻅
  • 区别:
    • display:none ; 会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden ; 不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可⻅
    • display: none ; 是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示 ; visibility: hidden; 是继承属性,子孙节点消失由于继承了 hidden ,通过设置 visibility: visible; 可以让子孙节点显式
    • 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
    • 读屏器不会读取 display: none ; 元素内容;会读取 visibility: hidden; 元素内容

link与@import的区别？

  • link 是 HTML 方式, @import 是 CSS 方式
  • link 最大限度支持并行下载, @import 过多嵌套导致串行下载,出现 FOUC ( 文档样式短暂失效 )
  • link 可以通过 rel="alternate stylesheet" 指定候选样式
  • 浏览器对 link 支持早于 @import ,可以使用 @import 对老浏览器隐藏样式
  • @import 必须在样式规则之前,可以在 css 文件中引用其他文件
  • 总体来说: link 优于 @import

position 的值, relative 和 absolute 定位原点是？

  • absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
  • fixed :生成绝对定位的元素,相对于浏览器窗口进行定位
  • relative :生成相对定位的元素,相对于其正常位置进行定位
  • static 默认值。没有定位,元素出现在正常的流中
  • inherit 规定从父元素继承 position 属性的值

几种常⻅的 CSS 布局？

  • 流体布局
.left {
float: left;
width: 100px;
height: 200px;
background: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background: blue;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background: green;
}

<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
  • 圣杯布局
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height:300px;
background: green;
}
.left {
position: relative;
left: -120px;
float: left;
height: 300px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
position: relative;
right: -220px;
float: right;
height: 300px;
width: 200px;
margin-left: -200px;
background: blue;
}

<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
  • 双⻜翼布局
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background: green;
}
.main::after {
content: '';
display: block;
font-size:0;
height: 0;
zoom: 1;
clear: both;
}
.left {
float:left;
height: 200px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
float: right;
height: 200px;
width: 200px;
margin-left: -200px;
background: blue;
}

<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

什么是外边距重叠?重叠的结果是什么?

外边距重叠就是 margin-collapse

  • 在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则

  • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时,折叠结果是两者的相加的和。

rgba() 和 opacity 的透明效果有什么不同?

  • rgba()和opacity都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的所有内容的透明度
  • rgba() 只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)

css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?

  • 垂直方向: line-height
  • 水平方向: letter-spacing

如何垂直居中一个浮动元素?

/**方法一:已知元素的高宽 **/
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute;//父元素需要相对定位
top: 50%;
left: 50%;//二分之一的 height , width
margin-top:-100px ;
margin-left: -100px;
}
/**方法二 :**/
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute;//父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}

如何垂直居中一个 <img> ?

 /**<img>的容器设置如下 **/
#container
{
display:table-cell;
text-align:center;
vertical-align:middle;
}

水平居中的方法?

  • 元素为行内元素,设置父元素 text-align:center
  • 如果元素宽度固定,可以设置左右 margin 为 auto ;
  • 如果元素为绝对定位,设置父元素 position 为 relative ,元素设left:0;right:0;margin:auto;
  • 使用 flex-box 布局,指定 justify-content 属性为 center
  • display 设置为 tabel-ceil

垂直居中的方法?

  • 将显示方式设置为表格, display:table-cell , 同时设置 vertial-align : middle
  • 使用 flex 布局,设置为 align-item : center
  • 绝对定位中设置 bottom:0,top:0 , 并设置 margin:auto
  • 绝对定位中固定高度时设置 top:50% , margin-top 值为高度一半的负值
  • 文本垂直居中设置 line-height 为 height 值

左边宽度固定,右边自适应?

左侧固定宽度,右侧自适应宽度的两列布局实现 html 结构

<div class="outer">
<div class="right">固定宽度</div>
<div class="left">自适应宽度</div>
</div>
  • 方法 1 :左侧 div 设置成浮动: float: left ,右侧 div 宽度会自拉升适应
.outer {
width: 100%;
height: 500px;
background-color: yellow;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
height: 200px;
background-color: blue;
}
  • 方法 2 :对右侧 :div 进行绝对定位,然后再设置 right=0 ,即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能,当我们将width 设置为 auto 的时候(或者不设置,默认为 auto ),绝对定位元素会根据其 left 和 right 自动伸缩其大小

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0;
right: 0;
}
  • 方法 3 :将左侧 div 进行绝对定位,然后右侧 div 设置 margin-left: 200px
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.right {
height: 200px;
background-color: blue;
margin-left: 200px;
}
  • 方法 4 :使用 flex 布局
.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
flex: 1;
}

如何实现小于 12px 的字体效果?

transform:scale()这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个 display:inline-block ;

transform: scale(0.7);
avatar
文章
阅读
粉丝