2018 前端经典面试题 - 好文

三列布局（左右固定；中间自适应）

一、流体布局
<!DOCTYPE html> <html lang="en"> <head> <style> .left { float: left; height:
200px; width: 100px; background-color: red; } .right { width: 200px; height:
200px; background-color: blue; float: right; } .main { margin-left: 120px;
margin-right: 220px; height: 200px; background-color: green; } </style> </head>
<body> <div class="container"> <div class="left"></div> <div class="right"></div
> <div class="main"></div> </div> </body> </html>
二、绝对定位

<!DOCTYPE html> <html lang="en"> <head> <style> .container { position: relative
; } .main { height: 400px; margin: 0 120px; background-color: green; } .left {
position: absolute; width: 100px; height: 300px; left: 0; top: 0;
background-color: red; } .right { position: absolute; width: 100px; height:
300px; background-color: blue; right: 0; top: 0; } </style> </head> <body> <div
class="container"> <div class="main"></div> <div class="left"></div> <div class=
"right"></div> </div> </body> </html>三、table布局

<!DOCTYPE html> <html lang="en"> <head> <style> .container { display: table;
width: 100%; } .left, .main, .right { display: table-cell; } .left { width:
200px; height: 300px; background-color: red; } .main { background-color: blue; }
.right { width: 100px; height: 300px; background-color: green; } </style> </head
> <body> <div class="container"> <div class="left"></div> <div class="main"></
div> <div class="right"></div> </div> </body> </html>四、flex布局

<!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; }
.main { flex-grow: 1; height: 300px; background-color: red; } .left { order: -1;
flex: 0 1 200px; margin-right: 20px; height: 300px; background-color: blue; }
.right { flex: 0 1 100px; margin-left: 20px; height: 300px; background-color:
green; } </style> </head> <body> <div class="container"> <div class="main"></div
> <div class="left"></div> <div class="right"></div> </div> </body> </html>
五、圣杯布局

<!DOCTYPE html> <html lang="en"> <head> <style> .container { margin-left: 120px
; margin-right: 220px; } .main { float: left; width: 100%; height: 300px;
background-color: red; } .left { float: left; width: 100px; height: 300px;
margin-left: -100%; position: relative; left: -120px; background-color: blue; }
.right { float: left; width: 200px; height: 300px; margin-left: -200px; position
: relative; right: -220px; background-color: green; } </style> </head> <body> <
div class="container"> <div class="main"></div> <div class="left"></div> <div
class="right"></div> </div> </body> </html>六、bfc 布局

<!DOCTYPE html> <html lang="en"> <head> <style> .left { float: left; height:
200px; width: 100px; margin-right: 20px; background-color: red; } .right { width
: 200px; height: 200px; float: right; margin-left: 20px; background-color: blue;
} .main { height: 200px; overflow: hidden; background-color: green; } </style>
</head> <body> <div class="container"> <div class="left"></div> <div class=
"right"></div> <div class="main"></div> </div> </body> </html>
清除浮动 {父级塌陷}

一、clear清除浮动（添加空div法）

在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}

二、给浮动元素父级设置高度

三、给父级添加overflow:hidden 清浮动方法；

四、 after伪类
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;
visibility:hidden;}.clear{zoom:1;}

绝对居住

display：table

负位移<div id="parent2"> <div id="son2"></div> </div>#parent2{ width: 500px;
height: 300px;position: relative; }#son2{ width: 250px; height: 150px;
position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); }
display:flex

position css3新增属性

css 隐藏元素的方法

热门工具换一换