css页面布局

传统的布局方式有：

编码方面：

语义化标签布局

div+css布局
单栏布局、两栏布局，三栏布局，可以作为下面的main部分
div+id布局
top+main+footer
html5语义化标签布局
header+footer定义section或page的页眉、页脚
section定义文章article章节区段
article定义完整的独立的内容
nav定义导航栏
aside定义页面内容之外的内容
iframe框架布局
将多个html页面组合到一个页面中如<br><p>Your browser does not support iframes.</p><br>
表格table布局

视觉交互方面

瀑布流
无缝拼接图布局
全屏布局
视差类型布局
感应式布局

手机端

竖排列表
横排方块
九宫格
手风琴
抽屉
TAB切换式

为什么会产生Div高度塌陷，是由于什么引起的？

由于内部元素脱离文档流引起的

float:left/right;
position:fixed;
position:absolute;

绝对定位（position:absolute）的参照物是？

1.包含块
距离最近的，且设置了position:relative/fixed/absolute;只要不为static
2.默认包含块
在第一种情况不存在时，initial containing block即根元素html

常见的垂直水平居中，有哪些处理方法

垂直居中

js计算可视区域高度，H=document.documentElement.clientHeight/document.body.clientHeight;
css设置top:(H-divHeight)/2

css设置垂直水平居中：

top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

单行文本垂直居中：line-height设置一个值
图片垂直居中：vertical-align:middle;
table法垂直居中：display:table-cell;vertical-align:middle;
css法： position: absolute;
```
top: 0;
bottom: 0;
height: 50%;
margin: auto;
```
水平居中
要居中元素的父元素css设置：text-align:center;

HTML5 CSS3

HTML5有哪些新属性

article,aside,audio,
bdi:

This arabic word ARABIC_PLACEHOLDER is automatically displayed right-to-left.

canvas,datalist,details,dialog,
footer,header,main,nav
mark,menu,menuitem,meter,output
progress,picture,video,section,source,summary,template
time,track,ruby
rp,rt,rtc,wbr

CSS3常见的动画属性有哪些？

transition
transition-property:none/all
transition-duration:变换延续的时间
transition-timing-function:延续时间段内，变换的速率
transition-delay:变换延迟时间
transform
transform:rotate(50deg)正向旋转
scale(2,3)横向缩放2倍，纵向缩放3倍
skew(30deg,50deg)相对X轴倾斜30度，Y轴倾斜50度
translate(30px,50px)沿X轴平移30PX，Y轴平移50PX
animation
定义
@-webkit-keyframes move_eye {from{margin-left:-20%;}to{margin-left:100%; }}
@-moz-keyframes move_eye { from { margin-left:-20%; } to {margin-left:100%;} }
@-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
@keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
应用到某个元素的CSS中{
-webkit-animation: 4s linear 0s infinite alternate move_eye;
-moz-animation: 4s linear 0s infinite alternate move_eye;
-o-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}

相对于js，css3动画属性有什么优缺点？

性能方面
能用css3的animation的不用js的requestAnimationFrame(不断调用JS，消耗内存，触发GC垃圾回收，GC时间超出frame budget，动画会卡顿),
CSS3支持不完全，有些功能不太理想
比如瀑布流用css实现column-width:202px;每列距离在浏览器窗口变化时会不同

什么是跨设备响应式？如何处理？

媒体查询
@media (max-width: 1024px)
.zu-top {
position: static;
}
开发快仅用于信息展示，否则PC和手机分开开发，冗余代码多

兼容性

常见IE浏览器都有哪些兼容性问题，或IE下css的bug?

写出IE，FF,CHROM的私有前缀

IE:-ms-
FF:-moz-
CHROME:-webkit-
OPERA:-o-

frond-end