HTML/CSS 面试题总结

安安喵
704 阅读14分钟

1.css垂直水平居中：

  1. 有宽高的情况下水平于垂直居中？

    1. 使用position 进行定位。left 与 top 值 为 50% margin：-50%；->没有兼容性问题

    2. 文字元素使用text-align:center; linheight = 盒子高度 -> 没有兼容性问题

  2. 没有宽高的元素实现水平与垂直居中?

    1. 使用弹性盒布局 display:flex; justify-content:center;align-item:center;（适用于内层多元素-> IE9以上浏览器支持，需添加前缀

    2. 外层创建两个包裹 -> 最外层 display:table; 内层元素 display:table-cell;vertical-align:middle; 内层元素所有的元素实现垂直居中(适用于内层多元素)-> 没有兼容性问题，无需添加前缀

    3. 使用position进行定位，left top bottom right 均为 0 margin-auto -> 没有浏览器兼容性问题

2.移动端常用布局：

1、固定布局（一般进行其他布局的配合使用）

- heade标签内创建meta标签，定义viewport进行视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2、流式布局

- 流式布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流式布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。

3、栅格化布局 代表框架 bootstrap -> 12等分元素宽度/element-ui -> 24等分元素宽度

- 栅格系统可以实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比， 在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。

4、媒体查询+REM布局

- 使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem可以实现移动端的响应式。

 rem相对于HTML的字体大小进行调整   相对单位还有em em相对于最近的有设置的的父元素的字体大小进行设置；vw/vh 相对于当前的浏览器窗口大小进行设置 1vw = 百分之一浏览器窗口大小

5、flex布局

- Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局

1）父容器相关属性

    flex-direction    flex-wrap    flex-flow  justify-content  align-items    align-content

2）子容器相关属性

    order ->排列顺序 flex-grow -> 放大比列   flex-shrink ->缩小比例  flex-basis -> 主轴空间  flex -> 前三个值的简写  align-self 元素再集合中的排列方式 覆盖父元素的align-item

3.如何处理浏览器兼容问题：

1、我们项目上要是做的时候 全局的reset.css => 处理浏览器的默认样式，添加样式的私有前缀，行内样式style属性使用创建的js插件进行私有前缀的添加；

        - 私有前缀添加JS插件封装：

let vendor = (() => {
    let transformNames = {
        webkit: 'webkitTransform',
        Moz: 'MozTransform',
        O: 'OTransform',
        ms: 'msTransform',
        standard: 'transform'
    }

    for (let key in transformNames) {
        if (elementStyle[transformNames[key]] !== undefined) {
            return key
        }
    }
    return false
})()

export function prefixStyle(style) {
    if (vendor === false) {
        return false
    }
    if (vendor === 'standard') {
        return style
    }

    return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

// prefixStyle('transform')
// 'webkitTransform'

2、最早的时候为了兼容IE浏览器，使用 CSS 的hack 条件hack 属性hack 选择器hack filter 滤镜处理透明度 -> 只是了解

3、js的兼容处理 ，DOMBOM操作可以借助jquery类库 兼容了IE8浏览器 1.几的版本兼容IE浏览器 使用构建工具webpack + 相关loader 进行 CSS文件及JS文件的兼容性语法转移 如 post-css/css-loader/babel 等进行转码

4.css 的权重等级划分

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

  1. !important，加在样式属性值后，权重值为 10000
  2. 内联样式，如：style=””，权重值为1000
  3. ID选择器，如：#content，权重值为100
  4. 类，伪类和属性选择器，如： content、:hover 权重值为10
  5. 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
  6. 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

实例：


<style type="text/css">
   div{
       color:red !important;
   }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

<style type="text/css">
   #content div.main_content h2{
       color:red;    
   }
   #content .main_content h2{
       color:blue;
   }
</style>
......
<div id="content">
   <div class="main_content">
       <h2>这是一个h2标题</h2>
   </div>
</div>

第一条样式的权重计算： 100+1+10+1，结果为112； 第二条样式的权重计算： 100+10+1，结果为111； h2标题的最终颜色为red

5、CSS实现一个幻灯片效果的方案？

  • 1 使用a标签 + :active属性实现

  • 2 使用 css伪类 ：checked +号选择器实现

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

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

7、rgba()和 opacity 的透明效果有什么不同、background-color rgb hsl的区别分别是什么？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的 所有内容的透明度， 而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明 效果！）rgb -> red green blue; hsl 0~360选值

8、display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素并且挤占该元素原来的空间。 即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完 全透明），而它所占据的空间位置仍然存在。

9、CSS 中 link 和@import 的区别是：

link 为标准导入css的方法，@import导入的css文件，使用JavaScript无法进行style的获取，老式浏览器中@import方法导入的文件会出现样式的短暂消失

10、BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠 的问题 BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外 元素的布局，这个渲染区域只对块级元素起作用

11、多屏幕+高清+手机系统字体大小适配 方案


/**
 * @description （多屏幕+手机系统字体+webview+750设计稿）适配方案
 * 1rem = 100px
 */
