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

HTML默认布局和元素显示

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

表格布局

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

定位布局

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

浮动布局

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

网格布局/栅格布局

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

分栏布局/多列布局

$$分栏布局\{\begin{array}{l}\text{column-count}属性设定多列\end{array}$$