【面试】前端面试题总结一（css）
1. CSS 盒子模型
大体包含:margin、padding、border、content。
官网的解释：
在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色，背景，边框方面 --- 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。
盒子模型和box-sizing
为了我们定义元素的大小，box-sizing出现了。其属性值有：content-box（盒子宽度只包含content）、border-box（盒子实际宽度包含content、padding、border）。默认为content-box。
2.绝对定位和相对定位
position定位问题：分为无特殊定位（static）绝对定位（absolute） 相对定位（relative）和固定定位（fixed）。
static：无特殊定位，按照html标准元素排列 relative：相对定位，占元素位置，偏移根据原有位置进行一个偏移 absolute：绝对定位，不占元素位置，偏移位置根据父元素（父元素要使用相对定位才可以）。 而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框 fixed：固定定位，不占元素位置，偏移位置根据body进行一个偏移。 而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
3.浮动
脱离本身的文档流，进行一个位置布局的调整。
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
清除浮动：（浮动后的元素，不会影响父元素的高度）
1.使用clear进行清除浮动，使其父元素的高度受浮动元素的影响（我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。）（此方法不推荐使用，因为新增了一个元素出来）
2.使用父元素给一个合适的高度处理（此方法一般也不使用，因为父元素高度需要写死。）
3.父元素使用overflow：hidden（经常使用，比较方便）
4.如何保持浮层水平垂直居中
1.使用定位：
<div class="parent">
<div class="children">
</div>
</div>
.parent {
position：relative；
}
.children{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: black; }
2.使用flex布局
<div class="parent">
<div class="children">
</div>
</div>
.parent {
justify-content:center;
align-items:center;
display: -webkit-flex;
}
3.使用margin
<div class="parent">
<div class="children">
</div>
</div>
.parent {
width: 500px;
height: 500px;
background: red;
position: relative;
}
.children {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width: 50%;
height: 50%;
background: #fff;
margin: auto;
}
4.position 和 display 的取值和各自的意思和用法
position见上方定位。
display：inline（行内元素），inline-block（介于行内元素和块状元素之间），block（块状元素）。none（不显示，不占位）---（visibility：hidden，不显示 但是占位）。flex（flex布局）
5.样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写
行内>（!important>）id>class（属性选择器/伪类选择器）>标签选择器（伪元素选择器） 同类选择符条件下层级越多的优先级越高。优先级就近原则，同权重情况下样式定义最近者为准。载入样式以最后载入的定位为准。
抽离样式模块，是指把一些公用的东西使用公用类名或者元素标签进行一次统一的样式处理。项目的各个模块皆可使用。
6.css3动画效果属性，canvas、svg的区别，CSS3中新增伪类举例
c3动画效果属性：transition（transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。）、animation（不同于transition只能定义首尾两个状态，animation可以定义任意多的关键帧，因而能实现更复杂的动画效果。）和transform（就是变形，主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。）是CSS3中三个制作动画的重要属性
c3新增伪类： p:first-of-type。 p:last-of-type p:only-of-type p:only-child p:nth-child(2) :enabled、:disabled 控制表单控件的禁用状态。:checked，单选框或复选框被选中。
canvas：用于画图的一个东东，h5的新标签，而svg是很久前xml技术的一个描述二维图像的语言。canvas可以看做是一个画布，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。
另外从技术发面来讲canvas里面绘制的图形不能被引擎抓取，如我们要让canvas里面的一个图片跟随鼠标事件：canvas.οnmοuseοver=function(){}。而svg里面的图形可以被引擎抓取，支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。
7.px和em和rem的区别，CSS中link 和@import的区别是?
px表示绝对尺寸，实际上就是css中定义的像素
em表示的是相对尺寸，他相对于当前对象内文本的font-size
rem表示相对尺寸，其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size。
link和@import的区别：
差别1：老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。
link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
差别2：加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
差别4：使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。