(function(win, doc) {
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var _dpr = win.devicePixelRatio || 1;
  var _scale = 1 / _dpr;

  var setStyleFontSize = function(num) {
    docEl.style.fontSize = (num > 100 ? 100 : num) + 'px';
  };
  // 计算并设置根元素fontSize
  var calcRem = function() {
    var _rem = (docEl.clientWidth * _dpr) / 7.5;

    /* 设置viewport，进行缩放，达到高清效果 */
    metaEl.setAttribute(
      'content',
      'width=device-width' +
        ',initial-scale=' +
        _scale +
        ',maximum-scale=' +
        _scale +
        ', minimum-scale=' +
        _scale +
        ',user-scalable=no'
    );
    /* 设置data-dpr属性，留作的css hack之用 */
    docEl.setAttribute('data-dpr', _dpr);

    /* 动态写入样式 */
    setStyleFontSize(_rem);

    /* 给js调用的，某一dpr下rem和px之间的转换函数 */
    win.rem2px = function(v) {
      v = parseFloat(v);
      return v * _rem;
    };
    win.px2rem = function(v) {
      v = parseFloat(v);
      return v / _rem;
    };

    win.dpr = _dpr;
    win.rem = _rem;
  };

  /* 解决部分手机webview一开始获取的clientWidth为0，导致font-size为0即1rem=0 的bug */
  var canSetFontSize = function() {
    if (docEl.clientWidth === 0) {
      setTimeout(function() {
        canSetFontSize();
      }, 50);
      return;
    }
    calcRem();
  };
  canSetFontSize();

  /* 解决手机更改系统字体大小的适配问题 */
  var calcScale = function() {
    setTimeout(function() {
      (function() {
        try {
          var realFz = parseInt(win.getComputedStyle(docEl).fontSize.replace('px', ''), 10);

          var expectFz = parseInt(win.rem, 10);
          console.log(realFz, expectFz);

          if (realFz != expectFz && docEl.clientWidth < 750) {
            var realRem = expectFz / (realFz / expectFz);
            setStyleFontSize(realRem);
          }
        } catch (e) {
          console.error(e);
        }
      })();
    }, 50);
  };
  win.onload = function() {
    console.log('onload');
    calcScale();
  };

  var debounce = function(fn, delay, immediate) {
    if (!delay) {
      delay = 300;
    }
    if (!immediate) {
      immediate = false;
    }
    var timer = null;
    return function() {
      var that = this;
      var argumentsCopy = arguments;
      if (immediate && !timer) {
        console.log(immediate, timer);
        fn.apply(that, argumentsCopy);
      }
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        if (!immediate) {
          fn.apply(that, argumentsCopy);
        }
        timer = null;
      }, delay);
    };
  };
  win.onresize = debounce(function() {
    console.log('onresize');
    var _rem = docEl.clientWidth / 7.5;
    setStyleFontSize(_rem);
  });
})(window, document);

12.移动端1像素边框

1、 媒体查询利用设备像素比缩放，设置小数像素

  • IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
  • 【缺点】对设备有要求，小数像素目前兼容性较差。

2、viewport + rem 方案

  • 该方案是对上述方案的优化，整体思路就是利用viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态如下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

【缺点】以为缩放涉及全局的rem单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。

3、transform: scale(0.5) 方案 - 推荐: 很灵活

  • 设置height: 1px，根据媒体查询结合transform缩放为相应尺寸。
div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求


div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

13.移动端300毫秒延迟

产生原因：

  • 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。

解决方案：

1、使用viewport

  • 添加viewpoint meta标签
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2、使用fastclick插件

  • 移动端事件触发顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click。

  • fastclick.js的原理是：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。

    fastclick同样可以解决移动端点透现象。

    • 点透现象：当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。点透现象的关键点：A/B两个层上下z轴重叠。上层的A点击后消失或移开。（这一点很重要）B元素本身有默认click事件（如a标签） 或 B绑定了click事件。在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

  • fastclick产生问题：

    页面引入fastClick.js后，滑动H5页面的时候发现谷歌浏览器会报错,如下

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/...

最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.

touch-action的属性值，auto是默认值，表示手势操作什么的完全有浏览器自己决定。manipulation表示浏览器只允许进行滚动和持续缩放操作，类似双击缩放这种非标准操作就不可以。click事件在移动端有个300ms延时，就是因为避免和手机双击行为发生冲突。然而，当我们设置了touch-action:manipulation干掉了双击行为，则显然，300ms延时就不复存在，因此，html {touch-action: manipulation;}声明可以用来避免浏览器300ms延时问题。touch-action的兼容性在移动端大多数还是兼容的。于是移动端以后就可以大胆的使用click事件了。

14.移动端常遇问题及解决方法：

参考链接：caibaojian.com/web-mobile-…

15.常用meta标签集合

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    设置viewport宽度，为一个正整数，或字符串‘device-width’
// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例，为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放 
空白页基本meta标签
<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
avatar
文章
阅读
粉丝