項目代碼同步上傳到https://github.com/panhoucheng/Front-End-Study
css盒子模型：
-
CSS 框模型規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
<head> <meta charset="UTF-8"> <title>box</title> <style> .centerBox{ width:200px; height:200px; background-color: aquamarine; padding: 20px; border:solid 3px blue; margin: 10px; } </style> </head> <body> <div class="centerBox"> </div> </body>
上面的代碼在Chrome中表現(xiàn)為：
box
最中間的藍色區(qū)域class為centerBox，長寬均為200px，padding：20px的效果區(qū)域為綠色區(qū)域，紫色框線為boder區(qū)域，最外面的橙色區(qū)域為margin。
box style
CSS定位:
- 定位(position)有四個值：
1.static(默認，一般我們認為如果不指定position那么就是static定位)
2.relative
3.absolute
4.fixed
- static布局就不介紹了，默認布局，占據(jù)流空間。
- relative為相對定位，可以使用top,left,right,buttom屬性來改變他們的位置，相對于他的標(biāo)準位置的基礎(chǔ)上改變，原來的位置依然占據(jù)空間。
- absolute為絕對定位，絕對坐標(biāo)為父級元素中position不為static的元素來進行定位，如果所有的父級元素都是static的話，絕對坐標(biāo)就是body頂點，定位之后不占據(jù)原有空間。
- fixed也是絕對定位。但是fixed是相對于瀏覽器的窗口定位，不管瀏覽器怎么滑動，使用fixed定位的元素位置都不會改變，最常見的情況就是網(wǎng)站的廣告。
Z-index：
- z-index在poistion為static的時候不生效
- z-index父級元素如果已經(jīng)設(shè)置定位了，那么子級元素不能比他小。
- 如果需要把一個元素放在最上面，請設(shè)置他的z-index為最大。
