盒模型 盒模型 CSS盒模型（Box Model）是CSS中用于描述元素在页面中如何布局的一个基本概念。每个HTML元素都可以被视为一个矩形的盒子，这个盒子由四个部分组成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。以下是盒模型的详细解释：
一、盒模型的四个部分
内容区域（Content）
内容区域是盒子的核心部分，用于显示元素的实际内容，如文本、图片等。内容区域的大小可以通过width和height属性来设置。
示例： 1 2 3 4 .box { width : 300px ; height : 200px ; }
内边距（Padding）
内边距是内容区域和边框之间的空间。内边距可以增加元素内容和边框之间的间距，使内容看起来更舒适。内边距可以通过padding属性来设置，可以分别设置上、右、下、左四个方向的内边距。
示例： 1 2 3 4 5 .box { padding : 20px ; padding : 10px 20px ; padding : 10px 20px 30px 40px ; }
边框（Border）
边框是围绕内容区域和内边距的一层，用于定义元素的边界。边框可以通过border属性来设置，可以分别设置边框的宽度、样式和颜色。
示例： 1 2 3 4 5 6 .box { border : 1px solid black; border-width : 2px ; border-style : dashed; border-color : red; }
外边距（Margin）
外边距是元素与相邻元素之间的空间。外边距可以通过margin属性来设置，可以分别设置上、右、下、左四个方向的外边距。外边距可以为负值，用于创建重叠效果。
示例： 1 2 3 4 5 .box { margin : 20px ; margin : 10px 20px ; margin : 10px 20px 30px 40px ; }
二、盒模型的计算方式
标准盒模型（W3C盒模型）
在标准盒模型中，元素的总宽度和高度计算方式如下：
总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom
示例： 1 2 3 4 5 6 7 .box { width : 300px ; height : 200px ; padding : 20px ; border : 10px solid black; margin : 30px ; }
总宽度 = 300px + 20px + 20px + 10px + 10px + 30px + 30px = 420px
总高度 = 200px + 20px + 20px + 10px + 10px + 30px + 30px = 330px
IE盒模型（怪异盒模型）
在IE盒模型中，width和height属性包括了内容区域、内边距和边框的宽度，但不包括外边距。这种模型在早期的IE浏览器中使用，现在可以通过设置box-sizing属性来启用。
示例： 1 2 3 4 5 6 7 8 .box { width : 300px ; height : 200px ; padding : 20px ; border : 10px solid black; margin : 30px ; box-sizing : border-box; }
总宽度 = 300px + 30px + 30px = 360px
总高度 = 200px + 30px + 30px = 260px
三、box-sizing属性
box-sizing属性用于指定盒模型的计算方式，取值有三种：
content-box：默认值，使用标准盒模型。border-box：使用IE盒模型，width和height包括内容区域、内边距和边框的宽度。padding-box：width和height包括内容区域和内边距的宽度，但不包括边框的宽度。
四、实际应用
标准盒模型
适用于需要精确控制内容区域大小的场景。
示例： 1 2 3 4 5 6 7 .box { width : 300px ; height : 200px ; padding : 20px ; border : 10px solid black; margin : 30px ; }
IE盒模型
适用于需要固定元素总宽度和高度的场景，特别是当内边距和边框宽度变化时，元素的总宽度和高度保持不变。
示例： 1 2 3 4 5 6 7 8 .box { width : 300px ; height : 200px ; padding : 20px ; border : 10px solid black; margin : 30px ; box-sizing : border-box; }
通过理解和使用CSS盒模型，可以更灵活地控制元素的布局和尺寸，从而实现各种复杂的页面设计。
流布局 流布局（Flow Layout），也称为“文档流”或“正常文档流”，是CSS中最基础的布局方式。它基于HTML文档的结构顺序，按照从上到下、从左到右的自然顺序排列元素。流布局是网页布局的默认行为，不需要额外的CSS设置。
1. 流布局的基本特性 1.1 块级元素（Block-level Elements） 块级元素是流布局中的主要元素类型，具有以下特点：
独占一行 ：每个块级元素默认会占据一整行，不会与其他块级元素共享行空间。宽度和高度 ：可以设置宽度（width）和高度（height）。默认情况下，块级元素的宽度会自动扩展到父元素的宽度。内边距和外边距 ：可以设置内边距（padding）和外边距（margin），这些属性会影响元素的总尺寸。常见块级元素 ：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<form>等。
1.2 行内元素（Inline Elements） 行内元素是流布局中的另一种元素类型，具有以下特点：
在同一行显示 ：多个行内元素可以在同一行内显示，直到行空间不足时才会换行。宽度和高度 ：行内元素的宽度和高度由其内容决定，不能通过CSS直接设置。内边距和外边距 ：可以设置内边距（padding），但外边距（margin）只对水平方向生效。常见行内元素 ：<span>、<a>、<img>、<strong>、<em>等。
1.3 行内块元素（Inline-block Elements） 行内块元素是行内元素和块级元素的结合体，具有以下特点：
在同一行显示 ：多个行内块元素可以在同一行内显示，直到行空间不足时才会换行。宽度和高度 ：可以设置宽度（width）和高度（height），类似于块级元素。内边距和外边距 ：可以设置内边距（padding）和外边距（margin），这些属性会影响元素的总尺寸。应用场景 ：常用于需要在同一行显示多个元素，同时又需要精确控制尺寸的场景。
2. 流布局的布局规则 2.1 块级元素的排列
块级元素会按照HTML文档的顺序垂直排列。
每个块级元素默认占据一整行，即使其宽度小于父元素的宽度。
块级元素的宽度默认为父元素的宽度，可以通过设置 width 属性来改变。
块级元素的外边距（margin）会影响其与其他元素的间距。
2.2 行内元素的排列
行内元素会按照HTML文档的顺序水平排列。
行内元素的宽度和高度由其内容决定，不能通过CSS直接设置。
行内元素的外边距（margin）只对水平方向生效，垂直方向的外边距会被忽略。
行内元素的内边距（padding）会影响其内容与边框之间的间距。
2.3 行内块元素的排列
行内块元素会按照HTML文档的顺序水平排列。
行内块元素的宽度和高度可以由CSS设置。
行内块元素的外边距（margin）和内边距（padding）都会生效，但外边距的垂直方向可能会出现合并（margin collapsing）。
3. 流布局的控制方法 3.1 使用 display 属性 通过设置 display 属性，可以改变元素的显示类型：
display: block;：将元素设置为块级元素。display: inline;：将元素设置为行内元素。display: inline-block;：将元素设置为行内块元素。display: none;：隐藏元素，元素不会占据空间。
3.2 使用 float 属性 float 属性可以使元素脱离文档流，浮动到左侧或右侧，从而实现多列布局：
float: left;：元素浮动到左侧。float: right;：元素浮动到右侧。float: none;：元素不浮动（默认值）。注意 ：浮动元素会脱离文档流，可能导致父元素高度塌陷。需要通过清除浮动（clear: both;）来解决。
3.3 使用 clear 属性 clear 属性用于清除浮动元素的影响：
clear: left;：清除左侧浮动元素的影响。clear: right;：清除右侧浮动元素的影响。clear: both;：清除左右两侧浮动元素的影响。clear: none;：不清除任何浮动元素的影响（默认值）。
4. 流布局的优缺点 优点
简单易用 ：流布局是CSS的默认布局方式，不需要额外的设置。语义化 ：符合HTML文档的结构顺序，易于理解和维护。兼容性好 ：流布局在所有浏览器中都能正常工作，无需额外的兼容性处理。
缺点
灵活性差 ：流布局的排列顺序固定，难以实现复杂的布局需求。依赖HTML结构 ：布局效果高度依赖HTML文档的结构顺序，调整布局可能需要修改HTML代码。浮动问题 ：使用 float 时，可能会导致父元素高度塌陷，需要额外的清除浮动处理。
5. 流布局的典型应用场景 5.1 文章页面 流布局非常适合用于文章页面，其中内容以段落（<p>）、标题（<h1>-<h6>）和列表（<ul>、<ol>）的形式呈现。这些元素默认为块级元素，自然地按照文档顺序垂直排列。
5.2 导航栏 导航栏通常由多个链接（<a>）组成，可以通过设置 display: inline-block; 将链接排列在同一行，实现水平导航栏。
5.3 侧边栏布局 通过使用 float 属性，可以将侧边栏（<aside>）浮动到页面的左侧或右侧，同时将主要内容（<main>）浮动到另一侧，从而实现两列布局。
6. 流布局的代码示例 示例 1：文章页面 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > 流布局示例</title > <style > body { font-family : Arial, sans-serif; } h1 { color : #333 ; } p { line-height : 1.5 ; margin-bottom : 10px ; } ul { list-style : none; padding : 0 ; } li { margin-bottom : 5px ; } </style > </head > <body > <article > <h1 > 文章标题</h1 > <p > 这是文章的第一段内容。</p > <p > 这是文章的第二段内容。</p > <ul > <li > 列表项 1</li > <li > 列表项 2</li > <li > 列表项 3</li > </ul > </article > </body > </html >
示例 2：导航栏 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > 导航栏示例</title > <style > nav { background-color : #333 ; padding : 10px ; } nav a { display : inline-block; color : white; text-decoration : none; margin-right : 10px ; padding : 5px 10px ; border-radius : 5px ; } nav a :hover { background-color : #555 ; } </style > </head > <body > <nav > <a href ="#" > 首页</a > <a href ="#" > 关于我们</a > <a href ="#" > 服务</a > <a href ="#" > 联系我们</a > </nav > </body > </html >
示例 3：两列布局 1 2 3 4 5 6 7 8 9 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > 两列布局示例</title > <style > body { font-family : Arial, sans-serif; }