前端面试题之html+css部分
- 一个200x200的div在不同分辨率屏幕上下左右居中,用css实现;
第一种:
div {
width: 200px;height: 200px;
position: absolute;
left: 50%;margin-left: -100px;
top: 50%;margin-top: -100px;
}
第二种:
div {
width: 200px;height: 200px;
position: absolute;
left:0;right:0;bottom:0;top: 0;
margin: auto;
}
- 写一个左中右布局占满屏幕,其中左、右两块固定宽高200,中间宽高自适应,要求先加载中间块,请写出结构及样式:
<body>
<div class="main">
<div class="container">
<div class="center">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main>div {
float: left;
}
.container {
width: 100%;
}
.center {
background: red;
margin-left: 200PX;
margin-right: 200PX;
}
.left {
background: yellow;
width: 200px;
margin-left: -100%;
}
.right {
background: #14C1BB;
width: 200px;
margin-left: -200px;
}
</style>
- 清除浮动
-
添加一个盒子,加入clear:both;(缺点:多了一个盒子)
-
给父元素加入:overflow: hidden;
-
添加伪类after(最常用的方式):
.main::after {
content: '';
clear: both;
display: table;
}