CSS（Cascading Style Sheet，層疊樣式表）是一種用于控制網頁外觀的語言，通過CSS我們可以控制網頁的字體、顏色、布局、動畫等各種方面。CSS的基本原理是通過“樣式規則”來實現網頁的樣式設計。

CSS有三個核心概念：盒模型、浮動和定位。其中，盒模型是最基本的模型。

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

盒模型是CSS布局中最基本的模型，它定義了一個元素的尺寸和位置，包括四個部分：內容區域（content）、內邊距（padding）、邊框（border）和外邊距（margin）。在盒模型中，元素的寬度和高度是指內容區域的寬度和高度，而不是包括內邊距、邊框和外邊距的總寬度和高度。

在CSS中，我們可以使用box-sizing屬性來控制元素的盒模型類型，box-sizing有兩個值：content-box和border-box，默認值是content-box。

.content-box{
width: 200px;
height: 200px;
border: 1px solid #000;
padding: 20px;
margin: 20px;
box-sizing: content-box;
}
.border-box{
width: 200px;
height: 200px;
border: 1px solid #000;
padding: 20px;
margin: 20px;
box-sizing: border-box;
}

當box-sizing的值為content-box時，元素的寬度和高度只包括內容區域的寬度和高度，而不包括內邊距、邊框和外邊距。當box-sizing的值為border-box時，元素的寬度和高度包括內邊距、邊框和內容區域的寬度和高度。

總之，盒模型是CSS布局中最基本的模型，我們可以通過控制元素的內邊距、邊框和外邊距來實現元素的布局設計。