html,css笔试题分享

水平垂直居中（宽高都已知，实现居中效果）

问题：1.让一个200*200px的正方形在不同分辨率的屏幕中上下居中？

div{
/*方法一*/
	width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

div{
/*方法二*/
	width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin-left: -100px;
    margin-top: -100px;
}

（双飞翼布局）

2.写一个左右布局占满屏幕，其中左，右两块固定宽200px,中间自适应宽，要求先加载中间块，写出结构和样式

.left,.right{
            width: 200px;
            background-color: #51abff;

        }
        .content{
            width: 100%;
            margin-left: 200px;
            margin-right: 200px;
        }
        .left{
            margin-left: -100%;
        }
        .rigth{
            margin-right: -100%;
        }
/**/
<div class="content">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>

3. 清除浮动的几种方法：

1. 添加一个盒子，加入clear：both；（缺点：多了一个盒子）
2. 给父元素加入overflow：hidden;
3. 给父元素加上伪元素，div : after { content: "’’; clear：both；display:table；}