题目点评
这道题目有可能是笔试题,有可能面谈的时候进行叙述,如果是笔试题要求对css样式代码非常熟练,如果是面谈叙述,就需要你的表达能力非常强,要抓住要点,把需要用到的技能点讲清楚就可以了。
需要用到技术
1. 元素水平居中对齐
1) 使用margin对齐(推荐)
2) 使用left:50%
3) 使用text-align
2. 元素对相对窗口定位
1) 使用filxed(推荐)
2) 使用absolute定位
3) 使用html和body的width和height填?这个窗口
3. 元素左右定位
1) 使用float左右浮动
2) 使用绝对定位进行左右定位(推荐)
具体实现的代码
html代码
<div class="main">
<div class="wrapper-up">
<div class="div-square-up"></div>
</div>
<div class="wrapper-down">
<div class="div-square-left"></div>
<div class="div-square-right"></div>
</div>
</div>
CSS样式
body{
height: 1200px;
}
.main {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.wrapper-up {
height: 50%;
}
.wrapper-down {
height: 50%;
position: relative;
}
.div-square-up {
width: 50%;
margin: 0 auto;
border: 2px solid red;
height: 96%;
box-sizing: border-box;
}
.div-square-left {
position: absolute;
left: 0;
width: 48%;
height: 100%;
box-sizing: border-box;
border: 2px solid red;
}
.div-square-right {
position: absolute;
right: 0;
width: 48%;
height: 100%;
border: 2px solid red;
box-sizing: border-box;
}