CSS题目及答案整理
原文连接在这里css
CSS
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？
（1）有两种， IE 盒子模型（至关于
box-sizing: border-box;）、W3C 盒子模型（box-sizing: content-box;）；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;html
对BFC规范(块级格式化上下文：block formatting context)的理解？
1. FC（Formatting Context）
想要理解BFC与IFC，首先要理解FC，即 formatting context，它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。前端
常见的Formatting Context 有：Block Formatting Context（BFC | 块级格式化上下文） 和 Inline Formatting Context（IFC |行内格式化上下文）。node
一个页面是由不少个 Box 组成的，元素的类型和 display 属性决定了这个 Box 的类型。不一样类型的 Box，会参与不一样的 Formatting Context。jquery
Block level的box会参与造成BFC，好比display值为block，list-item，table的元素。css3
Inline level的box会参与造成IFC，好比display值为inline，inline-table，inline-block的元素。git
参考：github
2. IFC布局规则：
在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的
margin，border和padding在框之间获得保留。框在垂直方向上能够以不一样的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会造成一行，叫作行框。
3. BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由
margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每一个元素的左外边缘（
margin-left)， 与包含块的左边（border-left）相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。除非这个元素本身造成了一个新的BFC。BFC的区域不会与
float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
4. 怎样造成一个BFC？
块级格式化上下文由如下之一建立：
根元素或其它包含它的元素
浮动 (元素的
float不是none)绝对定位的元素 (元素具备
position为absolute或fixed)元素具备
display: inline-block，table-cell, table-caption, flex, inline-flex块元素具备
overflow，且值不是visible
整理到这儿，对于上面第4条产生了一个small small的疑问：为何display: inline-block;的元素是inline level 的元素，参与造成IFC，却能建立BFC？
本身认为答案是这样的：inline-block的元素的内部是一个BFC，可是它自己能够和其它inline元素一块儿造成IFC。
5. BFC用处
1. 清除浮动
<div class="wrap"> <section>1</section> <section>2</section> </div>
.wrap {
border: 2px solid yellow;
width: 250px;
}
section {
background-color: pink;
float: left;
width: 100px;
height: 100px;
}
能够看到，因为子元素都是浮动的，受浮动影响，边框为黄色的父元素的高度塌陷了。
解决方案：为 .wrap 加上 overflow: hidden;使其造成BFC，根据BFC规则第六条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。
2. 布局：自适应两栏布局
<div> <aside></aside> <main>我是好多好多文字会换行的那种蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤</main> </div>
div {width: 200px;}
aside {
background-color: yellow;
float: left;
width: 100px;
height: 50px;
}
main {
background-color: pink;
}
能够看到右侧元素的一部分跑到了左侧元素下方。
解决方案：为main设置 overflow: hidden; 触发main元素的BFC，根据规则第四、5条，BFC的区域是独立的，不会与页面其余元素相互影响，且不会与float元素重叠，所以就能够造成两列自适应布局
3. 防止垂直margin合并
<section class="top">1</section> <section class="bottom">2</section>
section {
background-color: pink;
margin-bottom: 100px;
width: 100px;
height: 100px;
}
.bottom {
margin-top: 100px;
}
能够看到，明明.top和.bottom中间加起来有200px的margin值，可是咱们只能看到100px。这是由于他们的外边距相遇发生了合并。
怎样解决：为其中一个元素的外面包裹一层元素。并为这个外层元素设置 overflow: hidden;，使其造成BFC。由于BFC内部是一个独立的容器，因此不会与外部相互影响，能够防止margin合并。
<section class="top">1</section> <div class="wrap"> <section class="bottom">2</section> </div>
.wrap {
overflow: hidden;
}
CSS里有哪几个经常使用的单位？说出他们之间的关系。
px， em， rem
1em = 当前元素父元素的font-size
1rem = html元素的font-size
CSS选择符有哪些？哪些属性能够继承？
* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
* 可继承的样式： font-size font-family color, ul li dl dd dt;
* 不可继承的样式：border padding margin width height;
CSS优先级算法如何计算？
* 优先级就近原则，同权重状况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高
CSS定义的权重
如下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，如下例子是演示各类定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
若是权重相同，则最后定义的样式会起做用，可是应该避免这种状况出现
CSS3新增伪类有那些？
举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。 p:last-of-type 选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。 p:only-of-type 选择属于其父元素惟一的 <p> 元素的每一个 <p> 元素。 p:only-child 选择属于其父元素的惟一子元素的每一个 <p> 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每一个 <p> 元素。 :after 在元素以后添加内容,也能够用来作清除浮动。 :before 在元素以前添加内容 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。
如何居中div？
* 水平居中：给div设置一个宽度，而后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
* 让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中一
肯定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative; /* 相对定位或绝对定位都可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中二
未知容器的宽高，利用 `transform` 属性
div {
position: absolute; /* 相对定位或绝对定位都可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中三
利用 flex 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
display有哪些值？说明他们的做用。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none 缺省值。象行内元素类型同样显示。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block 默认宽度为内容宽度，能够设置宽高，同行显示。 list-item 象块类型元素同样显示，并添加样式列表标记。 table 此元素会做为块级表格来显示。 inherit 规定应该从父元素继承 display 属性的值。
position的值relative和absolute定位原点是？
absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
规定从父元素继承 position 属性的值。
CSS3有哪些新特性？
新增各类CSS选择器 （: not(.input)：全部 class 不是“input”的节点） 圆角 （border-radius:8px） 多列布局 （multi-column layout） 阴影和反射 （Shadow\Reflect） 文字特效 （text-shadow） 文字渲染 （Text-decoration） 线性渐变 （gradient） 旋转 （transform） 缩放,定位,倾斜,动画,多背景 例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
一个用于页面布局的全新CSS3功能，Flexbox能够把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。 较为复杂的布局还能够经过嵌套一个伸缩容器（flex container）来实现。 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。 它的全部子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流能够很方便的用来作局中，能对不一样屏幕大小自适应。 在布局上有了比之前更加灵活的空间。 具体：http://www.w3cplus.com/css3/flexbox-basics.html
用纯CSS建立一个三角形的原理是什么？
**把上、左、右三条边隐藏掉（颜色设为 transparent）**
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一个满屏 品 字布局 如何设计?
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
而后用float或者inline-block使其不换行便可
css多列等高如何实现？
利用padding-bottom|margin-bottom正负值相抵； 设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就仍是它里面的列没有设定padding-bottom时的高度， 当它里面的任一列高度增长了，则父容器的高度被撑到里面最高那列的高度， 其余比这列矮的列会用它们的padding-bottom补偿这部分高度差。
常常遇到的浏览器的兼容性有哪些？缘由，解决方法是什么，经常使用hack的技巧 ？
* png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8.
* 浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种状况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从整体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从全部状况中分离出来。
接着，再次使用“+”将IE8和IE七、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:red;/*全部识别*/
background-color:#00deff\9; /*IE六、七、8识别*/
+background-color:#a200ff;/*IE六、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可使用获取常规属性的方法来获取自定义属性,
也可使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一经过getAttribute()获取自定义属性。
* IE下,even对象有x,y属性,可是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,可是没有x,y属性。
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增长额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可经过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超连接访问事后hover样式就不出现了 被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
li与li之间有看不见的空白间隔是什么缘由引发的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，由于空格也属于字符,这些空白也会被应用样式，占据空间，因此会有间隔，把字符大小设为0，就没有空格了。
为何要初始化CSS样式。
- 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。
- 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。
最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
absolute的containing block(包含块)计算方式跟正常流有什么不一样？
不管属于哪一种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，而后再判断： 一、若此元素为 inline 元素，则 containing block 为可以包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形； 二、不然,则由这个祖先元素的 padding box 构成。 若是都找不到，则为 initial containing block。 补充： 1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分） 2. absolute: 向上找最近的定位为absolute/relative的元素 3. fixed: 它的containing block一概为根元素(html/body)，根元素也是initial containing block
CSS里的visibility属性有个collapse属性值是干吗用的？在不一样浏览器下之后什么区别？
对于普通元素visibility:collapse;会将元素彻底隐藏,不占据页面布局空间,与display:none;表现相同. 若是目标元素为table,visibility:collapse;将table隐藏,可是会占据页面布局空间. 仅在Firefox下起做用,IE会显示元素,Chrome会将元素隐藏,可是占据空间.
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
若是元素的display为none,那么元素不被渲染,position,float不起做用,若是元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起做用.若是元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其余元素margin折叠.
请解释一下为何须要清除浮动？清除浮动的方式
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使咱们页面后面的布局不能正常显示。
一、父级div定义height；
二、父级div 也一块儿浮动；
三、常规的使用一个class；
.clearfix:before, .clearfix:after {
content: " ";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
四、SASS编译的时候，浮动元素的父级div定义伪类:after
&:after,&:before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并容许可能被生成内容盖住的内容能够进行点击和交互;
4）经过 content:"."生成内容做为最后一个元素，至于content里面是点仍是其余都是能够的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样作的,firefox直到7.0 content:"" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
经过分析发现，除了clear：both用来闭合浮动的，其余代码无非都是为了隐藏掉content生成的内容，这也就是其余版本的闭合浮动为何会有font-size：0，line-height：0。
什么是外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 w3school介绍网址： http://www.w3school.com.cn/css/css_margin_collapsing.asp
zoom:1的清除浮动原理?
清除浮动，触发hasLayout； Zoom属性是IE浏览器的专有属性，它能够设置或检索对象的缩放比例。解决ie下比较奇葩的bug。 譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。 前因后果大概以下： 当设置了zoom的值以后，所设置的元素就会就会扩大或者缩小，高度宽度就会从新计算了，这里一旦改变zoom值时其实也会发生从新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。 Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom如今已经被逐步标准化，出如今 CSS 3.0 规范草案中。 目前非ie因为不支持这个属性，它们又是经过什么属性来实现元素的缩放呢？ 能够经过css3里面的动画属性scale进行缩放。
移动端的布局用过媒体查询吗？
假设你如今正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，
而显示设备、屏幕投影和打印等这些媒介都有本身的特色，CSS就是为文档提供在不一样媒介上展现的适配方法
<!-- link元素中的CSS媒体查询 -->
当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。
当媒体查询返回假， <link> 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
包含了一个媒体类型和至少一个使用 宽度、高度和颜色等媒体属性来限制样式表范围的表达式。
CSS3加入的媒体查询使得无需修改内容即可以使样式应用于某些特定的设备范围。
<style>
@media (min-width: 700px) and (orientation: landscape){
.sidebar {
display: none;
}
}
</style>
使用 CSS 预处理器吗？喜欢那个？
SASS (SASS、LESS没有本质区别，只由于团队前端都是用的SASS)
什么是CSS 预处理器 / 后处理器？
- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，加强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具备很方便的UI组件模块化开发能力，极大的提升工做效率。 - 后处理器例如：PostCSS，一般被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常作的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
CSS优化、提升性能的方法有哪些？
关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）； 若是规则拥有 ID 选择器做为其关键选择器，则不要为规则增长标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）； 提取项目的通用公有样式，加强可复用性，按模块编写组件；加强项目的协同开发性、可维护性和可扩展性; 使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
浏览器是怎样解析CSS选择器的？
样式系统从关键选择器开始匹配， 而后左移查找它的祖先元素。 只要选择器的子树一直在工做， 样式系统就会持续左移， 直到和规则匹配， 或者是由于不匹配而放弃该规则。
在网页中的应该使用奇数仍是偶数的字体？为何呢？
偶数字号相对更容易和 web 设计的其余部分构成比例关系。好比：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另外一些地方用 14 × 1.5 = 21 px 的标题字号。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 十二、1四、16 px 这三个大小的点阵，而 1三、1五、17 px 时用的是小一号的点阵（即每一个字占的空间大了 1 px，但点阵没变），因而略显稀疏。
margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。 margin用于布局分开元素使元素与元素互不相干； padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离
元素竖向的百分比设定是相对于容器的高度吗？
不是，是容器宽度。
抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅]
先看视觉稿，把可复用的组件找出来。而后把命名和结构肯定下来。
https://github.com/jayli/jayl...
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的做用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成） 双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器须要同时支持旧的已经存在的伪元素写法， 好比:first-line、:first-letter、:before、:after等， 而新的在CSS3中引入的伪元素则不容许再支持旧的单冒号的写法。 想让插入的内容出如今其它内容前，使用::before，否者，使用::after； 在代码顺序上，::after生成的内容也比::before生成的内容靠后。 若是按堆栈视角，::after生成的内容会在::before生成的内容之上
如何修改chrome记住密码后自动填充表单的黄色背景 ？
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
你对line-height是如何理解的？
line-height定义行高，设置行间的距离。应用方式是：用line-height减去font-size，获得的差（称为行间距）除2，分别添加到文本的顶部和底部。能够包含这些内容的最小框就是行框。
设置元素浮动后，该元素的display值是多少？
自动变成了 display:block 用 window.getComputedStyle(element).display 看了一下确实是 block
怎么让Chrome支持小于12px 的文字？
一、用图片：若是是内容固定不变状况下，使用将小于12px文字内容切出作图片，这样不影响兼容也不影响美观。 二、使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，若是是接单的这个时候就须要给客户讲解小于12px浏览器不兼容等事宜。 三、继续使用小于12px字体大小样式设置：若是不考虑chrome能够不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，作到最大兼容考虑。 四、使用css3里的一个属性：transform：scale（）
p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例
让页面里的字体变清晰，变细用CSS怎么作？
-webkit-font-smoothing: antialiased;
font-style属性可让它赋值为“oblique” oblique是什么意思？
倾斜的字体样式 与italic的区别：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。也就是说：Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜。
若是须要手动写动画，你认为最小时间间隔是多久，为何？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，因此理论上最小间隔为1/60*1000ms ＝ 16.7ms
什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么作）
若是静态文件都放在主域名下，那静态文件请求的时候都是带着cookie数据提交给server的，很是浪费流量，因此不如隔离开。 由于cookie有域的限制，所以不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据， 这样能够下降请求头的大小，下降请求时间，从而达到下降总体请求延时的目的。 同时这种方式不会将cookie传入Web Server，也减小了Web Server对cookie的处理分析环节，提升了webserver的http请求的解析速度。
有一个高度自适应的div，里面有两个div，一个高度100px，但愿另外一个填满剩下的高度。
（1）height：calc（100%-100px）
（2）absolute positioning：外层position：relative；
百分百自适应元素 position: absolute; top: 100px; bottom: 0; left: 0
（3）flex 父元素display:flex; flex-direction: column; 下面的子元素的设置flex: 1;
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
（1）响应式网站设计(Responsive Web design)的理念是：集中建立页面的图片排版大小，能够智
能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
（2）基本原理: 媒体查询 @media
（3）兼容IE可使用JS辅助一下来解决
position:fixed;在iOS下无效怎么处理？
未打开的锁#
软键盘唤起后，页面的 fixed 元素将失效（即没法浮动，也能够理解为变成了 absolute 定位），因此当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。 既然在 iOS 下因为软键盘唤出后，页面 fixed 元素会失效，致使跟随页面一块儿滚动，那么假如——页面不会过长出现滚动，那么即使 fixed 元素失效，也没法跟随页面滚动，也就不会出现上面的问题了。按照这个思路，若是使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变。
main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之能够滚动 */
overflow-y: scroll;
}
在原始输入法下， fixed 元素能够定位在页面的正确位置。滚动页面时，因为滚动的是 main 内部的 div，所以 footer 没有跟随页面滚动。
上面貌似解决了问题，可是若是在手机上实际测试一下，会发现 main 元素内的滚动很是不流畅，滑动的手指松开后，滚动马上中止，失去了本来的流畅滚动特性。百度一下弹性滚动的问题，发如今 webkit 中，下面的属性能够恢复弹性滚动。
-webkit-overflow-scrolling: touch;
在 main 元素上加上该属性，嗯，丝般顺滑的感受又回来了！
参考： http://efe.baidu.com/blog/mob...
overflow: scroll时不能平滑滚动的问题怎么处理？
答案一：-webkit-overflow-scrolling: touch;
答案二：
（1）高度尺寸不肯定的时候，使用：overflow-y：scroll;
（2）高度尺寸肯定的，要么没有滚动条，要么直接出现，不会出现跳动。
（3）css3计算calc和vw单位巧妙实现滚动条出现页面不跳动：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定宽主体的父级，若是没有，建立一个
而后，calc是css3的计算
100vw是浏览器的内部宽度，而100%是可用宽度，不含滚动条
calc（100vw-100%）是浏览器的滚动条的宽度
style标签写在body后与body前有什么区别？
写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具体渲染过程请参考
http://blog.csdn.net/wozaixia...写在body标签后因为浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会致使浏览器中止以前的渲染，等待加载且解析样式表完成以后从新渲染，在windows的IE下可能会出现FOUC现象（即样式失效致使的页面闪烁问题）
基础知识——浏览器的渲染过程：
Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，不管他们是否在HEAD里。
注意：发起 js 文件的下载 request 并不须要 DOM 处理到那个 script 节点，好比：简单的正则匹配就能作到这一点，虽然实际上并不必定是经过正则：）。这是不少人在理解渲染机制的时候存在的误区。Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM
Create/Update Render Tree：全部CSS文件下载完成，CSSOM构建结束后，和 DOM 一块儿生成 Render Tree。
Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操做称之为Layout，顾名思义就是计算出每一个节点在屏幕中的位置。
Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每一个节点的CSS属性是什么（their computed styles）、每一个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，经过显卡，把内容画到屏幕上。
补充：
Repaint（重绘）：屏幕的一部分要重画。
Reflow（回流）：元件的几何尺寸变化了。要从新验证并计算Render Tree
联想——<script>标签放到<body>尾部是有必要的吗？
若是放到<body>开始位置，假如js文件很大，解析到js文件所在的script标签的时候，js文件尚未下载完成，这时会阻塞并中止解析后面的HTML代码。当js文件下载完成并执行完以后才会继续后面的解析。因此是有必要的。
display:inline-block 何时会显示间隙？(携程)
（1）有空格时候会有间隙。 解决：移除空格
（2）margin正值的时候。 解决：margin使用负值
png、jpg、gif 这些图片格式解释一下，分别何时用。有没有了解过webp？
（1）png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式，
优势是：压缩比高，色彩好。 大多数地方均可以用。能够设置透明背景。
（2）jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化作的
不错。在www上，被用来储存和传输照片的格式。不能设置透明背景。但同等效果下图片大小最小。
（3）gif是一种位图文件格式，以8位色重现真色彩的图像。能够实现动画效果时候
webp格式
是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了
。兼容性很差，目前谷歌和opera支持。
全屏滚动的原理是什么？用到了CSS的那些属性？
（1）原理：方法一是总体的元素一直排列下去，假设有5个须要展现的全屏页面，那么高度是500%
，只是展现100%，剩下的能够经过transform进行y轴定位，也能够经过margin-top实现
（2）overflow：hidden；
transition：all 1000ms ease；
视差滚动效果，如何给每页作不一样的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么作？）
视差滚动（Parallax Scrolling）就是这样的效果之一。这种技术经过在网页向下滚动的时候，控 制背景的移动速度比前景的移动速度慢来建立出使人惊叹的3D效果。原理：（1）CSS3实现优势：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器（2）jquery实现经过控制不一样层滚动速度，计算每一层的时间，控制滚动效果。优势：能兼容到各个版本的，效果可控性好缺点：开发起来对制做者要求高（3）插件实现方式例如：parallax-scrolling，兼容性十分好
- 1. JS题目及答案整理
- 2. vue面试题及答案整理
- 3. Java面试题及答案整理
- 4. Redis面试题及答案整理
- 5. 前端面试题及整理答案
- 6. SpringBoot面试题及答案整理
- 7. 周考题目及答案
- 8. 面试题目及答案
- 9. 前端面试题及答案 - CSS篇
- 10. OCP2018最新题库，052新题库及答案整理-25题
- 更多相关文章...
- • Markdown 标题 - Markdown 教程
- • jQuery Mobile 主题 - jQuery Mobile 教程
- • ☆技术问答集锦（13）Java Instrument原理
- • PHP Ajax 跨域问题最佳解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS题目及答案整理
- 2. vue面试题及答案整理
- 3. Java面试题及答案整理
- 4. Redis面试题及答案整理
- 5. 前端面试题及整理答案
- 6. SpringBoot面试题及答案整理
- 7. 周考题目及答案
- 8. 面试题目及答案
- 9. 前端面试题及答案 - CSS篇
- 10. OCP2018最新题库，052新题库及答案整理-25题