一、CSS尺寸计算基础
1.1 盒模型
CSS中的盒模型是理解尺寸计算的基础。每个元素都可以视为一个盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。
内容宽度
：元素内容的宽度。
内容高度
：元素内容的高度。
内边距
：内容与边框之间的空间。
边框
：围绕元素内容的边框。
外边距
：元素与其他元素之间的空间。
1.2 尺寸单位
CSS中常用的尺寸单位有：
px（像素）
：固定大小，常用于网页设计。
em
：相对于当前元素的字体大小。
rem
：相对于根元素（html）的字体大小。
%
：相对于父元素的尺寸。
vw/vh
：相对于视口宽度和高度的百分比。
1.3 边距、边框和填充
边距（margin）
：元素与其他元素之间的空间，可以设置上、右、下、左四个方向的边距。
边框（border）
：围绕元素内容的边框，可以设置宽度、样式和颜色。
填充（padding）
：内容与边框之间的空间。
二、CSS尺寸计算进阶
2.1 盒模型计算
盒模型计算公式为：
元素总宽度 = 内容宽度 + 左边距 + 左边框 + 左填充
，同理，高度计算也是如此。
2.2 包含块
包含块是指计算元素尺寸时使用的参考块。根元素的包含块是视口（viewport），其他元素的包含块是其最近的定位祖先元素。
2.3 边框碰撞
当多个边框相遇时，会发生边框碰撞，实际宽度或高度会减少。计算公式为：
实际宽度/高度 = 可用宽度/高度 – 碰撞宽度/高度
。
2.4 响应式设计
响应式设计是指网页在不同设备上显示效果一致的布局设计。媒体查询是实现响应式设计的关键技术。
三、CSS布局技巧
3.1 Flexbox布局
Flexbox布局是一种一维布局方式，适用于创建水平或垂直方向的布局。
容器
：包含Flex项的元素。
Flex项
：容器内的元素。
主轴
：Flex项排列的方向。
交叉轴
：垂直于主轴的轴。
3.2 Grid布局
Grid布局是一种二维布局方式，适用于创建复杂的多列或多行布局。
网格容器
：包含网格项的元素。
网格项
：网格容器内的元素。
网格线
：网格容器内的分隔线。
网格轨道
：网格线之间的空间。
四、实战案例
以下是一个使用Flexbox布局的简单示例：
.container {
display: flex;
width: 300px;
}
.item {
flex: 1;
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
在这个示例中，
.container
元素设置了
display: flex;
属性，使其成为Flex容器。
.item
元素设置为Flex项，通过
flex: 1;
属性使三个Item平均分配容器宽度。
通过掌握CSS尺寸计算和布局技巧，你可以轻松地创建出美观且实用的网页布局。在实际开发过程中，不断积累经验和实践，才能更好地运用这些技巧。