相對定位與絕對定位以及內外邊距三者的關系及區別？以及下面圓環代碼是否是一樣的？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
? ? height:100px;/*與width設置一致*/
? ? width:100px;
? ? background:#9da;
? ??
? ? border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/
? ? }
.lit-circle{
??
? ? height:60px;/*與width設置一致*/
? ? width:60px;
? ? background:#fff;
? ? border-radius:30px;/*四個圓角值都設置為寬度或高度值的一半*/position:absolute;
? ? margin:20px;
} ? ?
/*任務部分*/ ??
div.semi-circle{?
? ? height:100px;
? ? width:50px;
? ? background:#9da;
? ? border-radius:50px 0px ?0px 50px;
? ? } ??
? ?
</style>
</head>
<body>
<div class="circle">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
? ? height:100px;/*與width設置一致*/
? ? width:100px;
? ? background:#9da;
??
? ? border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/
? ? }
.lit-circle{
??
? ? height:60px;/*與width設置一致*/
? ? width:60px;
? ? background:#fff;
? ? border-radius:30px;/*四個圓角值都設置為寬度或高度值的一半*/
} ? ?
/*任務部分*/ ??
div.semi-circle{?
? ? height:100px;
? ? width:50px;
? ? background:#9da;
? ? border-radius:50px 0px ?0px 50px;
? ? } ??
? ?
</style>
</head>
<body>
<div class="circle">
? ?<div class="lit-circle"></div>
</div>
<br/>
<!--任務部分-->
<div class="semi-circle">
</div>
</body>
</html>
</div>
<br/>
<!--任務部分-->
<div class="semi-circle">
</div>
</body>
</html>
我想問下上下代碼有啥區別？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
? ? height:100px;/*與width設置一致*/
? ? width:100px;
? ? background:#9da;
? ? position:relative;
? ? border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/
? ? }
.lit-circle{
? ? position:absolute;
? ? top:20px;
? ? left:20px;
? ? height:60px;/*與width設置一致*/
? ? width:60px;
? ? background:#fff;
? ? border-radius:30px;/*四個圓角值都設置為寬度或高度值的一半*/
} ? ?
/*任務部分*/ ??
div.semi-circle{?
? ? height:100px;
? ? width:50px;
? ? background:#9da;
? ? border-radius:50px 0px ?0px 50px;
? ? } ??
? ?
</style>
</head>
<body>
<div class="circle">
? ?<div class="lit-circle"></div>
</div>
<br/>
<!--任務部分-->
<div class="semi-circle">
</div>
</body>
</html>
這個要用絕對定位，或者通過給外層的div設置padding
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
? ? height:80px;/*與width設置一致*/
? ? width:80px;
? ? background:#9da;
? ? padding: 10px;
? ? position:relative;
? ? border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/
? ? }
.lit-circle{
? ? position:absolute;
? ? top:20px;
? ? left:20px;
? ? height:60px;/*與width設置一致*/
? ? width:60px;
? ? background:#fff;
? ? border-radius:30px;/*四個圓角值都設置為寬度或高度值的一半
}
/*任務部分*/
div.semi-circle{
? ? height:100px;
? ? width:50px;
? ? background:#9da;
? ? border-radius:50px 0px ?0px 50px;
? ? }
</style>
</head>
<body>
<div class="circle">
? ?<div class="lit-circle"></div>
</div>
<br/>
<!--任務部分-->
<div class="semi-circle">
</div>
</body>
</html>
因為你直接給內層設置margin-top會發生外邊距合并，具體的你可以去了解一下關于css外邊距合并的問題（來源于http://www.xianlaiwan.cn/code/380）
2016-10-18
相對定位是相對于自身原有位置進行便宜，仍處于標準文檔流中。
局對定位脫離了文檔流，偏移的參照基準是：有已定位的父元素以父元素為基準，無父元素（即無position）的話以<html>為基準。
無定位的absolute元素可以使用margin定位