尺寸、盒子模型与布局

news/2025/10/30 0:58:28/文章来源:https://www.cnblogs.com/NobodyCares/p/19175671

尺寸单位、盒子模型与CSS布局(flex布局,grid布局)

尺寸单位: px,em,rem,fr

img

各单位定义

  • px (像素): 相对固定的单位，代表屏幕上的一个物理点。在高分辨率屏幕上，1个CSS像素可能对应多个物理像素。
  • em: 相对单位，相对于父元素的字体大小。如果父元素字体大小为16px，则1em = 16px。
  • rem (root em): 相对单位，相对于根元素(html)的字体大小。如果html的字体大小为16px，则1rem = 16px。
  • fr (fraction unit): Grid布局专用单位，表示网格容器中可用空间的比例份额。当多个元素使用fr单位时，它们会按照比例分配剩余空间。

使用原则

  • 组合使用原则：“全局用 rem，局部用 em，细节用 px”
  • 若尺寸不依赖任何字体大小（如边框）→ 用 px。
  • 若尺寸仅依赖父元素 / 自身字体大小（如按钮内边距）→ 用 em。
  • 若尺寸需要全局统一缩放（如页面字体、容器宽度）→ 用 rem。

盒子模型

盒子模型（Box Model） 由 4 个部分从内到外依次组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。

  • box-sizing: content-box; 设置模型为标准盒模型 (W3C 盒模型)

width,height 仅包含内容宽度，不包含内边距、边框、外边距。
即总宽度 = 内容宽度 + 内边距 + 边框 + 外边距。

  • box-sizing: border-box; 设置模型为怪异盒模型 (IE 盒模型)

width,height 仅包含内容宽度，内边距、边框，但不包含外边距。
即设置的 width 值 = 内容宽度 + 内边距 + 边框宽度。

布局模型

flex布局

  • display: flex;设置为flex弹性布局,称为Flex容器（flex container）
  • 所有子元素自动成为容器成员，称为Flex项目（flex item）

img

"main axis" 主轴，默认水平方向，从左到右。
"cross axis" 交叉轴，与主轴垂直，默认垂直方向，从上到下。
"main start" 主轴起点。
"main end" 主轴终点。
"cross start" 交叉轴起点。
"cross end" 交叉轴终点。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex容器属性

注意：带有-reverse后缀的值会保持布局轴的方向不变（水平/垂直），但反转项目在该轴上的排列顺序（起点变终点，终点变起点））,同时也会反转对齐点（如justify-content: flex-start会变成从右向左对齐）。

