【CSS】HTML元素布局基础总结

HTML默认布局和元素显示

$\footnotesize \textbf{CSS}元素显示 \begin{cases} \textbf{HTML}默认布局：\textbf{流式布局} \begin{cases} 从左到右，从上到下\\ 随页面宽度变化动态排列元素\\ \end{cases} \\ 文档流：整个HTML文档的流式布局\\ \textbf{HTML}元素分为 \begin{cases} \textbf{块级元素}：默认占满一行\\ \textbf{行内元素}：在行内最窄排列\\ \end{cases} \\ \textbf{display}属性 \begin{cases} 外部表现 \begin{cases} \textbf{block}：块级元素的默认显示方式\\ \textbf{inline}：行内元素的默认显示方式\\ \textbf{none}：隐藏元素\\ 外+内形式 \begin{cases} \textbf{inline-block}：外部行内+内部块级\\ \textbf{inline-flex}：外部行内+内部弹性\\ \textbf{inline-grid}：外部行内+内部网格\\ \end{cases} \\ \end{cases} \\ 内部表现 \begin{cases} \textbf{flow}：内部元素流式布局\\ \textbf{flex}：内部元素弹性布局\\ \textbf{grid}：内部元素网格布局\\ \textbf{table}：内部元素类似表格形式布局\\ \end{cases} \\ 外部表现定义元素自身的显示\\ 内部表现定义其内部子元素的显示和布局\\ \end{cases} \\ \end{cases}$

表格布局

$\footnotesize 表格布局 \begin{cases} 两种方式 \begin{cases} \textbf{HTML}的\textbf{<table>}标签\\ \textbf{CSS}的\textbf{display:table;}\\ \end{cases} \\ \text{CSS}方式的详见\text{CSDN《CSS 之 table 表格布局》}\\ \end{cases}$

定位布局

$\footnotesize \textbf{CSS}定位布局 \begin{cases} \textbf{position}属性 \begin{cases} \textbf{static}：默认，流式布局\\ \textbf{relative}：相对定位，相对父元素定位\\ \textbf{absolute}：绝对定位，相对\textbf{body}定位\\ \textbf{fixed}：固定定位\\ \textbf{sticky}：黏性定位\\ \end{cases} \\ 配合属性： \begin{cases} \textbf{top}：顶部距离\\ \textbf{left}：左边距离\\ \textbf{right}：右边距离\\ \textbf{bottom}：底部距离\\ \end{cases} \\ \end{cases}$

浮动布局

$\footnotesize \textbf{CSS}浮动布局 \begin{cases} 使用\textbf{foat}属性，使元素脱离原始的文档流浮动布局\\ 文本和内联元素可以环绕浮动元素\\ \textbf{foat}属性 \begin{cases} \textbf{left}：浮动到左侧\\ \textbf{right}：浮动到右侧\\ \textbf{none}：元素不浮动\\ \textbf{inherit}：继承父元素的\textbf{foat}属性值\\ \end{cases} \\ \end{cases}$

网格布局/栅格布局

$\scriptsize \textbf{Grid}布局 \begin{cases} 网格布局，一种由外部\colorbox{#ffff00}{容器}和内部\colorbox{#ffff00}{元素}搭配设置所组成的CSS布局方式\\ 特点： \begin{cases} 1.内部元素一般不需要明确设定宽高\\ 2.外部容器需要明确设定宽高\\ 3.非常适合图片或视频列表页面的布局\\ 4.可以实现自适应布局\\ \end{cases} \\ 开启\textbf{Grid}布局：外层容器元素\boxed{\textbf{display:grid;}}\\ 设定列数和宽度： \begin{cases} \textbf{grid-template-columns} \begin{cases} 例如：\boxed{\textbf{grid-template-columns:200px 200px 200px;}}\\ 可以指定固定宽度或浮动宽度\textbf{fr}\\ \textbf{fr}: \begin{cases} \textbf{Grid}布局专用单位，代表剩余空间\\ 例如：\boxed{\textbf{grid-template-columns:1fr 1fr 1fr;}}\\ \end{cases} \\ \end{cases} \\ 使用\textbf{repeat()}函数指定： \begin{cases} \textbf{repeat(重复次数,重复内容)}\\ 例如：\boxed{\textbf{grid-template-columns:repeat(3,1fr);}}\\ \end{cases} \\ 自适应布局： \begin{cases} \boxed{\textbf{repeat(auto-fill,minmax(260px,1fr))}}\\ 其含义是： \begin{cases} 默认按容器最多能容纳的最小宽度\textbf{(260px)}元素的个数进行排列\\ 并且如果元素宽度大于最小宽度\textbf{(260px)}，则按\textbf{1fr}排列\\ 当缩放页面，容器宽度逐渐缩小\\ 元素宽度小于\textbf{260px}时，会减少元素个数，换行排列\\ \end{cases} \\ \end{cases} \\ \end{cases} \\ 设定元素间距 \begin{cases} 列间距：\textbf{column-gap}\\ 行间距：\textbf{row-gap}\\ 统一设定列和行间距：\textbf{gap}\\ \end{cases} \\ 指定元素布局： \begin{cases} \textbf{grid-template-areas}：在容器上指定\\ \textbf{grid-areas}：在排列元素上指定\\ \end{cases} \\ 另一种元素布局： \begin{cases} 在子元素上指定\textbf{grid-row}和\textbf{grid-column}\\ 例如：\boxed{\textbf{grid-column：1/span 2}}\\ 实现类似表格\colorbox{#ffff00}{合并单元格}的功效\\ \end{cases} \\ \textbf{Grid}盒模型： \begin{cases} 2条轴线： \begin{cases} 水平的行轴(Row Axis)/内联轴(Inline Axis)\\ 纵向的块轴(Block Axis)\\ \end{cases} \\ 3个层级： \begin{cases} 容器：包裹被排列元素的元素\\ 内容：所有被排列元素组成的区域\\ 元素：就是容器的直接子元素\\ \end{cases} \\ \end{cases} \\ 元素对齐： \begin{cases} \textbf{align-items}：指定垂直方向元素的对齐方式\\ \textbf{justify-items}：指定水平方向元素的对齐方式\\ 可选值： \begin{cases} \textbf{start}：左对齐\\ \textbf{end}：右对齐\\ \textbf{center}：居中\\ \textbf{space-between}：两端对齐\\ 其他：\textbf{auto}、\textbf{normal}、\textbf{baselin}e、\textbf{first baseline}、\textbf{last baseline}\\ 具体参考MDN文档\\ \end{cases} \\ \end{cases} \\ 内容整体对齐： \begin{cases} \textbf{align-content}：垂直方向上对齐轨道\\ \textbf{justify-content}：水平方向上对齐轨道\\ 可选值：基本与元素对齐一致\\ \end{cases} \\ \end{cases}$