HTML/CSS 面试题总结
1.css垂直水平居中：
-
有宽高的状况下水平于垂直居中？css
-
使用position 进行定位。left 与 top 值 为 50% margin：-50%；->没有兼容性问题html
-
文字元素使用text-align:center; linheight = 盒子高度 -> 没有兼容性问题jquery
-
-
没有宽高的元素实现水平与垂直居中?webpack
-
使用弹性盒布局 display:flex; justify-content:center;align-item:center;（适用于内层多元素-> IE9以上浏览器支持，需添加前缀web
-
外层建立两个包裹 -> 最外层 display:table; 内层元素 display:table-cell;vertical-align:middle; 内层元素全部的元素实现垂直居中(适用于内层多元素)-> 没有兼容性问题，无需添加前缀chrome
-
使用position进行定位，left top bottom right 均为 0 margin-auto -> 没有浏览器兼容性问题element-ui
-
2.移动端经常使用布局：
一、固定布局（通常进行其余布局的配合使用）bootstrap
- heade标签内建立meta标签，定义viewport进行视口设置
复制代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
复制代码
二、流式布局windows
- 流式布局与固定宽度布局基本不一样点就在于对网站尺寸的测量单位不一样，流式布局就是使用百分比来代替px做为单位。 优势是流动布局能够很好解决自适应需求。缺点是不够灵活，添加元素时，须要更改其余元素的值。
复制代码
三、栅格化布局 表明框架 bootstrap -> 12等分元素宽度/element-ui -> 24等分元素宽度浏览器
- 栅格系统能够实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分红12列，而后经过col-xx-xx的类名控制每一列的占比， 在使用的时候，咱们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。
复制代码
四、媒体查询+REM布局
- 使用媒体查询能够根据不一样的设备宽度加载不一样的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem能够实现移动端的响应式。
rem相对于HTML的字体大小进行调整 相对单位还有em em相对于最近的有设置的的父元素的字体大小进行设置；vw/vh 相对于当前的浏览器窗口大小进行设置 1vw = 百分之一浏览器窗口大小
复制代码
五、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.如何处理浏览器兼容问题：
一、咱们项目上要是作的时候 全局的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'
复制代码
二、最先的时候为了兼容IE浏览器，使用 CSS 的hack 条件hack 属性hack 选择器hack filter 滤镜处理透明度 -> 只是了解
三、js的兼容处理 ，DOMBOM操做能够借助jquery类库 兼容了IE8浏览器 1.几的版本兼容IE浏览器 使用构建工具webpack + 相关loader 进行 CSS文件及JS文件的兼容性语法转移 如 post-css/css-loader/babel 等进行转码
4.css 的权重等级划分
CSS权重指的是样式的优先级，有两条或多条样式做用于一个元素，权重高的那条样式对元素起做用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
- !important，加在样式属性值后，权重值为 10000
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： content、:hover 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为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
五、CSS实现一个幻灯片效果的方案？
-
1 使用a标签 + :active属性实现
-
2 使用 css伪类 ：checked +号选择器实现
六、什么是外边距重叠？重叠的结果是什么？
在 CSS 当中，相邻的两个盒子（多是兄弟关系也多是祖先关系）的外边距能够结合成一 个单独的外边距。这种合并外边距的方式被称为折叠，而且于是所结合成的外边距称为折叠 外边距。
七、rgba()和 opacity 的透明效果有什么不一样、background-color rgb hsl的区别分别是什么？
rgba()和 opacity 都能实现透明效果，但最大的不一样是 opacity 做用于元素，以及元素内的 全部内容的透明度， 而 rgba()只做用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明 效果！）rgb -> red green blue; hsl 0~360选值
八、display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素而且挤占该元素原来的空间。 便是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各类属性值都将 “丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完 全透明），而它所占据的空间位置仍然存在。
九、CSS 中 link 和@import 的区别是：
link 为标准导入css的方法，@import导入的css文件，使用JavaScript没法进行style的获取，老式浏览器中@import方法导入的文件会出现样式的短暂消失
十、BFC 是什么?
BFC（块级格式化上下文），一个建立了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠 的问题 BFC 是指浏览器中建立了一个独立的渲染区域，该区域内全部元素的布局不会影响到区域外 元素的布局，这个渲染区域只对块级元素起做用
十一、多屏幕+高清+手机系统字体大小适配 方案
/**
* @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像素边框
一、 媒体查询利用设备像素比缩放，设置小数像素
- 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 }
}
复制代码
- 【缺点】对设备有要求，小数像素目前兼容性较差。
二、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单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。
三、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 浏览器的多数约定，包括双击缩放，几乎如今全部的移动端浏览器都有这个功能。
解决方案：
一、使用viewport
- 添加viewpoint meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
复制代码
二、使用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">
复制代码
- 1. htmlCSS面试题
- 2. 面试题总结
- 3. 面试题-总结
- 4. 前面面试题总结
- 5. Android面试试题总结
- 更多相关文章...
- • Lua 调试(Debug) - Lua 教程
- • Markdown 标题 - Markdown 教程
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。