HTML和CSS面试题
清除浮动的几种方式，各自的优缺点
- 父级
div定义height - 结尾处加空
div标签clear:both - 父级
div定义伪类:after和zoom - 父级
div定义overflow:hidden - 父级
div也浮动，需要定义宽度 - 结尾处加
br标签clear:both - 比较好的是第3种方式，好多网站都这么用
web开发中会话跟踪的方法有哪些
cookiesessionurl重写- 隐藏
input ip地址
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
- 图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
- 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
- 如果图片为css图片，可以使用
CSSsprite，SVGsprite，Iconfont、Base64等技术。 - 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
- 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致
href和src的区别：
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
HTML和CSS面试题
HTML部分
简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，在没有样式CSS情况下也以一种文档格式显示,搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
Doctype作用？
声明位于位于HTML文档中的第一行，处于 标签之前。是一种标记语言的文档类型声明，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素:
页面导入样式时，使用link和@import有什么区别？
方式：link 是HTML方式， @import 是CSS方式
作用：link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS
加载时间上：页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
兼容：@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题
常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]
html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？
绘画 canvas
video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
当然也可以直接使用成熟的框架、比如html5shim
Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
title 表示是整个页面标题，h1 则表示层次明确的标题，对页面信息的抓取有很大的影响
strong 标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong 会重读，而 b
是展示强调内容
i 内容展示为斜体，em 表示强调的文本
自然样式标签：b, i, u, s, pre
语义样式标签：strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用。如果不能确定时，首选使用自然样式标签
Css部分
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
有两种， IE 盒子模型、W3C 盒子模型；
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
区 别： IE的content部分把 border 和 padding计算了进去;
CSS选择符有哪些？哪些属性可以继承？
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a:hover, li:nth-child）
CSS优先级算法如何计算？
优先级为: !important > id > class > tag important 比 内联优先级高
行内样式 > 内部样式 > 外部样式
含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式
为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
box-sizing 常用的属性有哪些？分别有什么作用？
box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值
请列举几种隐藏元素的方法
visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中
rgba() 和 opacity 的透明效果有什么不同？
opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
CSS3有哪些新特性？
弹性盒模型 display: flex;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
转换
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);
多列布局 column-count: 5;
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
背景效果 background-size: 100px 100px;
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔
解决办法：在ul设置设置font-size=0,在li上设置需要的文字大小
什么是外边距重叠？ 重叠的结果是什么？
外边距重叠就是 margin-collapse
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和
圣杯布局的实现原理？
要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
解释下什么是浮动和它的工作原理？
非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。
此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
工作原理：
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留
浮动元素引起的问题？
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
列举几种清除浮动的方式？
父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
overflow: hidden的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。）
父元素增加伪类
父级div定义zoom
Clearfix 方法：上文使用.clearfix类已经提到。（在大型项目中，我会使用 Clearfix 方法，在需要的地方使用.clearfix。设置
CSS优化、提高性能的方法有哪些？
1.多个css合并，尽量减少HTTP请求
2.抽象提取公共样式，减少代码量
3.充分利用css继承属性，减少代码量
4.选择器优化嵌套，尽量避免层级过深
5.css雪碧图
将css文件放在页面最上面
移除空的css规则
避免使用CSS表达式
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
浏览器是怎样解析CSS选择器的？
浏览器解析 CSS 选择器的方式是从右到左
在网页中的应该使用奇数还是偶数的字体？
在网页中的应该使用“偶数”字体：
偶数字号相对更容易和 web 设计的其他部分构成比例关系
使用奇数号字体时文本段落无法对齐
宋体的中文网页排布中使用最多的就是 12 和 14
margin和padding分别适合什么场景使用？
需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin
需要在border内测添加空白，且空白处需要背景（色）时，使用 padding
一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
方案1：
.sub { height: calc(100%-100px); }方案2：
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }方案3：
.container { display:flex; flex-direction:column; }
.sub { flex:1; }font-style 属性 oblique 是什么意思？
font-style: oblique; 使没有 italic 属性的文字实现倾斜
设置元素浮动后，该元素的 display 值会如何变化？
设置元素浮动后，该元素的 display 值自动变成 block
你对 line-height 是如何理解的？
line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：
$(window).resize(function () {
screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
$("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
$("body").attr("class", "w1400");
}
if(screenWidth > 1800){
$("body").attr("class", "");
}
}
49.bootstrap响应式实现的原理
百分比布局+媒体查询
51.浏览器是如何渲染页面的？
渲染的流程如下：
1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式 3.将CSS与DOM合并，构建渲染树（Render Tree） 4.布局和绘制，重绘（repaint）和重排（reflow） .display的属性值都有哪些？ none, block, inline, inline-block, table, table-row, table-cell, list-item. 34.使用 CSS 预处理的优缺点分别是什么？ 优点： 提高 CSS 可维护性。 易于编写嵌套选择器。 引入变量，增添主题功能。可以在不同的项目中共享主题文件。 通过混合（Mixins）生成重复的 CSS。 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。 缺点： 需要预处理工具。 重新编译的时间可能会很慢。 如何解决不同浏览器的样式兼容性问题？ 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。 使用已经处理好此类问题的库，比如 Bootstrap。 使用 autoprefixer 自动生成 CSS 属性前缀。 使用 Reset CSS 或 Normalize.css。 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。 在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的； 而 inline 布局则是在水平方向来排列。 弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。 box-sizing:border-box; 为div设置这个属性之后，这个div的宽度就是内容宽+padding+border的总和。 box-sizing属性用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 CSS 的 transition 和 animation 有何区别？ 首先 transition 和 animation 都可以做动效，从语义上来理解， transition 是过渡，由 一个状态过渡到另一个状态，比如高度 100px 过渡到 200px ；而 animation 是动画，即更 专业做动效的， animation 有帧的概念，可以设置关键帧 keyframe ，一个动画可以由多个 关键帧多个状态过渡组成，另外 animation 也包含上面提到的多个属性。 position,文档流的理解 1.relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素可通过z-index进行层次分级 2.fixed 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是 它具有破坏性，会导致其他元素位置的变化。可通过z-index进行层次分级 3.absolute 的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会 根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元 素，如果找到一个设置了 position:relative/absolute/fixed 的元素，就以该元素为基准 定位，如果没找到，就以浏览器边界定位。可通过z-index进行层次分级 32.阐述一下CSS Sprites 将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。 px和em的区别 px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em 水平居中的方法 元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto; 如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto; 使用flex-box布局，指定justify-content属性为center display设置为tabel-ceil #垂直居中的方法 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle 使用flex布局，设置为align-item：center 绝对定位中设置bottom:0,top:0,并设置margin:auto 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值 文本垂直居中设置line-height为height值 说一说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 定义播放的方式，如恒速播放、艰涩播放等。 左边宽度固定，右边自适应 方法1：左侧div设置成浮动：float: left，右侧div宽度会自拉升适应 方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应 方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px 方法4：使用flex布局 两种以上方式实现已知或者未知宽度的垂直水平居中 css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ 垂直方向：line-height 水平方向：letter-spacing 为什么响应式设计（responsive design）和自适应设计（adaptive design）不同？ 自适应布局（Adaptive Layout） 自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。就是说你看到的页面，里面元素的位置会变化而大小不会变化； 你可以把自适应布局看作是静态布局的一个系列。 流式布局（Liquid Layout） 流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。 响应式布局（Responsive Layout） 分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 style标签写在body后与body前有什么区别？ 页面加载自上而下 当然是先加载样式。 写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题） display:inline-block 什么时候不会显示间隙？(携程) 移除空格 使用margin负值 使用font-size:0 letter-spacing word-spacing 元素竖向的百分比设定是相对于容器的高度吗？ 元素竖向的百分比设定是相对于容器的宽度，而不是高度 a标签上四个伪类的执行顺序是怎么样的？ link > visited > hover > active L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆 伪元素和伪类的区别和作用？ 伪元素 – 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如： p::before {content:"第一章：";} p::after {content:"Hot!";} p::first-line {background:red;} p::first-letter {font-size:30px;} 伪类 – 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如： a:hover {color: #FF00FF} p:first-child {color: red} ::before 和 :after 中双冒号和单冒号有什么区别？ 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法.outer {
width: 100%;
height: 500px;
background-color: yellow;}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;}
.right {
height: 200px;
background-color: blue;}.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;}
.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;}.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;}.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;
}}