前端面试CSS部分（二）

前端面试CSS部分（二）

1. 元素竖向的百分比设定是相对于容器的高度吗？

这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

2. 全屏滚动的原理是什么？用到了CSS的那些属性？

原理:主要呈现方式有两种，一种是有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过 transform进行y轴定位,也可以通过 margin-top实现;
第二种就是所有的子元素和页面一样，都显示在当前页面，简单的实现第一种页面
overflow: hidden transition: all 1000ms ease

3. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计( Responsive Web design)是—个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的 viewport
<meta name="viewport'content="width=device-width, "initial-scale=1. "maximum -scale="1, user-scalable=no">

4. 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

答：视差滚动（Parallax Scrolling）就是这样的效果之一。这种技术通过在网页向下滚动的时候，控 
制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
原理：
（1）CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
（2）jquery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
（3）插件实现方式
例如：parallax-scrolling，兼容性十分好

5. 你对line-height是如何理解的？

行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是 height和 line-height,没有定义 height属性,最终其表现作用一定是 line-height。
	单行文本垂直居中:
		把 line-height值设置为 height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除
	多行文本垂直居中:
		需要设置 display属性为 linline- block。

6. 怎么让Chrome支持小于12px 的文字？

  1、用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
  2、使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。
  3、继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。
  4、使用12px以上字体：为了兼容、为了代码更简单 从新考虑权重下兼容性。
  
  在Chrome27以前可以使用-webkit-text-size-adjust属性，不过最新的浏览器已经不支持这个属性了
   **-webkit-text-size-adjust:none;**
  使用CSS3新的属性transform
p{
	font-size:10pX;
	-webkit-transform： scale(0.8)
}//0.8是缩放比例

7. 让页面里的字体变清晰，变细用CSS怎么做？

  **-webkit-font-smoothing: antialiased;**
  
  webkit-font-smoothing在 window系统下没有起作用,但是在iOS设备上起作用
   webkit-font- smoothing:antialiased是最佳的,灰度平滑。

8. position:fixed;在android下无效怎么处理？

  fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，原来的网页还好好的在那，fixed的内容也没有变过位置，
  
  所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的。
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

9. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

10. display:inline-block 什么时候会显示间隙？(携程)

1.有空格时候会有间隙	解决: 移除空格
11. margin正值的时候	解决: margin使用负值
3.使用font-size时候	解决: font-size:0、 letter- spacing、word- spacing

12. overflow: scroll时不能平滑滚动的问题怎么处理？

1、阻止所有能导致页面滚动的事du件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条zhi就悲剧了；dao
2、bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了；
3、把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上；
4、弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。

13. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

     1.外层box-sizing: border-box; 同时设置padding: 100px 0 0；
     2.内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；
     3.另一个元素直接height: 100%;  
        /*方案一*/
        /*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
        .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
        .B { height: 100%; background: #D9C666; }*/
 
        /*方案二*/
        /*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
        .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
        .B { height: 100%; background: #D9C666; }*/
 
        /*方案三*/
        .outer { height: 100%; position: relative; }
        .A { height: 100px; background: #BBE8F2; }
        .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }

14. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

1.png是便携式网络图片( Portable Network Graphics)是一种无损数据压缩位图文件格式优点是:压缩比高,色彩好。大多数地方都可以用。
2.GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。
3.JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。
4.**WebP**是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。
优点：
	•在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
	•在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
	•WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。
缺点：
	但是目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。

15. 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

  如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
  所以不如隔离开。

  因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
  这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

  同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
  提高了webserver的http请求的解析速度。

16. style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在 style标签〕会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在 windows的l下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

17. 什么是CSS 预处理器 / 后处理器？

  - 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
    还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

  - 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

18. rem布局的优缺点？

rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（html元素）的font-size。默认情况下，html元素的font-size为16px， rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

通过rem单位，可以实现响应式的布局，特别是引入相应的postcss相关插件，免去了设计稿中的px到rem的计算。rem单位在国外的一些网站也有使用，这里所说的rem来实现布局的缺点，或者说是小缺陷是：在响应式布局中，必须通过js来动态控制根元素font-size的大小。也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。 

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

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

