CSS尺寸、盒子模型、定位、浮动与布局（Flex/Grid）
<h1 id="css尺寸盒子模型定位浮动与布局flexgrid">CSS尺寸、盒子模型、定位、浮动与布局（Flex/Grid）</h1><h2 id="尺寸单位-pxemremfr">尺寸单位: px,em,rem,fr</h2>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251028234507230-1843117531.png" alt="img" loading="lazy"></p>
<h3 id="各单位定义">各单位定义</h3>
<ul>
<li><strong>px (像素)</strong>: 相对固定的单位，代表屏幕上的一个物理点。在高分辨率屏幕上，1个CSS像素可能对应多个物理像素。</li>
<li><strong>em</strong>: 相对单位，相对于父元素的字体大小。如果父元素字体大小为16px，则1em = 16px。</li>
<li><strong>rem (root em)</strong>: 相对单位，相对于根元素(html)的字体大小。如果html的字体大小为16px，则1rem = 16px。</li>
<li><strong>fr (fraction unit)</strong>: Grid布局专用单位，表示网格容器中可用空间的比例份额。当多个元素使用fr单位时，它们会按照比例分配剩余空间。</li>
</ul>
<h3 id="使用原则">使用原则</h3>
<ul>
<li>组合使用原则：“全局用 rem，局部用 em，细节用 px”</li>
<li>若尺寸不依赖任何字体大小（如边框）→ 用 px。</li>
<li>若尺寸仅依赖父元素 / 自身字体大小（如按钮内边距）→ 用 em。</li>
<li>若尺寸需要全局统一缩放（如页面字体、容器宽度）→ 用 rem。</li>
</ul>
<h2 id="盒子模型">盒子模型</h2>
<p>盒子模型（Box Model） 由 4 个部分从内到外依次组成：<strong>内容区（content）、内边距（padding）、边框（border）、外边距（margin）</strong>。</p>
<ul>
<li><code>box-sizing: content-box;</code> 设置模型为标准盒模型 (W3C 盒模型)</li>
</ul>
<blockquote>
<p><strong>width,height 仅包含内容宽度，不包含内边距、边框、外边距。</strong><br>
即总宽度 = 内容宽度 + 内边距 + 边框 + 外边距。</p>
</blockquote>
<ul>
<li><code>box-sizing: border-box;</code> 设置模型为怪异盒模型 (IE 盒模型)</li>
</ul>
<blockquote>
<p><strong>width,height 仅包含内容宽度，内边距、边框，但不包含外边距。</strong><br>
即设置的 width 值 = 内容宽度 + 内边距 + 边框宽度。</p>
</blockquote>
<h2 id="position-定位">position 定位</h2>
<p><strong>关键术语定义</strong>：</p>
<blockquote>
<p><strong>定位祖先元素</strong>：指元素的祖先节点中，position属性值不为static的最近元素。对于absolute定位，它是定位的参考系；对于sticky定位，它决定了粘性效果的有效范围。</p>
<p><strong>包含块(containing block)</strong>：元素布局和定位的参考框。<br>
对于position为static或relative的元素，包含块通常是其最近的块级祖先元素的内容区域；<br>
对于absolute定位元素，包含块是其定位祖先元素的padding区域；<br>
对于fixed定位元素，包含块是视口。</p>
</blockquote>
<h3 id="position属性值">position属性值</h3>
<pre><code class="language-css">position: static | relative | absolute | fixed | sticky;
</code></pre>
<ul>
<li><strong>static</strong>: 静态定位（默认值）,遵循常规流布局，不参与定位。</li>
</ul>
<blockquote>
<p>元素的position属性值为static时，元素的top、right、bottom、left属性值不会生效。</p>
</blockquote>
<ul>
<li><strong>relative</strong>: 相对定位,相对于其正常位置进行偏移，不脱离文档流。自身在常规流中的位置仍然保留</li>
</ul>
<blockquote>
<p>增加top、right、bottom、left这些属性后，便会相对于自身在常规流中的位置进行定位</p>
</blockquote>
<ul>
<li><strong>absolute</strong>: 绝对定位,<strong>相对于定位祖先元素进行偏移定位</strong>,元素将<strong>完全脱离文档流</strong>。</li>
</ul>
<blockquote>
<p>绝对定位元素的定位参考系是其最近的「定位祖先元素」（即position值不为static的祖先元素）。<br>
若祖先元素中存在position为relative、absolute、fixed或sticky的元素，则该元素会作为定位参考系。<br>
若不存在任何定位祖先元素，元素会最终相对于根元素（html）进行定位，而非body元素。</p>
</blockquote>
<ul>
<li><strong>fixed</strong>: 固定定位,,<strong>相对于视口(viewport)进行偏移定位</strong>，元素将<strong>完全脱离文档流</strong></li>
</ul>
<blockquote>
<p>固定定位的元素不会随页面滚动而移动，始终保持在视口的固定位置。<br>
固定定位元素会完全脱离文档流，不占据任何布局空间</p>
</blockquote>
<ul>
<li><strong>sticky</strong>: 粘性定位，是一种<strong>位置感知的混合定位方式</strong>,<strong>优先相对于最近的可滚动祖先元素定位</strong></li>
</ul>
<blockquote>
<p>结合了 relative 和 fixed 定位的特点，根据滚动位置动态切换行为：</p>
<ul>
<li>当元素在视口内可见（未达到触发点）时，表现为 relative 定位，遵循正常文档流</li>
<li>当元素滚动到指定的触发位置（由top/right/bottom/left定义）时，表现为 fixed 定位，固定在视口的指定位置</li>
<li>sticky 定位的元素始终相对于其最近的可滚动祖先元素或视口（视口滚动时）进行定位</li>
</ul>
</blockquote>
<p><strong>sticky关键特性与注意事项</strong>：</p>
<ol>
<li>必须至少设置 top、right、bottom、left 四个偏移属性中的一个，否则 sticky 定位不会生效，元素将表现为 static 定位</li>
<li>元素的粘性效果仅在其包含块（containing block）的范围内有效，超出包含块边界后将停止固定</li>
<li>z-index 属性在 sticky 元素中有效，可以控制层叠顺序</li>
<li>与 fixed 定位的区别：<strong>sticky 元素不会脱离文档流布局空间</strong>，且其固定效果受限于父容器</li>
</ol>
<h2 id="float-浮动">float 浮动</h2>
<blockquote>
<p><strong>浮动元素会部分脱离文档流</strong>，不占据正常文档流的垂直空间，但仍会在水平方向上影响周围元素的排列（其他元素会环绕在其周围）。</p>
</blockquote>
<pre><code class="language-css">float: left | right | none | inherit;
</code></pre>
<ul>
<li><strong>left</strong>: 元素向左浮动，将向左移动，直到遇到另一个浮动元素或父元素的边缘。</li>
<li><strong>right</strong>: 元素向右浮动，将向右移动，直到遇到另一个浮动元素或父元素的边缘。</li>
<li><strong>none</strong>: 元素不浮动，<strong>默认值</strong>。</li>
<li><strong>inherit</strong>: 规定从父元素继承 float 属性的值。</li>
</ul>
<blockquote>
<p>浮动元素的排列规则：</p>
<ul>
<li>如果元素A是浮动的，且A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行）。</li>
<li>如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，即A的顶部总是和上一个元素的底部对齐。</li>
<li>元素浮动前在标准流中是竖向排列的，浮动后可以实现横向排列效果。</li>
</ul>
</blockquote>
<blockquote>
<p><strong>注意</strong>：浮动元素默认会收缩宽度以适应内容（除非显式设置宽度），且可能导致父元素高度塌陷等问题。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251030181302911-1778603796.png" alt="img" loading="lazy"><br>
本来五个元素应该垂直排列，其中div1和div5都在标准流中。但由于div2和div3设置了<code>float: right;</code>、div4设置了<code>float: left;</code>，具体表现为：</p>
<ul>
<li>div2和div3会向右浮动，直到右边缘</li>
<li>div4会向左浮动，直到左边缘</li>
<li>div5会遵循标准流的排列规则，紧贴在div1下面</li>
<li>由于浮动元素会部分脱离文档流，div4会浮动在div5的上方。</li>
</ul>
<h3 id="清除浮动">清除浮动</h3>
<pre><code class="language-css">clear: left | right | both | none;
</code></pre>
<ul>
<li><strong>left</strong>: 元素的左侧不允许有浮动元素。</li>
<li><strong>right</strong>: 元素的右侧不允许有浮动元素。</li>
<li><strong>both</strong>: 元素的左右两侧均不允许有浮动元素。</li>
<li><strong>none</strong>: 元素允许有浮动元素，<strong>默认值</strong>。</li>
</ul>
<blockquote>
<p>对于CSS的清除浮动(clear)，请记住：<strong>这个规则只能影响使用清除的元素本身，不能影响其他元素。</strong></p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251030183354507-1228477521.png" alt="img" loading="lazy"><br>
由于给div3加上了<code>clear: right;</code>，它会不允许右侧有其他浮动元素，因此即使div2和div3都设置了<code>float: right;</code>，div3也会另起一行，紧贴在div2的下方排列;</p>
<h2 id="布局模型">布局模型</h2>
<h3 id="flex布局">flex布局</h3>
<ul>
<li><code>display: flex;</code>设置为flex弹性布局,称为Flex容器（flex container）</li>
<li>所有子元素自动成为容器成员，称为Flex项目（flex item）</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251029000446510-1647140692.png" alt="img" loading="lazy"></p>
<blockquote>
<p><strong>"main axis"</strong> 主轴，默认水平方向，从左到右。<br>
<strong>"cross axis"</strong> 交叉轴，与主轴垂直，默认垂直方向，从上到下。<br>
<strong>"main start"</strong> 主轴起点。<br>
<strong>"main end"</strong> 主轴终点。<br>
<strong>"cross start"</strong> 交叉轴起点。<br>
<strong>"cross end"</strong> 交叉轴终点。<br>
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p>
</blockquote>
<h4 id="flex容器属性">flex容器属性</h4>
<p><strong>注意</strong>：带有<code>-reverse</code>后缀的值会保持布局轴的方向不变（水平/垂直），但反转项目在该轴上的排列顺序（起点变终点，终点变起点））,同时也会反转对齐点（如justify-content: flex-start会变成从右向左对齐）。</p>
<h5 id="flex-direction-属性决定主轴的方向即项目的排列方向">flex-direction 属性决定主轴的方向（即项目的排列方向）</h5>
<pre><code class="language-css">.box {
flex-direction: row | row-reverse | column | column-reverse;
}
</code></pre>
<blockquote>
<p>row（默认值）：主轴为水平方向，起点在左端。<br>
row-reverse：主轴为水平方向，起点在右端。<br>
column：主轴为垂直方向，起点在上沿。<br>
column-reverse：主轴为垂直方向，起点在下沿。</p>
</blockquote>
<h5 id="flex-wrap属性定义如果一条轴线排不下如何换行">flex-wrap属性定义，如果一条轴线排不下，如何换行</h5>
<pre><code class="language-css">.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
</code></pre>
<blockquote>
<p>nowrap（默认）：不换行。<br>
wrap：换行，第一行在上方。<br>
wrap-reverse：换行，第一行在下方。</p>
</blockquote>
<h5 id="flex-flow属性是flex-direction属性和flex-wrap属性的简写形式">flex-flow属性是flex-direction属性和flex-wrap属性的简写形式</h5>
<pre><code class="language-css">.box{
flex-flow: <flex-direction> <flex-wrap>;
}
</code></pre>
<blockquote>
<p>默认值为row nowrap</p>
</blockquote>
<h5 id="justify-content属性定义了项目在主轴上的对齐方式">justify-content属性定义了项目在主轴上的对齐方式</h5>
<pre><code class="language-css">.box{
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
</code></pre>
<blockquote>
<p>flex-start（默认值）：左对齐。<br>
flex-end：右对齐。<br>
center：居中对齐。<br>
space-between：两端对齐，项目之间的间隔相等。<br>
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。<br>
space-evenly：项目与项目之间的间隔相等，项目与边框的间隔也相等。</p>
</blockquote>
<h5 id="align-items属性定义项目在交叉轴上如何对齐">align-items属性定义项目在交叉轴上如何对齐</h5>
<pre><code class="language-css">.box{
align-items: flex-start | flex-end | center | baseline | stretch;
}
</code></pre>
<blockquote>
<p>flex-start：交叉轴的起点对齐。<br>
flex-end：交叉轴的终点对齐。<br>
center：交叉轴的中点对齐。<br>
baseline: 项目的第一行文字的基线对齐。<br>
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p>
</blockquote>
<h5 id="align-content属性定义了多根轴线的对齐方式">align-content属性定义了多根轴线的对齐方式</h5>
<p>如果项目只有一根轴线，该属性不起作用。</p>
<pre><code class="language-css">.box{
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}
</code></pre>
<blockquote>
<p>flex-start：与交叉轴的起点对齐。<br>
flex-end：与交叉轴的终点对齐。<br>
center：与交叉轴的中点对齐。<br>
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。<br>
space-around：每根轴线两侧的间隔相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。<br>
space-evenly：轴线与边框的间隔也相等。<br>
stretch（默认值）：轴线占满整个交叉轴。</p>
</blockquote>
<h4 id="项目的属性">项目的属性</h4>
<h5 id="order属性定义项目的排列顺序">order属性定义项目的排列顺序。</h5>
<p>数值越小，排列越靠前，默认为0。</p>
<pre><code class="language-css">.item {
order: <integer>;
}
</code></pre>
<h5 id="flex-grow属性定义项目的放大比例">flex-grow属性定义项目的放大比例</h5>
<p>默认为0，即如果存在剩余空间，也不放大。</p>
<pre><code class="language-css">.item {
flex-grow: <number>;
}
</code></pre>
<blockquote>
<p>如果所有项目的flex-grow属性都为1，则它们将等比例放大，占满剩余空间。</p>
</blockquote>
<h5 id="flex-shrink属性定义了项目的缩小比例">flex-shrink属性定义了项目的缩小比例</h5>
<p>默认为1，即如果空间不足，该项目将缩小。</p>
<pre><code class="language-css">.item {
flex-shrink: <number>;
}
</code></pre>
<blockquote>
<p>如果所有项目的flex-shrink属性都为1，当空间不足时，它们将等比例缩小。<br>
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
</blockquote>
<h5 id="flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main-size">flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）</h5>
<pre><code class="language-css">.item {
flex-basis: <length> | auto; /* default auto */
}
</code></pre>
<h5 id="flex属性是flex-grow-flex-shrink-和-flex-basis的简写">flex属性是flex-grow, flex-shrink 和 flex-basis的简写</h5>
<p>默认值为0 1 auto。后两个属性可选。</p>
<pre><code class="language-css">.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
</code></pre>
<blockquote>
<p>该属性有两个快捷值：<strong>auto (1 1 auto)</strong> 和 <strong>none (0 0 auto)</strong>。</p>
</blockquote>
<h5 id="align-self属性允许单个项目有与其他项目不一样的对齐方式">align-self属性允许单个项目有与其他项目不一样的对齐方式</h5>
<p>可覆盖align-items属性。<br>
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
<pre><code class="language-css">.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
</code></pre>
<h3 id="grid布局">Grid布局</h3>
<ul>
<li><code>display：grid;</code> 则该容器是一个块级元素</li>
<li><code>display: inline-grid;</code> 则容器元素为行内元素<br>
<img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251029180936418-1849294074.png" alt="img" loading="lazy"></li>
</ul>
<blockquote>
<p>网格线 grid line：划分网格的线，称为"网格线。网格线会被编号帮我们定位每一个网格项目。</p>
<ul>
<li>如果有m列则有m+1根垂直网格线，有n行则有n+1根水平网格线</li>
<li>编号从左到右，从上到下为1，2，3排列；也有从右到左，从下到上的-1，-2，-3排列</li>
</ul>
<p>网格单位 grid cell：网格容器里面一个个网格项目元素就是网格单位<br>
网格轨道 grid track：一个网格轨道就是网格中两条平行线之间的空间，就好比表格中行或列<br>
网格区域 grid area：多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。</p>
</blockquote>
<h4 id="css-grid灵活布局函数与关键字">CSS Grid灵活布局函数与关键字</h4>
<h5 id="repeat函数">repeat()函数</h5>
<p>该函数接收两个参数，第一个参数为重复次数，第二个参数为需要重复的值<br>
用于重复指定的网格轨道模式，简化具有多个相同尺寸列或行的网格定义。</p>
<pre><code class="language-css">repeat(次数, 尺寸);
</code></pre>
<p>示例：</p>
<pre><code class="language-css">/* 创建4个宽度均为100px的列 */
grid-template-columns: repeat(4, 100px);
/* 创建3个等宽列 */
grid-template-columns: repeat(3, 1fr);
</code></pre>
<h5 id="minmax函数">minmax()函数</h5>
<p>minmax()函数产生一个长度范围，接收两个参数，第一个参数为最小值，第二个为最大值。<br>
定义一个尺寸范围，网格轨道的大小将在这个范围内自适应调整。</p>
<pre><code class="language-css">minmax(最小值, 最大值);
</code></pre>
<p>示例：</p>
<pre><code class="language-css">/* 创建列宽至少为100px，最多为1fr的3列 */
grid-template-columns: repeat(3, minmax(100px, 1fr));
</code></pre>
<h5 id="auto关键字">auto关键字</h5>
<p>根据内容自动调整网格轨道的大小。</p>
<pre><code class="language-css">/* 第一列宽度根据内容自动调整，第二列占据剩余空间 */
grid-template-columns: auto 1fr;
</code></pre>
<h5 id="auto-fill关键字">auto-fill关键字</h5>
<p>在可用空间内尽可能多地创建指定尺寸的网格轨道，即使没有足够的内容填充。</p>
<pre><code class="language-css">/* 在容器中尽可能多地创建200px宽的列 */
grid-template-columns: repeat(auto-fill, 200px);
/* 结合minmax使用，创建响应式列 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
</code></pre>
<h5 id="auto-fit关键字">auto-fit关键字</h5>
<p>与auto-fill类似，但会折叠空的网格轨道，使非空轨道扩展填充剩余空间。</p>
<pre><code class="language-css">/* 在容器中创建适应内容的列，空列会被折叠 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
</code></pre>
<h4 id="grid属性">Grid属性</h4>
<h5 id="grid-template-columnsrows-网格轨道的宽高列宽和行高">grid-template-columns/rows 网格轨道的宽高(列宽和行高)</h5>
<ul>
<li>grid-template-columns：定义每一列的列宽</li>
<li>grid-template-rows：定义每一行的行高</li>
</ul>
<pre><code class="language-css">/* 直接定义行列数、列宽行高 */
/* 定义了三列 每一行50px */
grid-template-columns: 50px 50px 50px;
/* 定义了三行 每一行50px */
grid-template-rows: 50px 50px 50px;
/* 定义网格线的名称（按需求而定）：大小前面使用数组可以定义网格线的名称，可以有很多个名称，多个名称用空格隔开。 */
/* 定义了三列 每一行50px 并给网格线命名为a b c d */
grid-template-columns: 50px 50px 50px ;
/* 定义了三行 每一行50px 并给网格线命名为a b c d */
grid-template-rows: 50px 50px 50px ;
</code></pre>
<h5 id="grid-template-areas网格布局区域-和-grid-area网格项目定位">grid-template-areas网格布局区域 和 grid-area网格项目定位</h5>
<ul>
<li>grid-template-areas:该属性一般与grid-area一起使用，grid-template-areas属性在容器上制定各个区域并命名</li>
<li>grid-area：grid-area属性指定项目放在哪一个区域内。</li>
</ul>
<blockquote>
<p>grid-area为项目属性</p>
</blockquote>
<pre><code class="language-css">/* 网格布局区域 */
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
/* 项目属性 */
.header {
grid-area: header;
}
省略...
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251029200839396-900793247.png" alt="img" loading="lazy"></p>
<blockquote>
<p>. 表示空轨道，不占用任何空间<br>
命名的网格区域必须包含在grid-template-areas属性中定义的区域内。</p>
</blockquote>
<h5 id="grid-row-gap---grid-column-gap--grid-gap-设置间距">grid-row-gap &&grid-column-gap && grid-gap 设置间距</h5>
<p><strong>在现代浏览器中，相关属性已经进行了简化，grid- 前缀被移除</strong></p>
<ul>
<li>grid-row-gap：设置行间距</li>
<li>grid-column-gap：设置列间距</li>
<li>grid-gap：同时设置行间距和列间距</li>
</ul>
<pre><code class="language-css">/* 设置行间距为20px */
row-gap: 20px;
/* 设置列间距为30px */
column-gap: 30px;
/* 同时设置行间距为20px，列间距为30px */
grid-gap: 20px 30px;
</code></pre>
<h5 id="grid-布局中的简写属性grid-template--grid-gap">Grid 布局中的简写属性grid-template && grid-gap</h5>
<ul>
<li>grid-template：grid-template-columns、grid-template-rows、grid-template-areas的简写属性</li>
<li>grid-gap：grid-row-gap、grid-column-gap的简写属性</li>
</ul>
<pre><code class="language-css">/* 定义网格布局 */
grid-template:
"header header header" 50px /*第一行高度为50px*/
"sidebar main main" 1fr /*第二行高度为1fr*/
"footer footer footer" 50px /*第三行高度为50px*/
/ 200px 1fr 200px; /*列宽为200px 1fr 200px*/
/* 同时设置行间距为20px，列间距为30px */
grid-gap: 20px 30px;
</code></pre>
<h5 id="grid-auto-flow-网格排列顺序">grid-auto-flow 网格排列顺序</h5>
<blockquote>
<p>grid 容器的子元素默认会按照先行后列的顺序放置<br>
grid-auto-flow 属性决定，默认值是 row。也可以设成 column，变成先列后行</p>
</blockquote>
<ul>
<li>row dense：按行排列，并尝试填充空白区域。</li>
<li>column dense：按列排列，并尝试填充空白区域。</li>
</ul>
<h5 id="justify-items属性align-items属性以及place-items属性">justify-items属性、align-items属性以及place-items属性</h5>
<blockquote>
<p>控制所有网格项目在其单元格内的对齐方式</p>
</blockquote>
<ul>
<li>justify-items：定义网格项目在单元格内沿行轴（水平方向）的对齐方式。</li>
<li>align-items：定义网格项目在单元格内沿列轴（垂直方向）的对齐方式。</li>
<li>place-items：是 justify-items 和 align-items 的简写属性，用于同时设置这两个属性。</li>
</ul>
<pre><code class="language-css">justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>;
</code></pre>
<blockquote>
<p>start：项目在当前轴的起始位置<br>
end：项目在当前轴的结束位置<br>
center：项目在当前轴的中间位置<br>
stretch：项目会拉伸以填充整个单元格。</p>
</blockquote>
<h5 id="justify-content-属性align-content-属性以及-place-content-属性">justify-content 属性、align-content 属性以及 place-content 属性</h5>
<blockquote>
<p>控制整个网格区域在Grid容器中的对齐方式</p>
</blockquote>
<ul>
<li>justify-content：定义网格区域在容器内沿行轴（水平方向）的对齐方式。</li>
<li>align-content：定义网格区域在容器内沿列轴（垂直方向）的对齐方式。</li>
<li>place-content：是 justify-content 和 align-content 的简写属性，用于同时设置这两个属性。</li>
</ul>
<pre><code class="language-css">justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>
</code></pre>
<blockquote>
<p>start：项目在当前轴的起始位置<br>
end：项目在当前轴的结束位置<br>
center：项目在当前轴的中间位置<br>
stretch：当网格总大小小于容器大小时，拉伸网格填满整个容器<br>
space-around：项目周围留有空白。<br>
space-between：项目之间有空白，第一个项目在起始位置，最后一个项目在结束位置。<br>
space-evenly：项目之间有空白，包括第一个项目和最后一个项目。</p>
</blockquote>
<h5 id="grid-auto-columnsgrid-auto-rows-隐式网格轨道的宽高列宽和行高">grid-auto-columns&grid-auto-rows 隐式网格轨道的宽高(列宽和行高)</h5>
<blockquote>
<p>grid-auto-columns 和 grid-auto-rows 定义了当网格项超出显式网格范围时，浏览器自动创建的列和行的大小，即隐式网格的大小</p>
</blockquote>
<ul>
<li>grid-auto-columns：定义隐式网格列的宽度。</li>
<li>grid-auto-rows：定义隐式网格行的高度。</li>
</ul>
<blockquote>
<p>如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高</p>
</blockquote>
<h4 id="项目属性">项目属性</h4>
<h5 id="grid-column-start-属性grid-column-end-属性grid-row-start-属性以及grid-row-end-属性">grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性</h5>
<ul>
<li>grid-column-start属性：网格项在列方向的起始网格线。</li>
<li>grid-column-end属性：网格项在列方向的结束网格线。</li>
<li>grid-row-start属性：网格项在行方向的起始网格线。</li>
<li>grid-row-end属性：网格项在行方向的结束网格线。</li>
</ul>
<blockquote>
<p>指定网格线的起始和结束位置，来定义网格项占据的列和行范围</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251030000302384-1629102198.png" alt="img" loading="lazy"></p>
<pre><code class="language-css">.wrapper {
display: grid;
grid-gap: 10px;
grid-template-rows: 1fr 1fr 1fr 1fr ;
grid-template-columns: 1fr 1fr 1fr 1fr ;
}
/* 直接写入索引 */
#div1 {
background-color: red;
grid-row: 2 / 3;
grid-column: 2 / 3;
}
/* 使用命名网格线 */
#div2 {
background-color: green;
grid-row: c / d;
grid-column: b / c;
}
</code></pre>
<blockquote>
<p>grid-column属性：是 grid-column-start 和 grid-column-end 的简写属性。<br>
grid-row属性：是 grid-row-start 和 grid-row-end 的简写属性。</p>
</blockquote>
<ul>
<li>span 关键字：表示网格项跨越多列或多行</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251030000600129-1564040735.png" alt="img" loading="lazy"></p>
<pre><code class="language-css">#div3 {
background-color: blue;
grid-column: 4 / 5;
grid-row: 2 / span 3;
}
</code></pre>
<ul>
<li>z-index属性：指定网格项目的重叠顺序。</li>
</ul>
<blockquote>
<p>使用这四个属性如果产生了重叠，则可以使用z-index指定项目的重叠顺序。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/3471133/202510/3471133-20251030001224672-1536837214.png" alt="img" loading="lazy"><br>
黄色覆盖了蓝色</p>
<pre><code class="language-css">#div4 {
background-color: yellow;
grid-column: 3 / 5;
grid-row: 4 / 5;
z-index: 1;
}
</code></pre>
<blockquote>
<p>浏览器会根据z-index属性值，将项目按照从大到小的顺序进行绘制。<br>
因此，z-index 较大的项目会覆盖 z-index 较小的项目。<br>
默认值是0，表示不重叠。</p>
</blockquote>
<h5 id="justify-self-属性align-self-属性以及-place-self-属性">justify-self 属性、align-self 属性以及 place-self 属性</h5>
<blockquote>
<p>控制单个网格项目在其单元格内的对齐（覆盖容器的items属性设置）</p>
</blockquote>
<ul>
<li>justify-self：定义网格项目在单元格内沿行轴（水平方向）的对齐方式。</li>
<li>align-self：定义网格项目在单元格内沿列轴（垂直方向）的对齐方式。</li>
<li>place-self：是 justify-self 和 align-self 的简写属性，用于同时设置这两个属性。</li>
</ul>
<pre><code class="language-css">.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
</code></pre>
<h5 id="grid-area-属性">grid-area 属性</h5>
<blockquote>
<p>通过grid-area属性，将网格项分配给一个命名的网格区域。</p>
</blockquote>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：Nobody_Cares，转载请注明原文链接：https://www.cnblogs.com/NobodyCares/p/19175672</p>
<span id="jinrishici-sentence">正在加载今日诗词....</span><br><br>
来源：https://www.cnblogs.com/NobodyCares/p/19175672
頁:
[1]