CSS框模型是一種用于定義HTML元素如何在頁面中占據空間的方法。這種技術是網頁設計中非常重要的一部分，因為它決定了元素的布局和外觀。 目前，CSS定義了三種框模型：標準框模型、IE框模型和混合框模型。 1. 標準框模型 標準框模型是CSS中最常用的框模型。它是由內容區域、內邊距、邊框和外邊距組成的，其中內容區域是指元素的實際內容。標準框模型的CSS代碼如下： pre{ box-sizing: content-box; } 在標準框模型中，元素的寬度和高度只包括內容的寬度和高度，并且不包括邊框、內邊距和外邊距。 2. IE框模型 IE框模型是早期版本的Internet Explorer瀏覽器所采用的框模型，它通常被認為是不標準的。IE框模型由內容區域、內邊距和邊框組成，其中邊框的寬度包含在元素的寬度和高度中。IE框模型的CSS代碼如下： pre{ box-sizing: border-box; } 在IE框模型中，元素的寬度和高度包括了內容區域、內邊距以及邊框的寬度，但不包括外邊距。 3. 混合框模型 混合框模型是CSS3中新定義的一種框模型，它是標準框模型和IE框模型的結合。它由內容區域、內邊距、邊框和外邊距組成，但是在計算寬度和高度時，它與標準框模型一樣使用內容寬度和高度，而邊框和內邊距的寬度是包含在元素的寬度和高度中的。混合框模型的CSS代碼如下： pre{ box-sizing: padding-box; } 在混合框模型中，元素的寬度和高度包括了內容區域和內邊距的寬度和高度，但不包括邊框和外邊距。 在實際應用中，可以根據需要選擇不同的框模型。例如，在使用較低版本的IE瀏覽器時，由于其采用IE框模型，可能會出現元素寬度和高度計算不準確的情況，而在現代瀏覽器中，由于大部分瀏覽器都采用標準框模型，因此可以默認使用該模型。 總之，了解不同的框模型是CSS設計的基本知識，可以幫助我們更好地控制元素的外觀和布局。