最近出去面了一次试。去以前信心满满,去以后灰头土脸,由于连最简单的“css居中方式有多少种”、“说说js数据类型”这种入门问题居然回答的支支吾吾,也怪不得面试官20分钟就优雅的把我送了出来。
css
痛定思痛,总结了一些基础面试题,望壮士你出门迎敌时,不要像我同样尴尬……html
一、使用伪类。
也能够在父级标签最后添加一个div,div中的属性同伪类。原理其实和伪类是同样的,都是利用clear:both前端
.father :after {
clear:both;
content:"";
display:block;
}
.father{
zoom:1;//IE专有属性,解决ie六、7浮动问题
}
复制代码
二、父级标签触发BFC(下面有专门介绍)web
.father {
overflow:auto;
zoom:1;//IE专有属性,解决ie六、7浮动问题
}
复制代码
优点:父元素能够动态改变高度。
劣势:table属性容易形成屡次reflow,IE8如下不支持面试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法一</title>
</head>
<style>
.parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
</style>
<body>
<div class="parent1">
<div class="child">hello world-1</div>
</div>
</body>
</html>
复制代码
优势:兼容性好
缺点:多出来个空元素、麻烦canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.wrap {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
background: #92b922;
}
.test {
background: #de3168;
display: inline-block;
color: #fff;
padding: 20px;
}
.wrap:after {
display: inline-block;
content: '';
width: 0px;
height: 100%;
vertical-align: middle;
}
/* .vamb{
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
} */
</style>
<div class="wrap">
<!-- <b class="vamb"></b> -->
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</div>
</html>
复制代码
优势:方便,支持webkit内核
缺点:transform兼容性差,IE9如下不支持api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
<div class="child">hello world</div>
</div>
</body>
</html>
复制代码
优势:方便
缺点:兼容性很差,IE支持不好bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
background: #FD0C70;
}
.parent4 .child{
color:#fff;
}
</style>
<body>
<div class="parent4">
<div class="child">hello world</div>
</div>
</body>
</html>
复制代码
BFC(block formatting context)翻译为“块级格式化上下文”,它会生成一个独立的渲染区域(不影响外面的元素,同时也不受外面元素的影响),它的生成有如下规则:session
触发BFC的条件:多线程
前端精选文摘:BFC 神奇背后的原理这篇文章说的很清楚,也有相应的原理和例子,能够仔细看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.father {
background-color: lightblue;
}
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
overflow: auto;
height: 500px;
background-color: lightseagreen
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='right'>
right
</div>
</div>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.father {
background-color: lightblue;
}
.left {
width: 100px;
float: left;
background-color: red;
}
.right {
margin-left: 100px;
background-color: lightseagreen
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='right'>
right
</div>
</div>
</body>
</html>
复制代码
优势:方便
缺点:仍是flex兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.father {
display: flex;
height: 100%;
}
.left,
.right {
flex: 0 1 100px;
background-color: red;
}
.middle {
flex: 1;
height: 100%;
background-color: green;
}
</style>
<body>
<div class="father">
<div class='left'>left</div>
<div class='middle'>middle</div>
<div class='right'>center</div>
</div>
</body>
</html>
复制代码
优势:市面上使用最多的一个
缺点:麻烦,这是多年前淘宝的老技术了
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局/双飞翼布局</title>
<style>
.mainWrap {
width: 100%;
float: left;
}
.main {
margin: 0 120px;
}
.left,
.right {
float: left;
width: 100px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -100px;
}
</style>
</head>
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="mainWrap">
<div class="main" style="background-color: lightcoral;">
main
</div>
</div>
<div class="left" style="background-color: orange;">
left
</div>
<div class="right" style="background-color: lightsalmon;">
right
</div>
</div>
</html>
复制代码
过渡属性transition能够在必定的事件内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,可是功能有限,只能用于制做简单的动画效果;
动画属性animation能够制做相似Flash动画,经过关键帧控制动画的每一步,控制更为精确,从而能够制做更为复杂的动画。