CSS盒模型（CSS box model）是CSS中一個(gè)非常重要的概念，也是CSS中最基本、最核心的概念之一。

CSS盒模型定義了一個(gè)HTML元素在頁(yè)面中所占據(jù)的空間以及如何布局元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin），直接影響到網(wǎng)頁(yè)布局和排版。

.box{
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid #000;
margin: 30px;
}

以上代碼表示一個(gè)名為.box的元素，設(shè)置寬度和高度為200px，內(nèi)邊距為20px，邊框?yàn)?0px實(shí)線黑色邊框，外邊距為30px。

此時(shí)該元素所占據(jù)的空間為：元素寬度=200+20*2+10*2=260px，元素高度=200+20*2+10*2=260px，整個(gè)盒子的大小是260*260，外加上外邊距30px，所以該元素總共占據(jù)的空間為：260+30*2＝320px。

另外一個(gè)CSS中比較復(fù)雜的部分是定位。定位就是指通過(guò)CSS來(lái)改變HTML元素在頁(yè)面中所占據(jù)的位置。

.box{
position: relative;
left: 50px;
top: 50px;
}

以上代碼表示一個(gè)名為.box的元素，設(shè)置其為相對(duì)定位，偏移量分別為50px向右和50px向下。這樣就可以讓該元素相對(duì)于其定位的父級(jí)元素，通過(guò)設(shè)置left和top屬性，達(dá)到相對(duì)調(diào)整位置的效果。

如果想要實(shí)現(xiàn)絕對(duì)定位，只需要使用position: absolute;即可，此時(shí)left和top的值分別表示以該元素的祖先元素為參照物，向左偏移和向上偏移的像素?cái)?shù)。

總之，在網(wǎng)頁(yè)布局和排版中，CSS盒模型和定位都是非常重要的概念，學(xué)好這些知識(shí)可以幫助我們更好的掌控網(wǎng)頁(yè)布局和樣式效果。