当前位置: > IT面试 >

2018 前端经典面试题

时间:2018-12-04 11:53来源:linux.it.net.cn 作者:IT
三列布局(左右固定;中间自适应)
 
一、流体布局
 
<!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 隐藏元素的方法
 
 
 
 
 
 
 
 
 
 
 
 
 
 


(责任编辑:IT)
------分隔线----------------------------