CSS样式基础
CSS布局
重要程度：8 分
<div>
<h2>CSS布局基础</h2>
<ul>
<li><strong>盒模型</strong>：每个HTML元素都可以看作一个盒子，由内边距、边框、外边距和内容区组成。
<ul>
<li>内边距 (padding)：盒子内部内容到边框的距离。</li>
<li>边框 (border)：围绕盒子内容和内边距的线。</li>
<li>外边距 (margin)：盒子外部与其他元素之间的距离。</li>
</ul>
</li>
<li><strong>定位方式</strong>：
<ul>
<li><strong>静态定位 (static)</strong>：默认值，元素按照正常文档流进行排列。</li>
<li><strong>相对定位 (relative)</strong>：相对于自身静态位置进行偏移，不会影响其他元素的位置。</li>
<li><strong>绝对定位 (absolute)</strong>：相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）。</li>
<li><strong>固定定位 (fixed)</strong>：相对于浏览器窗口进行定位，不随页面滚动而移动。</li>
<li><strong>粘性定位 (sticky)</strong>：根据用户的滚动位置来切换元素的定位方式，表现为相对定位直到到达指定位置后变为固定定位。</li>
</ul>
</li>
<li><strong>浮动 (float)</strong>：
<ul>
<li>使元素脱离正常文档流并浮动到左侧或右侧，允许文本和其他元素环绕它。</li>
<li>常用属性值：left, right, none。</li>
</ul>
</li>
<li><strong>Flex布局</strong>：一种一维布局模型，能够更灵活地对容器内的项目进行排列、对齐和分配空间。
<ul>
<li>主要属性：display: flex; 用于定义一个Flex容器。</li>
<li>子元素常用属性：flex-grow, flex-shrink, flex-basis, align-items, justify-content 等。</li>
</ul>
</li>
<li><strong>Grid布局</strong>：一种二维布局模型，能够更高效地管理行和列上的项目。
<ul>
<li>主要属性：display: grid; 用于定义一个Grid容器。</li>
<li>子元素常用属性：grid-template-columns, grid-template-rows, grid-column, grid-row 等。</li>
</ul>
</li>
</ul>
</div>
<h3>例题说明</h3>
<p>下面是一个简单的CSS布局示例，展示如何使用Flex布局创建一个响应式导航栏。</p>
<div>
<h4>HTML代码</h4>
<pre><nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav></pre>
<h4>CSS代码</h4>
<pre>nav {
display: flex;
justify-content: space-between;
background-color: #333;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
}
nav a:hover {
background-color: #555;
}</pre>
</div>
这个示例展示了如何使用Flex布局来创建一个简单的导航栏，并且通过CSS样式设置了导航栏的背景颜色、链接的颜色和悬停效果。