<!DOCTYPE html>
<html>
<head>
<style type="text/css"> .hello { width: 200px; height: 200px; background-color: red; padding: 10px; border: 10px solid black; margin-bottom: 10px; /*box-sizing: border-box;*/ } .world { width: 100px; height: 100px; background-color: blue; } </style>
</head>
<body>
<div class="hello">
</div>
<div class="world"></div>
</body>
</html>
複製代碼
運行代碼,打開chrome,就很明瞭css
看圖說話總結計算公式:html
標準盒子模型的大小 = content+padding+borderchrome
取消box-sizing: border-box;註釋再運行。就也很明瞭bash
看圖說話總結計算公式:ui
怪異盒子模型的大小: width和height設置爲多大就多大。spa
兩種盒子模型:標準盒模型、怪異盒模型。3d
ok 就很明瞭!!!還不理解找我code
四個取值:cdn
廢話少說上代碼:htm
<!DOCTYPE html>
<html>
<head>
<style type="text/css"> * { padding: 0; margin: 0; } .hello { width: 200px; height: 200px; left: 100px; top: 100px; background-color: red; } .world { width: 100px; height: 100px; background-color: blue; } </style>
</head>
<body>
<div class="hello">
</div>
<div class="world"></div>
</body>
</html>
複製代碼
一個一個來:
.hello {
position:relative;
width:200px;
height:200px;
left:100px;
top:100px;
background-color:red;
}
複製代碼
設置position:relative;效果:
解釋一波: 紅框top、left移動了100px。藍框不動,這兒不動說明一個問題,紅框的位置還在它沒有脫離文檔流,脫離了藍框就該往上跑了,知識點理解一下。還有就是紅框的移動是相對於它移動以前的位置就行移動的。
.hello {
position:absolute;
width:200px;
height:200px;
left:100px;
top:100px;
background-color:red;
}
複製代碼
看圖說話:
很直觀是藍框往上跑了,說明紅框那個位置已經不在了。
再舉個栗子,修改代碼
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.hello {
position: relative;
width: 200px;
height: 200px;
left: 100px;
top: 100px;
background-color: red;
}
.world {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
top: 100px
}
</style>
</head>
<body>
<div class="hello">
<div class="world"></div>
</div>
</body>
</html>
複製代碼
看圖說話
總結一波:
一個元素position設置absolute時,這個元素的位置就是以他父代元素position不爲static的元素做爲參考,若是他的祖先元素position都是static那就以html元素做爲參考。剛剛紅色方塊的狀況就是他父代元素沒有position不爲static的元素,就以html元素爲參考
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
height: 10000px;
}
.hello {
position: relative;
width: 200px;
height: 200px;
left: 100px;
top: 100px;
background-color: red;
}
.world {
position: fixed;
width: 100px;
height: 100px;
background-color: blue;
top: 0
}
</style>
</head>
<body>
<div class="hello">
<div class="world"></div>
</div>
</body>
</html>
複製代碼
看圖說話:
運行代碼能夠隨便滾動一下,若是說absolute還受到relative的限制,那麼fixed就是沒法無天,脫離文檔流,就不動。