前端面试题--CSS篇

1. 面试中,被问到关于flex布局中,flex-shirink的计算问题。

父元素宽度300px,display为flex, 子元素1宽度100px,flex-shirink为1,子元素2宽度300px,flex-shirink为2。 子元素1,子元素2的实际宽度是多少?如何计算?

<div class="box">
        <div class="first">85.719</div>
        <div class="second">214.281</div>
</div>

.box{ width: 300px; display: flex; } .first{ background: red; width: 100px; flex-shrink: 1; } .second{ background: yellow; width: 300px; flex-shrink: 2; }

计算方法:

需要收缩的空间:100+300-300=100

每个子项目需要收缩的值:100n+300*2n=100; n=1/7

first宽度:100-100*1/7=85.719

second宽度:300-300*2*1/7 = 214.281

实现一个div在不同分辨率下的水平垂直居中 

.box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid pink;
      width: 200px;
      height: 200px;
}

3   左右固定,中间自适应样式

 

<style>
    .box {
      display: flex;
      height: 200px;
    }
    .left {
      flex: 0 0 200px;
      background-color: pink;
    }
    .center {
      flex: 1;
      background-color: yellow;
    }
    .right {
      flex: 0 0 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
  </div>
</body>

4 清除浮动的几种方式:

//1. 在元素最后下加一个元素, 设置clear:both属性,缺点是会增加多余无用的html元素
<div class="container"> 
  <div class="left">left浮动</div> 
  <div class="right">right浮动</div>
  <div  style="clear:both;"></div>
</div>
//2. 使用after伪元素(给父元素添加after伪元素)
.container::after {
    content: ' ';
    display: block;
    clear: both;
 }
//3. 给父级元素设置overflow:hidden, 缺点:不能和position配合使用

box-sizing常用的属性有哪些?分别有什么作用?

(1)content-box
宽高是元素本身的宽高 不包含border+padding

(2)border-box
元素的宽高已经包含了border+padding

(3)inherit
从父元素继承box-sizing属性

CSS样式权重

!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)

请简要描述margin重合问题,及解决方式

