任务四：定位和居中问题

一、任务目标：

  • 实践HTML/CSS布局方式
  • 深入了解position等CSS属性

二、任务描述

  • 实现如图效果（见文章最后）
  • 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角

三、任务注意事项

  • 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案
  • 动手试一试各种情况的组合，父元素和子元素分别取不同的position值。思考position属性各种取值的真正含义，尤其是absolute究竟是相对谁而言的
  • 注意测试不同情况，尤其是极端情况下的效果
  • 调节浏览器宽度，灰色元素始终水平居中
  • 调节浏览器高度，灰色计始终垂直居中
  • 调节浏览器高度和宽度，黄色扇形的定位始终准确
  • 其他效果图中给出的标识均被正确地实现

代码实现： 

<!DOCTYPE html>
<html>
<head>
    <title>定位和居中问题</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            padding:0;
            margin:0;
        }
        .container {
            background:#ccc;
            width:400px;
            height:200px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-200px
            margin-top:-100px;
        }
        .round1,.round2 {
            width:50px;
            height:50px;
            background:#fc0;
        }
        .round1 {
            position:absolute;
            left:0;
            top:0;
            border-radius:0 0 50px 0;
        }
        .round2 {
            position:absolute;
            right:0;
            bottom:0;
            border-radius:50px 0 0 0;
        }
    </style>
<body>
    <div class="container">
        <div class="round1"></div>
        <div class="round2"></div>
    </div>
</body>
</html>

 

注意：四分之一圆的实现方式，其中一个角的radious值等于正方形块的边长，其余值为0。

        这种实现垂直的方式，需要知道灰色块的高度和宽度，所以不能实现灰色块高度随内容动态变化的要求。可以做如下更改：

        把margin-left、margin-right两条语句改成如下，这样可以不设置container的height和width值，让其高度宽度随里面面容动态变化，灰色块也仍然是居中的。

transform:translate(-50%,-50%)

 

        

四、提交作业

代码地址：https://github.com/zhoujie1986/IFE/tree/master/task4

 

posted @ 2017-05-10 22:44  海盗洁哥  阅读(216)  评论(0)  编辑  收藏  举报