在互联网飞速发展的今天，网页设计已经成为了一个热门的领域。而CSS（层叠样式表）作为网页设计中不可或缺的工具，对于网页的整体布局和美观度起着至关重要的作用。CSS盒子模型是CSS的核心概念之一，它为我们构建网页世界提供了基石。本文将从CSS盒子模型的基本概念、布局规则、实战应用等方面进行深入探讨。
一、CSS盒子模型概述
1. 盒子模型定义
CSS盒子模型是一个抽象的概念，用于描述HTML元素在页面中的布局。它将每个HTML元素视为一个矩形盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。
2. 盒子模型的组成
（1）内容(content)：盒子内实际显示的元素内容。
（2）内边距(padding)：盒子内容与边框之间的空白区域。
（3）边框(border)：盒子边界的线，用于定义盒子的形状。
（4）外边距(margin)：盒子与其他元素之间的空白区域。
二、CSS盒子模型布局规则
1. 盒子类型
CSS盒子模型分为两种类型：标准盒模型和怪异盒模型。
（1）标准盒模型：默认的盒模型，宽度等于内容宽度，高度等于内容高度。
（2）怪异盒模型：IE6及以下版本浏览器采用的盒模型，宽度等于内容宽度加上内边距和边框宽度。
2. 布局规则
（1）盒子的垂直布局：通过设置margin、padding和border的值，可以控制盒子在垂直方向上的布局。
（2）盒子的水平布局：通过设置margin、padding和border的值，可以控制盒子在水平方向上的布局。
（3）盒子的浮动布局：通过设置float属性，可以使盒子水平排列，实现复杂的布局效果。
（4）盒子的定位布局：通过设置position属性，可以控制盒子的位置，实现绝对定位、相对定位和固定定位等效果。
三、CSS盒子模型实战应用
1. 布局实例一：实现水平导航栏
通过设置盒子的float属性，可以轻松实现水平导航栏。
HTML结构：
```html