Web前端知识梳理（四）CSS部分 (2)

余弦
345 阅读10分钟

往期精彩

Web前端知识梳理（一）基础篇 web综合问题

Web前端知识梳理（二）基础篇 web综合问题

Web前端知识梳理（三）CSS部分

Web前端知识梳理（四）CSS部分 (2)

web前端面试 —— CSS部分(2)

1. ⼏种常⻅的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>

2. stylus/sass/less区别

a- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性

b- Sass 和 Less 语法较为严谨， Less 要求⼀定要使⽤⼤括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系

c- Sass ⽆全局变量的概念， Less 和 Stylus 有类似于其它语⾔的作⽤域概念

d- Sass 是基于 Ruby 语⾔的，⽽ Less 和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；

3. postcss的作⽤

可以直观的理解为：它就是⼀个平台。

为什么说它是⼀个平台呢？因为我们直接⽤它，感觉不能⼲什么事情，但是如果让⼀些插件在它上⾯跑，那么将会很强⼤

PostCSS 提供了⼀个解析器，它能够将 CSS 解析成抽象语法树

通过在 PostCSS 这个平台上，我们能够开发⼀些插件，来处理我们的 CSS ，⽐如热⻔的 ：autoprefixer

postcss 可以对sass处理过后的 css 再处理 最常⻅的就是 autoprefixer

4. css样式（选择器）的优先级

计算权重确定

!important

内联样式

id

class

tag

后写的优先级⾼

5. ⾃定义字体的使⽤场景

a- 宣传/品牌/ banner 等固定⽂案

b- 字体图标

6. 如何美化CheckBox

<label> 属 性 for 和 id

隐藏原⽣的 <input>

:checked + <label>

7. 伪类和伪元素的区别

伪类表状态

伪元素是真的有元素

前者单冒号，后者双冒号

8. base64 的使⽤

⽤于减少 HTTP 请求

适⽤于⼩图⽚

base64 的体积约为原图的 4/3

9. ⾃适应布局

思路：

  • 左侧浮动或者绝对定位，然后右侧 margin 撑开

  • 使⽤ <div> 包含，然后靠负 margin 形成 BFC

  • 使⽤ flex

10. 请⽤CSS写⼀个简单的幻灯⽚效果⻚⾯

使⽤ CSS3 animation 动画实现⼀个简单的幻灯⽚效果

/**css**/
.ani{
  width:480px; 
  height:320px; 
  margin:50px auto; 
  overflow: hidden;
  box-shadow:0 0 5px rgba(0,0,0,1); 
  background-size: cover; 
  background-position: center;
  -webkit-animation-name: "loops";
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
}


@-webkit-keyframes "loops" { 
  0% {
    background:url(./img/1.png);
  }
  25% {
    background:url(./img/2.png);
  }  
  50% {
    background:url(./img/3.png);
  }  
  75% {
    background:url(./img/4.png);
  }  
  100% {
    background:url(./img/5.png);
  }
}

11 什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

在CSS当中，相邻的两个盒⼦（可能是兄弟关系也可能是祖先关系）的外边距可以结合成⼀个单独的外边距。这种合并外边距的⽅式被称为折叠，并且因⽽所结合成的外边距称为折叠外边距。

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

两个相邻的外边距都是正数时，折叠结果是它们两者之间较⼤的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较⼤值。

两个外边距⼀正⼀负时，折叠结果是两者的相加的和。

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

rgba() 和 opacity 都能实现透明效果，

但最⼤的不同是 opacity 作⽤于元素，以及元素内的所有内容的透明度，

⽽ rgba() 只作⽤于元素的颜⾊或其背景⾊。（设置 rgba 透明的元素的⼦元素不会继承透明效果！）

12 css中可以让⽂字在垂直和⽔平⽅向上重叠的两个属性是什么？

垂直⽅向：line-height

⽔平⽅向：letter-spacing

13 如何垂直居中⼀个浮动元素？

⽅法⼀：已知元素的⾼宽

#div1{
  background-color:#6699FF; 
  width:200px; 
  height:200px;
  position: absolute; // ⽗元素需要相对定位
  top: 50%;
  left: 50%;
  margin-top:-100px ; // ⼆分之⼀的height，width 
  margin-left: -100px;
}

⽅法⼆

 #div1{
  width: 200px; 
  height: 200px;
  background-color: #6699FF; 
  margin:auto;
  position: absolute; //⽗元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

如何垂直居中⼀个 <img> ?（⽤更简便的⽅法。）

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

14. px和em的区别

px 和 em 都是⻓度单位，

区别是， px 的值是固定的，指定是多少就是多少，计算⽐较容易。

em 得值不是固定的，并且 em 会继承⽗级元素的字体⼤⼩。

浏览器的默认字体⾼都是 16px 。所以未经调整的浏览器都符合: 1em=16px 也可以理解为 1em = 当前字体大小。

那么 12px=0.75em , 10px=0.625em 。

15. Sass、LESS是什么？⼤家为什么要使⽤它们？

它们是 CSS 预处理器，是 CSS 上的⼀种抽象层，是⼀种特殊的语法/语⾔，可以编译成CSS 。

例如：Less是⼀种动态样式语⾔，将CSS赋予了动态语⾔的特性，如 变量，继承，运算，函数。 LESS既可以在客户端上运⾏ (⽀持 IE 6+ , Webkit , Firefox )，也可以在服务端运⾏ (借助 Node.js )