具体解释:可见CSS--BFC (https://www.cnblogs.com/Super-scarlett/p/15855526.html)

问题:相邻两个盒子垂直方向上的margin会发生重叠,只会取比较大的margin

解决:(1)设置padding代替margin
(2)设置float
(3)设置overflow
(4)设置position:absolute 绝对定位
(5)设置display: inline-block

 8 <meta></meta>标签的理解

1、meta是html文档头部的一个标签,这个标签对用户不可见,是给搜索引擎看的。
2、描述、关键字、作者、移动端适配。
3、<meta charset="UTF-8"> 使用的编码格式

display:none 和 visibility:hidden区别?

 display:none 在dom中不占空间。

 visibility:hidden 还存在dom结构中,只是不可见。

10 重绘和重排

重排一定引起重绘,重绘不一定引起重排

重绘:不影响页面布局,比如更改颜色。

重排:布局的改变导致重新构建。

11 为什么要初始化css样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值不同,如果不初始化css,会导致不同浏览器页面间的显示差异。

12 移动端适配1px问题

 移动端的1px在有些机型上看上去比较粗,虽然写着1px,但是看上去可能是2px

解决方案:

//伪类+transform: 设置元素的border:none; 然后利用:before 或者 :after重做border,并用transform的scale缩小一半,原先的元素相对定位,新做的border绝对定位
li{
  position: relative;
  border:none;
}
li:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: #cccccc;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

13 居中为什么要使用transform? 为什么不使用marginLeft/Top?

transform 属于合成属性,不会引起整个页面的回流重绘,节省性能消耗,但是占用内存会大些

top/left属于布局属性,会引起页面layout回流和repaint重绘。

14 介绍css3中position:sticky

在之前项目,遇到导航栏滚动,滚到到窗口顶部悬停;移动端,安卓手机和iphone会有不同效果,当时解决兼容性,用到了position:sticky

具体案例:可以看我之前博客--导航栏滚动:https://www.cnblogs.com/Super-scarlett/p/10000067.html

安卓手机使用fixed就可以实现滚到到窗口顶部悬停。但是苹果手机不起作用。解决方案:

.postplayIOS {

  position: sticky;

  position: -webkit-sticky;

  left: 0;

  top: 0;

}

.postplayAndroid {

  position: fixed;

  left: 0;

  top: 0;

}

15 上下固定,中间滚动布局如何实现

方案一:

html, body {
    height: 100%;
  }
  .top, .bottom {
    height: 100px;
  }
  .center {
    height: calc(100% - 200px);
    overflow: auto;
  }

方案二:flex布局

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  .top, .bottom {
    height: 100px;
    background-color: red;
  }
  .center {
    background-color: blue;
    flex: 1;
    overflow: auto;
  }

 16 css实现border渐变

.box{
     width: 100px;
     height: 100px;
     border:10px solid #ddd;
     border-image: -webkit-linear-gradient(#ddd,#000) 30 30;
     border-image: -moz-linear-gradient(#ddd,#000) 30 30;
     border-image: linear-gradient(#ddd,#000) 30 30;
}

17 纯css实现一个高宽比为1:3的盒子 列举几种方式

方法1:使用一个隐藏的图片

//div容器如果不给定高度,它的高度会随着容器内部的元素变化而撑大
//找一张宽高为1:3的图片,给图片设置宽度100%;高度auto,不管我们的父容器如何变化,内部的img宽度都是100%,图片是会严格按照比例i自动缩放的,相应的,我们内部的子容器的盖度也就会按照比例缩放了
//如果你觉得增加img标签多发了http请求,也可以采用base64图片编码帮你解决这个问题,适合不太大的图片,这样可以省掉http请求。
.container{ width: 100% } img{ width: 100%; height: auto; } <div class='container'> <img src="1.png" alt="" /> </div>

 方法2: 使用vmin单位

这个单位也是css3的新单位,我们将父容器的高度和宽度定义为1:3的vmin,这样父容器的高度和宽度就是1:3,这个时候,子容器的宽高值设为百分比,不管父容器大小如何变,子容器的高度和宽度比都是不会变的。

单位说明:
  vw: 相对于视窗的宽度
  vh: 相对于视窗的高度
  vmin: 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin
  vmax: 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax

#container{  width: 300vmin;  height: 100vmin; }
   .attr {  width: 100%;  height: 100%;  background-color: red;}

方法3:使用cale计算

cale()是css3的新特性,它的值可以是一个表达式,这里我们关心的是:calc中的百分比也是按照父容器的百分比算的 

.attr{  width:100%;  height: calc(30%);}

方法4:padding-bottom边距实现

这里方法非常巧妙,由于padding-bottom的属性值百分比是按照父容器的宽度来计算的,所以这里我们设置容器宽度为父容器的100%;padding-bottom也为30%;

.attr {    width: 100%;    height: 0;    padding-bottom: 30%;    }

18 css实现一个旋转的圆

<div  id=”pointer” ></div>
#{

    height:100px;
    width:100px;
    border-radius: 50%;    //圆角设成一半,就变成圆形了
    display:inline-block;
    background:url("img/pointer.jpg");   //用背景图片来代替img标记
}
#pointer{
    animation: rotate 60s linear 0s infinite normal; //添加animation属性,设置动画的一些属性
}

@keyframes rotate{//由@keyframes来实现动画效果
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }

}

19 BFC、IFC、FFC

BFC布局将自己与外部隔离开,内外部的布局不会相互影响。
如何触发BFC?
    1、float不为none
    2、overflow不为visible
    3、display的值为table-cell、tabble-caption、inline-block、flex
    4、position值为fixed/absolute
IFC:行内元素参与的布局。
FFC:自适应的渲染规则,比如display:flex。

20 css3有哪些新特性

1.CSS3的选择器

1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。 
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. 圆角

border-radius: 15px;

3.阴影(Shadow) 

.class1{

text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);

}

4.CSS3 的渐变效果 

linear 表示线性渐变,从左到右,由蓝色(#2A8BBE)到红色(#FE280E)的渐变。

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

5.Transition 对象变换时的过渡效果

  •  transition-property 对象参与过渡的属性
  •  transition-duration 过渡的持续时间
  •  transition-timing-function 过渡的类型
  •  transition-delay 延迟过渡的时间
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

21 CSS3新增伪类有哪些?

p:last-of-type         选择其父元素的最后的一个P元素

p:last-child            选择其父元素的最后子元素(一定是P才行)

 

p:first-of-type        选择其父元素的首个P元素

p:first-child           选择其父元素的首个p元素(一定是p才行)

 

p:only-child    选择其父元素的只有一个元素(而且这个元素只能是p元素,不能有其他元素)

p:only-of-type   选择其父元素的只有一个p元素(不能有第二个P元素,其他元素可以有) 

 

选第N个

p:nth-child(n)      选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    从最后一个子元素开始计数

p:nth-of-type(n)   选择其父元素的n个元素

p:nth-last-of-type(n)  从最后一个子元素开始计数

 

22 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

标准css盒子模型:
盒子大小 = content + border + padding + margin
盒子的宽 = content的宽
盒子的高 = content的高

低版本IE的盒子模型(怪异盒子模型):
盒子大小 = (content + border + padding) + margin 

盒子的宽 = content的宽 + 左右border + 左右padding
盒子的高 = content的高 + 上下border + 左右padding

23 display:inline-block 什么时候不会显示间隙?

元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。
解决的方案:
父元素设置font-size:0;子元素单独设置font-size。

24 行内元素float:left后是否变为块级元素?

是的,对行内元素设置float:left后, 对行内元素设置width,height起作用

25 在网页中的应该使用奇数还是偶数的字体?为什么呢?

偶数的字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。

26 ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用

单冒号 :伪类。:hover, :active 

双冒号:伪元素。

  • 伪元素在CSS1中已存在,当时语法是用 : 表示,如 :before 和 :after
  • 在CSS3中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类

::before 是 CSS3 中写伪元素的新语法; :after 是 CSS1 中存在的、兼容IE的老语法

27 如果需要手动写动画,你认为最小时间间隔是多久,为什么?

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。

28 base64的原理及优缺点

1. 优点

(1)base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗;

(2)网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。

2. 缺点

(1)base64格式的文本内容较多,存储在数据库中增大了数据库服务器的压力;

(2)网页加载图片虽然不用访问服务器了,但因为base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验。

(3)base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css,这比直接缓存图片要差很多,而且一般HTML改动比较频繁,所以等同于得不到缓存效益。

<img src="data:image/jpeg;base64,/9j/4AAQS……"/>

因为base64的使用缺点,所以一般图片小于10kb的时候,我们才会选择使用base64图片,比如一些表情图片,太大的图片转换成base64得不偿失。当然,极端情况极端考虑。

30 流体布局、圣杯布局、双飞翼布局

都是为了实现一个:两侧宽度固定,中间宽度自适应的三栏布局

流体布局:

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

 

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

圣杯布局和双飞翼布局,虽然两者的实现方法略有差异,不过都遵循了以下要点:

  • 两侧宽度固定,中间宽度自适应
  • 中间部分在DOM结构上优先,以便先行渲染
  • 允许三列中的任意一列成为最高列
  • 只需要使用一个额外的<div>标签

 

圣杯布局:

 

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

注意:主体部分是由container包裹的center,left,right三列,其中center定义在最前面。

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}

