目录

盒模型

  1. 使用outline:1px solid red;轮廓绘制在元素框之上,不影响元素大小和定位，被用来 debug

  2. 只有普通文档流中块元素的垂直外边距才会发生外边距叠加。行内框，浮动框和绝对定位框之间的外边距不会叠加。

  3. inline元素在一行上水平排列，只能设置行高，水平边框，水平padding，水平margin

  4. inline-block也可以在一行上水平排列， 并且可以设置width,height,margin,padding等

从上往下 可见内容为

border
content
padding
background-image
background-color
margin

标准文档流

块元素

  • 每个块级元素都从新的一行开始,左右自动伸展，直到包含它的元素，,元素宽度在不设置的情况下，是它本身父容器的 100%，除非设定一个宽度。

  • 块状元素的高度、宽度、行高以及顶和底边距都可设置

行内元素(内联元素)

  • 本身没有宽度 , 它的宽度就是它包含的文字或图片的宽度，不可改变

  • 和其他行内元素都在一行上

  • 元素的高度、宽度及顶部和底部边距不可设置

内联块状元素

display:inline-block

  • 和其他元素都在一行上

  • 元素的高度、宽度、行高以及顶和底边距都可设置

<img>、<input> 就是内联块状元素

隐性改变 display 类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一
position : absolute;
float : left;
元素会自动变为以 display:inline-block; 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

浮动 ⚠️ 使用场景已变化

现代建议: Float主要用于文字环绕图片，布局推荐使用CSS Grid或Flexbox

  1. 浮动框可以左右移动，直到外边缘碰到包含块或者另一个浮动框的边缘

  2. 浮动后的元素也脱离文档流，不占空间

  3. 可覆盖其他元素,z-index控制覆盖

  4. 水平无法容纳水平浮动的所有元元素,则后面的元素继续向下浮动，并且可能会出现卡住现象。

  5. inline行框会围绕在浮动框的外边。

传统Float布局 (现在不推荐用于布局)

/* ❌ 过时的布局方式 - 复杂且容易出问题 */
.container { overflow: hidden; }
.left { float: left; width: 200px; }
.right { float: right; width: 200px; }
.main { margin: 0 220px; }

/* 清除浮动 */
.clear:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

Float的现代使用场景

/* ✅ 文字环绕图片 - 依然推荐使用 */
.article img {
  float: left;
  margin: 0 20px 20px 0;
}

定位

相对定位

position:relative;

  1. 相对是相对与在原文档流中的位置

  2. 元素无论是否移动，元素仍然占据原来空间

  3. 它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定。

绝对定位

position:absolute;

  1. 相对于距离最近的已定位的祖先元素

  2. 脱离文档流，元素不占据原来空间

  3. 绝对定位的元素可以覆盖页面上的其他元素,通过z-index控制叠放顺序

固定定位

position:fixed;

  1. 相当于绝对定位，相对于视口进行定位

  2. 常用于固定导航栏、返回顶部按钮等

粘性定位 ✅ CSS新特性

position:sticky;

2018年后新增: 结合了relative和fixed的特性

/* 滚动吸附效果 - 现代导航栏常用 */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

特点:

  1. 元素在跨越指定阈值前为相对定位，之后为固定定位

  2. 常用于表格标题、导航栏等需要"吸附"效果的元素

  3. 必须指定 top, right, bottom 或 left 四个阈值其中之一

absolute 和 relative 配合使用

  1. 父元素设置为 relative,可偏移，也可不偏移。

  2. 子元素设置为 absolute,相对于上述父元素定位。

/* 经典的相对定位容器 + 绝对定位子元素 */
.container {
  position: relative;
}
.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
}

现代CSS布局系统 🚀 2018年后主流

CSS Grid 布局 - 二维布局之王

最适合: 网页整体布局、复杂的二维布局

基础语法

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左固定 中自适应 右固定 */
  grid-template-rows: auto 1fr auto;      /* 头尾自适应 中间填满 */
  gap: 20px;                              /* 统一间距 */
}

经典Holy Grail布局 - 现代实现

/* ✅ 现代方案 - 简洁直观 */
.layout {
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 16px;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

/* 对比传统Float方案需要20+行CSS和clearfix hack */

响应式Grid布局

/* 自动响应式网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* 媒体查询改变布局结构 */
@media (max-width: 768px) {
  .layout {
    grid-template-areas: 
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Grid的优势

  1. 二维布局: 同时控制行和列

  2. 语义化: grid-template-areas 直观描述布局

  3. 自动对齐: 无需复杂的margin计算

  4. 响应式友好: 轻松改变布局结构

CSS Flexbox 布局 - 一维布局专家

最适合: 导航栏、按钮组、卡片排列等一维布局

基础语法

.container {
  display: flex;
  justify-content: space-between; /* 主轴对齐 */
  align-items: center;            /* 交叉轴对齐 */
  gap: 16px;                      /* 元素间距 */
}

经典导航栏布局

/* ✅ 现代导航栏 - 一行搞定 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.user-actions {
  display: flex;
  gap: 8px;
}

完美垂直居中

/* ✅ 现代垂直居中 - 超级简单 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 对比传统方案需要transform、position等复杂计算 */

响应式卡片布局

/* 自适应卡片网格 */
.card-container {
  display: flex;
  flex-wrap: wrap;        /* 允许换行 */
  gap: 16px;
}

.card {
  flex: 1 1 300px;        /* 增长 收缩 基础宽度 */
  /* 每个卡片最小300px，有空间时等比例增长 */
}

Flexbox核心概念

  • 主轴(main axis): flex-direction决定的方向

  • 交叉轴(cross axis): 垂直于主轴的方向

  • justify-content: 主轴对齐方式

  • align-items: 交叉轴对齐方式

  • flex: grow shrink basis 的简写

布局方案选择指南

CSS Grid 适用场景

  • ✅ 网页整体布局

  • ✅ 复杂的二维布局

  • ✅ 需要精确控制行列的场景

  • ✅ 响应式布局结构变化

Flexbox 适用场景

  • ✅ 导航栏、工具栏

  • ✅ 按钮组、标签组

  • ✅ 垂直居中对齐

  • ✅ 一维方向的元素排列

Position 适用场景

  • ✅ 弹窗、工具提示

  • ✅ 固定导航栏

  • ✅ 覆盖层、遮罩

  • ✅ 精确定位的装饰元素

现代布局最佳实践

/* 推荐的组合使用方式 */
.page-layout {
  /* Grid控制整体布局 */
  display: grid;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  /* Flexbox控制导航栏内部排列 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tooltip {
  /* Position处理精确定位 */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}