为什么要使⽤它们？

a- 结构清晰，便于扩展。

b- 可以⽅便地屏蔽浏览器私有语法差异。这个不⽤多说，封装对浏览器语法差异的重复处理，减少⽆意义的机械劳动。

c- 可以轻松实现多重继承。

d- 完全兼容 CSS 代码，可以⽅便地应⽤到⽼项⽬中。Less 只是在CSS语法上做了扩展， 所以⽼的CSS代码也可以与LESS代码⼀同编译。

16. 知道css有个content属性吗？有什么作⽤？有什么应⽤？

css的 content 属性专⻔应⽤在 before/after 伪元素上，⽤于来插⼊⽣成内容。

最常⻅的应⽤是利⽤伪类清除浮动。

/**⼀种常⻅利⽤伪类清除浮动的代码**/
.clearfix:after {
  content:".";//这⾥利⽤到了content属性
  display:block;
  height:0; 
  visibility:hidden; 
  clear:both;
}
.clearfix {
  *zoom:1;
}

17. ⽔平居中的⽅法

①元素为⾏内元素，设置⽗元素 text-align:center

②如果元素宽度固定，可以设置左右 margin 为 auto ;

③如果元素为绝对定位，设置⽗元素 position 为 relative ，元素设left:0;right:0;margin:auto;

④使⽤ flex-box 布局，指定 justify-content 属性为center

⑤display 设置为 tabel-ceil

18. 垂直居中的⽅法

①将显示⽅式设置为表格， display:table-cell ,同时设置 vertial-align：middle

②使⽤ flex 布局，设置为 align-item：center

③绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto

④绝对定位中固定⾼度时设置 top:50%，margin-top 值为⾼度⼀半的负值

⑤⽂本垂直居中设置 line-height 为 height 值

19. 如何使⽤CSS实现硬件加速？

硬件加速是指通过创建独⽴的复合图层，让GPU来渲染这个图层，从⽽提⾼性能。

⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ，

为了避免2D动画在开始和结束的时候的 repaint 操作，⼀般使⽤ tranform:translateZ(0)

20. 重绘和回流（重排）是什么，如何避免？

DOM的变化影响到了元素的⼏何属性（宽⾼）, 浏览器重新计算元素的⼏何属性，其他元素的⼏何属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排， 浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。

引起重排的原因有：

添加或者删除可⻅的DOM元素，

元素位置、尺⼨、内容改变，

浏览器⻚⾯初始化，

浏览器窗⼝尺⼨改变，

重排⼀定重绘，重绘不⼀定重排。

减少重绘和重排的⽅法：

不在布局信息改变时做 DOM 查询

使⽤ cssText 或者 className ⼀次性改变属性

使⽤ fragment

对于多次重排的元素，如动画，使⽤绝对定位脱离⽂档流，让他的改变不影响到其他元素

21. 说⼀说css3的animation

css3的animation是css3新增的动画属性，这个css3动画的每⼀帧是通过@keyframes来声明的，keyframes 声明了动画的名称，通过 from 、 to 或者是百分⽐来定义。

每⼀帧动画元素的状态，通过animation-name来引⽤这个动画，同时css3动画也可以定义动画运⾏的时⻓、动画开始时间、动画播放⽅向、动画循环次数、动画播放的⽅式，

这些相关的动画⼦属性有：

animation-name 定义动画名、

animation-duration 定义动画播放的时⻓ 、

animation-delay 定义动画延迟播放的时间 、

animation- direction 定义动画的播放⽅向、

animation-iteration-count 定义播放次数、

animation-fill-mode 定义动画播放之后的状态、

animation-play-state 定义播放状态，如暂停运⾏等、

animation-timing-function 定义播放的⽅式，如恒速播放、变速播放等。

22. 如何实现左侧固定宽度，右侧⾃适应宽度的两列布局实现

html结构：

在外层 div （类名为 outer ）的 div 中，有两个⼦ div ，类名分别为left 和 right ，

其中 left 为固定宽度，⽽ right 为⾃适应宽度

<div class="outer">
  <div class="left">固定宽度</div>
  <div class="right">⾃适应宽度</div>
</div>

⽅法1：

左侧div设置成浮动：float: left，

右侧div宽度会⾃拉升适应

 // css
.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;
}

23. 两种以上⽅式实现已知或者未知宽度的垂直⽔平居中

/** 1 **/
.wraper {
  position: relative;
  .box {
    position: absolute; 
    top: 50%;
    left: 50%; 
    width: 100px; 
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

/** 2 **/
.wraper {
  position: relative;
  .box {
    position: absolute; top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/** 3 **/
.wraper {
  .box {
    display: flex;
    justify-content:center; 
    align-items: center; 
    height: 100px;
  }
}

/** 4 **/
.wraper {
  display: table;
  .box {
    display: table-cell; 
    vertical-align: middle;
  }
}

24. 如何实现⼩于12px的字体效果

transform:scale() 这个属性只可以缩放可以定义宽⾼的元素，

⽽⾏内元素是没有宽⾼的，所以需要加上⼀个 display:inline-block ;

例如：transform: scale(0.7);

------------请叫我分割线----------

css这么多够常规面试了， 有空还是多撸一下JS。

avatar
文章
阅读
粉丝