注意:页面的最小宽度:要想保证该布局效果正常显示,由于两侧都具有固定的宽度,所以需要给定页面一个最小的宽度,但这并不只是简单的200+150=350px。回想之前left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

双飞翼布局:

<div id="container" class="column">
    <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

注意:双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center,另外将.column类从center移至container上。

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}

通过对圣杯布局和双飞翼布局的介绍可以看出,圣杯布局在DOM结构上显得更加直观和自然,且在日常开发过程中,更容易形成这样的DOM结构(通常<aside><article>/<section>一起被嵌套在<main>中);而双飞翼布局在实现上由于不需要使用定位,所以更加简洁,且允许的页面最小宽度通常比圣杯布局更小。

其实通过思考不难发现,两者在代码实现上都额外引入了一个<div>标签,其目的都是为了既能保证中间栏产生浮动(浮动后还必须显式设置宽度),又能限制自身宽度为两侧栏留出空间。

从这个角度出发,如果去掉额外添加的<div>标签,能否完成相同的布局呢?答案是肯定的,不过这需要在兼容性上做出牺牲,即流体布局。

使用flex:

<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>
#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

 具体可参考:https://www.jianshu.com/p/81ef7e7094e8

31 stylus/sass/less区别

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

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

Scss ⽆全局变量的概念, less和 Stylus 有类似于其它语⾔的作⽤域概念

Sass 是基于 Ruby 语⾔的,⽽ less和 Stylus 可以基于 NodeJS NPM 下载相应库后 进⾏编译;

32 postcss的作用

css预处理器Sass,增加了变量,嵌套,混合,逻辑处理等功能,让代码复用性更强。Css 预处理器的代码是无法直接运行于浏览器的,我们还需要进行编译解析成为 Css 文件。这个过程中,我们就可以添加很多的构建环节,比如代码的检查,压缩,排序等等。

于是诞生了 Css 后处理器--- Postcss

Postcss 是一个使用js插件来转换样式的工具,Postcss 的插件会检查你的css。

其中最常用的插件莫过于 autoprefixer 这个插件了,这个插件会添加 vendor 浏览器的前缀,让我们不需要为了兼容而不断的写-webkit-这样无聊的代码,丢掉了历史包袱。 

 我们在构建项目的时候,通过webpack会把css文件的内容传送给postcss-loader, postcss-loader会解析postcss.config中的插件,传输给 Postcss,Postcss 会解析传入的css,将其转换为一个AST,然后通过各种不同的插件来对这个AST进行操作,最终序列化新的 css,最后将结果返回到 postcss-loader,进行 webpack 下一个 loader 的操作。

postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use:
          [{
            loader: MiniCssExtractPlugin.loader
          },
            'css-loader', 'postcss-loader' ]

      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ]
}

总结一下,Postcss 不是css预处理器的替代品,虽然可以替代。 其次,Postcss 是一个插件工具,丰富的插件生态意味着能够覆盖绝大多数的场景和业务。 最后,Postcss 优化了整个web开发流程,丢掉了历史包袱,强化了css的健壮性。

 

 

 

 

 

 

 

 

 

 

 

 

 

上一篇:java版直播商城之直播间商品代码介绍Spring Cloud+SpringBoot+mybatis+uniapp b2b2c微服务商城


下一篇:微信小程序java版Spring Cloud+Spring Boot+mybatis+security+uniapp+Redis+MQ+VR全景