flex-direction 属性决定主轴的方向（即项目的排列方向）
.box {flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性定义，如果一条轴线排不下，如何换行
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
.box{flex-flow: <flex-direction> <flex-wrap>;
}

默认值为row nowrap

justify-content属性定义了项目在主轴上的对齐方式
.box{justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start（默认值）：左对齐。
flex-end：右对齐。
center：居中对齐。
space-between：两端对齐，项目之间的间隔相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：项目与项目之间的间隔相等，项目与边框的间隔也相等。

align-items属性定义项目在交叉轴上如何对齐
.box{align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。

.box{align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
space-evenly：轴线与边框的间隔也相等。
stretch（默认值）：轴线占满整个交叉轴。

项目的属性

order属性定义项目的排列顺序。

数值越小，排列越靠前，默认为0。

.item {order: <integer>;
}
flex-grow属性定义项目的放大比例

默认为0，即如果存在剩余空间，也不放大。

.item {flex-grow: <number>;
}

如果所有项目的flex-grow属性都为1，则它们将等比例放大，占满剩余空间。

flex-shrink属性定义了项目的缩小比例

默认为1，即如果空间不足，该项目将缩小。

.item {flex-shrink: <number>;
}

如果所有项目的flex-shrink属性都为1，当空间不足时，它们将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
.item {flex-basis: <length> | auto; /* default auto */
}
flex属性是flex-grow, flex-shrink 和 flex-basis的简写

默认值为0 1 auto。后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性允许单个项目有与其他项目不一样的对齐方式

可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Grid布局

  • display：grid; 则该容器是一个块级元素
  • display: inline-grid; 则容器元素为行内元素
    img

网格线 grid line：划分网格的线，称为"网格线。网格线会被编号帮我们定位每一个网格项目。

  • 如果有m列则有m+1根垂直网格线，有n行则有n+1根水平网格线
  • 编号从左到右，从上到下为1，2，3排列；也有从右到左，从下到上的-1，-2，-3排列

网格单位 grid cell：网格容器里面一个个网格项目元素就是网格单位
网格轨道 grid track：一个网格轨道就是网格中两条平行线之间的空间，就好比表格中行或列
网格区域 grid area：多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。

CSS Grid灵活布局函数与关键字

repeat()函数

该函数接收两个参数，第一个参数为重复次数，第二个参数为需要重复的值
用于重复指定的网格轨道模式，简化具有多个相同尺寸列或行的网格定义。

repeat(次数, 尺寸);

示例：

/* 创建4个宽度均为100px的列 */
grid-template-columns: repeat(4, 100px);/* 创建3个等宽列 */
grid-template-columns: repeat(3, 1fr);
minmax()函数

minmax()函数产生一个长度范围，接收两个参数，第一个参数为最小值，第二个为最大值。
定义一个尺寸范围，网格轨道的大小将在这个范围内自适应调整。

minmax(最小值, 最大值);

示例：

/* 创建列宽至少为100px，最多为1fr的3列 */
grid-template-columns: repeat(3, minmax(100px, 1fr));
auto关键字

根据内容自动调整网格轨道的大小。

/* 第一列宽度根据内容自动调整，第二列占据剩余空间 */
grid-template-columns: auto 1fr;
auto-fill关键字

在可用空间内尽可能多地创建指定尺寸的网格轨道，即使没有足够的内容填充。

/* 在容器中尽可能多地创建200px宽的列 */
grid-template-columns: repeat(auto-fill, 200px);/* 结合minmax使用，创建响应式列 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
auto-fit关键字

与auto-fill类似，但会折叠空的网格轨道，使非空轨道扩展填充剩余空间。

/* 在容器中创建适应内容的列，空列会被折叠 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Grid属性

grid-template-columns/rows 网格轨道的宽高(列宽和行高)
  • grid-template-columns：定义每一列的列宽
  • grid-template-rows：定义每一行的行高
/* 直接定义行列数、列宽行高 */
/* 定义了三列 每一行50px */
grid-template-columns: 50px 50px 50px;
/* 定义了三行 每一行50px */
grid-template-rows: 50px 50px 50px;/* 定义网格线的名称（按需求而定）：大小前面使用数组可以定义网格线的名称，可以有很多个名称，多个名称用空格隔开。 */
/* 定义了三列 每一行50px 并给网格线命名为a b c d */
grid-template-columns: [a] 50px [b] 50px [c] 50px [d];
/* 定义了三行 每一行50px 并给网格线命名为a b c d */
grid-template-rows: [a] 50px [b] 50px [c] 50px [d];
grid-template-areas网格布局区域 和 grid-area网格项目定位
  • grid-template-areas:该属性一般与grid-area一起使用，grid-template-areas属性在容器上制定各个区域并命名
  • grid-area：grid-area属性指定项目放在哪一个区域内。

grid-area为项目属性

/* 网格布局区域 */
.container {grid-template-areas:"header header .""sidebar main main""footer footer footer";
}
/* 项目属性 */
.header {grid-area: header;
}
省略...

img

. 表示空轨道，不占用任何空间
命名的网格区域必须包含在grid-template-areas属性中定义的区域内。

grid-row-gap && grid-column-gap && grid-gap 设置间距

在现代浏览器中，相关属性已经进行了简化，grid- 前缀被移除

  • grid-row-gap：设置行间距
  • grid-column-gap：设置列间距
  • grid-gap：同时设置行间距和列间距
/* 设置行间距为20px */
row-gap: 20px;/* 设置列间距为30px */
column-gap: 30px;/* 同时设置行间距为20px，列间距为30px */
grid-gap: 20px 30px;
Grid 布局中的简写属性grid-template && grid-gap
  • grid-template：grid-template-columns、grid-template-rows、grid-template-areas的简写属性
  • grid-gap：grid-row-gap、grid-column-gap的简写属性
/* 定义网格布局 */
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;
grid-auto-flow 网格排列顺序

grid 容器的子元素默认会按照先行后列的顺序放置
grid-auto-flow 属性决定，默认值是 row。也可以设成 column，变成先列后行

  • row dense：按行排列，并尝试填充空白区域。
  • column dense：按列排列，并尝试填充空白区域。
justify-items属性、align-items属性以及place-items属性

控制所有网格项目在其单元格内的对齐方式

  • justify-items：定义网格项目在单元格内沿行轴（水平方向）的对齐方式。
  • align-items：定义网格项目在单元格内沿列轴（垂直方向）的对齐方式。
  • place-items：是 justify-items 和 align-items 的简写属性，用于同时设置这两个属性。
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>;

start：项目在当前轴的起始位置
end：项目在当前轴的结束位置
center：项目在当前轴的中间位置
stretch：项目会拉伸以填充整个单元格。

justify-content 属性、align-content 属性以及 place-content 属性

控制整个网格区域在Grid容器中的对齐方式

  • justify-content：定义网格区域在容器内沿行轴（水平方向）的对齐方式。
  • align-content：定义网格区域在容器内沿列轴（垂直方向）的对齐方式。
  • place-content：是 justify-content 和 align-content 的简写属性，用于同时设置这两个属性。
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>

start：项目在当前轴的起始位置
end：项目在当前轴的结束位置
center：项目在当前轴的中间位置
stretch：当网格总大小小于容器大小时，拉伸网格填满整个容器
space-around：项目周围留有空白。
space-between：项目之间有空白，第一个项目在起始位置，最后一个项目在结束位置。
space-evenly：项目之间有空白，包括第一个项目和最后一个项目。

grid-auto-columns&grid-auto-rows 隐式网格轨道的宽高(列宽和行高)

grid-auto-columns 和 grid-auto-rows 定义了当网格项超出显式网格范围时，浏览器自动创建的列和行的大小，即隐式网格的大小

  • grid-auto-columns：定义隐式网格列的宽度。
  • grid-auto-rows：定义隐式网格行的高度。

如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

项目属性

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
  • grid-column-start属性：网格项在列方向的起始网格线。
  • grid-column-end属性：网格项在列方向的结束网格线。
  • grid-row-start属性：网格项在行方向的起始网格线。
  • grid-row-end属性：网格项在行方向的结束网格线。

指定网格线的起始和结束位置，来定义网格项占据的列和行范围

img

.wrapper {display: grid;grid-gap: 10px;grid-template-rows: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];
}
/* 直接写入索引 */
#div1 {background-color: red;grid-row: 2 / 3;grid-column: 2 / 3;
}
/* 使用命名网格线 */
#div2 {background-color: green;grid-row: c / d;grid-column: b / c;
}

grid-column属性：是 grid-column-start 和 grid-column-end 的简写属性。
grid-row属性：是 grid-row-start 和 grid-row-end 的简写属性。

  • span 关键字：表示网格项跨越多列或多行

img

#div3 {background-color: blue;grid-column: 4 / 5;grid-row: 2 / span 3;
}
  • z-index属性：指定网格项目的重叠顺序。

