前端面试题（垂直居中、双飞翼布局、清除浮动）

最新推荐文章于 2022-10-19 10:31:21 发布

RN_David

最新推荐文章于 2022-10-19 10:31:21 发布

阅读量210

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/RN_David/article/details/105256474

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端面试题之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;
	}

RN_David

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题（垂直居中、双飞翼布局、清除浮动）

前端面试题之html+css部分一个200x200的div在不同分辨率屏幕上下左右居中，用css实现；第一种：div { width: 200px;height: 200px; position: absolute; left: 50%;margin-left: -100px; top: 50%;margin-top: -100px;}第二种：div { width: 2...
复制链接

扫一扫

专栏目录