20. css属性 overflow属性定义溢出元素内容区的内容会如何处理?

参数是scro时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是 visible时候,溢出的内容出现在父元素之外。
参数是 hidden时候,溢出隐藏

21. 左右两栏固定宽度，中间自适应布局的5种方案

**1、float浮动**
通过float，让左右2栏浮动到左边和右边，然后中间div需要放在左右两个div之后。

优点：浏览器的兼容性比较好
缺点：浮动会造成相关元素脱离文档流，需要做一些清除浮动的处理。另外当中间区域内容高度超出设定高度时候，会破坏三栏布局。
代码：
  <style media="screen">
    article div{
      height: 200px;
    }
    .left{
      float:left;
      width:200px;
      background: red;
    }
    .center{
      background: yellow;
    }
    .right{
      float:right;
      width:200px;
      background: blue;
    }
  </style>
</head>
<body>
  <article>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="center">中</div>
  </article>
</body>

**2、绝对定位**
左中右三个div都需要设置绝对定位：position: absolute，左侧div设置left: 0靠左，右侧div同理设置right: 0靠右，中间div设置left和right值为左侧和右侧div的宽度。
优点：方便快捷
缺点：会造成子元素也一起脱离文档流，可使用性比较差。另外当中间区域内容高度超出设定高度时候，会破坏三栏布局。
代码：
  <style media="screen">
    article div{
      height: 200px;
      position: absolute;
    }
     .left{
      left:0;
      width: 200px;
      background: red;
    }
     .center{
      left: 200px;
      right: 200px;
      background: yellow;
    }
     .right{
      right:0;
      width: 200px;
      background: blue;
    }
  </style>
</head>
<body>
  <article>
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </article>
</body>

**3、flex布局**
首先设置包裹左中右三个div的父容器节点的布局为flex布局即display: flex，
左右div设置固定宽度，中间div设置flex: 1占满剩余的空间。

优点：比较完美的做法，移动端比较常见。当不给定三栏高度时，可以随区域内容高度的改变而改变。
缺点：兼容性不太好，IE11以下都不支持。且设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
代码：
  <style media="screen">
    article {
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    article div{
      height: 200px;
    }
     .left{
      width: 200px;
      background: red;
    }
     .center{
      flex: 1;
      background: yellow;
    }
     .right{
      width: 200px;
      background: blue;
    }
  </style>
</head>
<body>
  <article>
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </article>
</body>

**4、表格布局table**
首先设置包裹左中右三个div的父容器节点的布局为table布局即display: table，且设置总的宽度为100%，左中右都设为table-cell，左右div设置固定宽度，中间div不设置宽度。

优点：比较完美的做法。当不给定三栏高度时，可以随区域内容高度的改变而改变。
缺点：兼容性不太好，IE11以下不支持，三栏高度会始终一致，如果只想对某一栏高度增加或减少是不行的
代码：
  <style media="screen">
    article {
      display: table;
      width: 100%;
    }
    article div{
      height: 200px;
      display: table-cell;
    }
     .left{
      width: 200px;
      background: red;
    }
     .center{
      background: yellow;
    }
     .right{
      width: 200px;
      background: blue;
    }
  </style>
</head>
<body>
  <article>
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </article>
</body>

**5、网格grid布局**
首先设置包裹左中右三个div的父容器节点的布局为grid布局即display: grid，且设置总的宽度为100%，网格需要设置行和列，行高设置200px，即grid-template-rows: 200px;，同时有3列，左右各200px宽度，中间自适应，即grid-template-columns: 200px auto 200px;。

优点：比较新颖的做法
缺点：兼容性不太好，IE11以下不支持。另外当中间区域内容高度超出设定高度时候，会破坏三栏布局。
代码：
  <style media="screen">
    article {
      width:100%;
      display: grid;
      grid-template-rows: 200px;
      grid-template-columns: 200px auto 200px;
    }
     .left{
      background: red;
    }
     .center{
      background: yellow;
    }
     .right{
      background: blue;
    }
  </style>
</head>
<body>
  <article>
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </article>
</body>