使用这四个属性如果产生了重叠，则可以使用z-index指定项目的重叠顺序。

img
黄色覆盖了蓝色

#div4 {background-color: yellow;grid-column: 3 / 5;grid-row: 4 / 5;z-index: 1;
}

浏览器会根据z-index属性值，将项目按照从大到小的顺序进行绘制。
因此，z-index 较大的项目会覆盖 z-index 较小的项目。
默认值是0，表示不重叠。

justify-self 属性、align-self 属性以及 place-self 属性

控制单个网格项目在其单元格内的对齐（覆盖容器的items属性设置）

  • justify-self：定义网格项目在单元格内沿行轴（水平方向）的对齐方式。
  • align-self：定义网格项目在单元格内沿列轴（垂直方向）的对齐方式。
  • place-self：是 justify-self 和 align-self 的简写属性，用于同时设置这两个属性。
.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}
grid-area 属性

通过grid-area属性，将网格项分配给一个命名的网格区域。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/950355.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

zlog4

zlog4

字段解释： user id:用户身份，脱敏 item id:商品ID，脱敏 behavior_type:用户行为类型(包含点击、收藏、加购物车、支付四种行为，分别用数字1、2、3、4表示) user geohash:地理位置 item_category:品类ID(商品所属的…
阅读更多...
2025年反应釜厂家权威推荐榜：搪玻璃反应釜/搪瓷反应釜/开式闭式非标搪玻璃反应釜源头企业综合解析

2025年反应釜厂家权威推荐榜：搪玻璃反应釜/搪瓷反应釜/开式闭式非标搪玻璃反应釜源头企业综合解析

2025年反应釜厂家权威推荐榜：搪玻璃反应釜/搪瓷反应釜/开式闭式非标搪玻璃反应釜源头企业综合解析 行业背景与发展现状 化工装备制造业作为国家战略性新兴产业的重要组成部分，近年来在技术升级和产业转型方面取得了显…
阅读更多...
2025年气缸管厂家权威推荐榜：精密气缸管，不锈钢气缸管，珩磨气缸管，薄壁气缸管，焊接气缸管，冷拔气缸管，食品级气缸管，海洋用气缸管专业选购指南

2025年气缸管厂家权威推荐榜：精密气缸管，不锈钢气缸管，珩磨气缸管，薄壁气缸管，焊接气缸管，冷拔气缸管，食品级气缸管，海洋用气缸管专业选购指南

2025年气缸管厂家权威推荐榜：精密气缸管，不锈钢气缸管，珩磨气缸管，薄壁气缸管，焊接气缸管，冷拔气缸管，食品级气缸管，海洋用气缸管专业选购指南 行业背景与发展现状 气缸管作为工业自动化领域的核心零部件，其技…
阅读更多...
2025年猪牛羊屠宰流水线厂家推荐排行榜，屠宰设备，猪牛羊屠宰流水线，专业屠宰设备公司推荐，高效生产与品质保障首选

2025年猪牛羊屠宰流水线厂家推荐排行榜，屠宰设备，猪牛羊屠宰流水线，专业屠宰设备公司推荐，高效生产与品质保障首选

2025年猪牛羊屠宰流水线厂家推荐排行榜：专业屠宰设备公司的高效生产与品质保障指南 行业背景与发展趋势 随着现代畜牧业和肉类加工行业的快速发展，猪牛羊屠宰流水线及屠宰设备的专业化、自动化程度不断提升。在食品安…
阅读更多...
2025年铝单板厂家权威推荐榜：氟碳铝单板,仿木纹铝单板,仿石材铝单板源头厂家综合实力与工艺创新深度解析

2025年铝单板厂家权威推荐榜：氟碳铝单板,仿木纹铝单板,仿石材铝单板源头厂家综合实力与工艺创新深度解析

2025年铝单板厂家权威推荐榜：氟碳铝单板,仿木纹铝单板,仿石材铝单板源头厂家综合实力与工艺创新深度解析 行业背景与发展趋势 铝单板作为现代建筑装饰材料的重要组成部分，近年来在建筑外墙、室内装饰等领域的应用日益…
阅读更多...
2025年真空泵厂家权威推荐榜：涡旋真空泵/无油真空泵/微型真空泵/罗茨真空泵/螺杆真空泵全系解析

2025年真空泵厂家权威推荐榜：涡旋真空泵/无油真空泵/微型真空泵/罗茨真空泵/螺杆真空泵全系解析

2025年真空泵厂家权威推荐榜：涡旋真空泵/无油真空泵/微型真空泵/罗茨真空泵/螺杆真空泵全系解析 行业背景与发展趋势 真空技术作为现代工业制造的核心支撑技术之一，在半导体、光伏、锂电、医药、化工等高端制造领域发…
阅读更多...
基于GA遗传优化的电动汽车光储充电站容量配置算法matlab仿真

基于GA遗传优化的电动汽车光储充电站容量配置算法matlab仿真

1.程序功能描述 基于GA遗传优化的电动汽车光储充电站容量配置算法matlab仿真。通过运行基于 GA 的光储充电站容量配置算法，得到了最优的容量配置方案。与传统的容量配置方法相比，该方案在降低投资成本和运行成本方面…
阅读更多...
软考八

软考八

软考八Posted on 2025-10-30 00:34 心默默言 阅读(0) 评论(0) 收藏 举报
阅读更多...
软考七

软考七

软考七Posted on 2025-10-30 00:33 心默默言 阅读(0) 评论(0) 收藏 举报1. 基本概念
阅读更多...
二维动态数组的内存分配详解

二维动态数组的内存分配详解

🧩 二维动态数组的内存分配详解 一、示例代码 #include <stdio.h> #include <stdlib.h>int main() {int rows = 2, cols = 3;int **matrix = (int **)malloc(rows * sizeof(int *));for (int i = 0; i &…
阅读更多...
C++练习10.27

C++练习10.27

#include <iostream> #include <cmath> using namespace std; int main(){int n;cin>>n;//输入给出的正数的个数int*arr=new int[n];for(int i=0;i<n;i++){cin>>arr[i];}//循环输入所有正数…
阅读更多...
10.29总结

10.29总结

include include include include include include using namespace std; // 账户类型枚举 enum AccountType { SAVING, // 活期 FIXED_1Y, // 定期一年 FIXED_3Y, // 定期三年 FIXED_5Y // 定期五年 }; …
阅读更多...
10.28总结

10.28总结

import java.util.Scanner; /**班级：[请填写班级]学号：[请填写学号]姓名：[请填写姓名]功能：在线投稿系统的管理类，实现核心业务逻辑 */ public class Main { // 用数组存储稿件，最多存储100条记录（可扩展） pri…
阅读更多...
不等式3

不等式3

Problem 已知数列 $ { a_n } $ 的前 $ n $ 项和为 $ S_n $，满足 $ S_{n+1} = 2a_n^ { \hspace{0.2cm} 2} - 1 + S_n (n\in N^{*})$ 。 (1)略。 (2)当 $ a_1 \in [ \frac{ \sqrt{2} } {2} ,1 ]$ 时，求 $ 4a_1-a_3 …
阅读更多...
退役划水十二 用进废退

退役划水十二 用进废退

我完蛋了用进废退 四月桃红，五黄六月，七月流火，八月金桂，摆烂甚久，思前想后，还是决定写些文字，作为自己存活过的凭证。其实直接原因是：和：我应该没有红温，只是一分悲戚两分无语三分凉薄四分叹息。悲戚于自己…
阅读更多...
新学期每日总结(第16天)

新学期每日总结(第16天)

今日 相较昨日 下载数据库
阅读更多...
Gin笔记二之gin.Engine和路由设置

Gin笔记二之gin.Engine和路由设置

本文首发于公众号：Hunter后端 原文链接：Gin笔记二之gin.Engine和路由设置这一篇笔记主要介绍 gin.Engine，设置路由等操作，以下是本篇笔记目录：gin.Default() 和 gin.New() HTTP 方法 路由分组与中间件1、gin.Defa…
阅读更多...
阅读笔记一：以“刻意练习”筑牢成长根基 - 20243867孙堃2405

阅读笔记一：以“刻意练习”筑牢成长根基 - 20243867孙堃2405

《程序员的修炼之路：从小工到专家》并非一本罗列技术知识点的工具书，而是一部指引开发者突破职业瓶颈的思维指南。书中最触动我的，是对“成长本质”的深刻剖析——从“小工”到“专家”，从来不是资历的自然累积，而…
阅读更多...
flv 转化成 mp4 文件

flv 转化成 mp4 文件

ffmpeg -i "原视频.flv" -c copy "新视频.mp4"因为你用了 -c copy，意思是：不重新压缩/重编码（既不压音频也不压视频） 只是直接把原始音视频流复制进一个新的容器格式（从 .flv 换到 .mp4） 所…
阅读更多...
牛客刷题-Day18

牛客刷题-Day18

模拟、枚举与贪心 https://ac.nowcoder.com/acm/contest/20960?from=acdiscuss牛客刷题-Day18 今日刷题：\(1001-1010\) 1001 模拟 例1-字符串展开解题思路 模拟，注意细节就可以。 C++ 代码 #include <bits/stdc…
阅读更多...
最新文章

Copyright @ 2022~2023