标签：center 慢慢 eee hit 清除浮动 span uri ddd 16px
网上一搜很多面试题，但是有时候感觉繁琐，现在自己也试着将其整理下，后续慢慢新增，希望能给需要的你有所帮助，（初次发文，有些没注意到的，还请见谅~）
1、一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
a、方法一
<div style="width: 500px;height: 500px;margin: 0 auto;">
<div style="width:200px;height: 200px;position: absolute;top:0;bottom:0;right:0;left:0;border: 1px solid #ddd;margin:auto;">上下左右居中测试</div>
</div>
b、方法二
<div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;">
<div style="">上下左右居中</div>
</div>
2、写一个左中右布局占满屏幕，其中左右两块是固定宽度200，中间自适应宽，要求先加载中间块，请写出结构及样式
a、方法一（我自己写的）
<div style="display: flex;">
<div calss="left" style="width:200px;height:200px;">left</div>
<div calss="center" style="flex:1;">center</div>
<div calss="right" style="width:200px;height:200px;">right</div>
</div>
b、方法二
css:
<style>
#left,#right {width: 200px; height: 200px;background-color: #ffe6b8;position: absolute;top: 120px;}
#left { left: 0px;}
#center {margin: 2px 210px;background-color: #eee;height: 200px;}
</style>
html:
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
3、阐述清除浮动的方式（常见）
a、方法一
直接给父元素设置高度（不推荐）
b、方法二 （父元素设置overflow：hidden ；*zoom：1）
<div style="overflow:hidden;*zoom:1;">
<div style="float:left">test left</div>
<div style="float:right;">test right</div>
</div>
c、方法三 （父元素内部末尾添加空div 设置clear:both 属性）
<div>
<div style="float:left;">测试test文字阐述清楚浮动</div>
<div style="float:right">测试test文字阐述清楚浮动的几种方式</div>
<div style="clear:both;"></div>
</div>
d、方法四 （css伪类::after实现清除浮动）
css:
<style>
.clearfix{
zoom: 1;
}
.clearfix::after{
content:"020";
height:0;
display:block;
visibility: hidden;
clear: both;
}
</style>
html:
<div class="clearfix">
<div style="float:left;">left元素</div>
<div style="float:right;">right 元素</div>
</div>
面试相关~
标签：center 慢慢 eee hit 清除浮动 span uri ddd 16px
原文地址：https://www.cnblogs.com/yxiaoshuang/p/9896688.html
