任务目标：
- 实践HTML/CSS布局方式
任务描述：
- 实现效果如图：
Paste_Image.png
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角
任务要求：
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
- 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况，尤其是极端情况下的效果。
- 调节浏览器宽度，灰色元素始终水平居中。
- 调节浏览器高度，灰色元素始终垂直居中。
- 调节浏览器高度和宽度，黄色扇形的定位始终准确。
- 其他效果图中给出的标识均被正确地实现，错一项扣一分。
HTML
<!DOCTYPE html>
<html>
<head>
<title>任务四-定位和居中问题</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="任务四-定位和居中问题.css"/>
</head>
<body>
<div class="main">
<div class="top-left"></div>
<div class="buttom-right"></div>
</div>
</body>
</html>
CSS
body {
padding:0;
margin:0;
}
.main {
position: absolute;
width: 400px;
height: 200px;
background-color: #ccc;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -200px;
}
.top-left {
height:50px;
width:50px;
border-radius:0 0 50px 0;
position:absolute;
background-color:#fc0;
}
.bottom-right{
height:50px;
width:50px;
border-radius:50px 0 0 0;
position:absolute;
right:0;
bottom:0;
background-color:#fc0;
}
要点整理：
I.关于定位（position）
前面提到“正常流动”导致浏览器按照元素在HTML源代码中出现的顺序渲染他们。使用CSS进行网页布局时，可以对元素的位置进行跟多的控制，这是用position属性实现的。
position属性
| 值 | 用途 |
|---|---|
| static | 默认值；元素按照正常流动方式渲染 |
| fixed | 元素位置固定，网页滚动时位置不变 |
| relative | 元素位置相对于正常流动时的位置 |
| absolute | 元素脱离正常流动，准确配置元素位置 |
相对定位
相对定位用于小幅修改某个元素的位置。换言之，相对于“正常流动”应该出项的位置稍微移动一下位置。但是，“正常流动”的区域仍会为元素保留，其他元素围绕这个保留区域流动，使用position:reative;属性，再联通left,rigth,top和bottom等便宜属性，即可实现相对定位功能。
绝对定位
使用绝对定位指定元素相对于其容器元素（要求是非静态元素）的位置。此时元素将脱离正常流动。如果没有非静态父元素，则相对于网页主体指定绝对位置。
网友评论