好的，以下是一本markdown格式的学习文档学习笔记，主题是CSS 网页布局学习笔记，并且提供了一些实例。

CSS 网页布局学习笔记

盒模型

盒模型指的是网页中所有元素都可以看作一个盒子，由四个部分组成：内容(content)、内填充(padding)、边框(border)和外边距(margin)。盒模型的大小可以通过设置元素的宽度(width)和高度(height)来控制。

下面是一个使用盒模型展示的例子：

Copy Code
<div style="width: 200px; height: 200px; border: 1px solid #000; padding: 10px; margin: 20px;">
  这是一个盒子
</div>

流式布局

流式布局指的是网页的布局随着浏览器窗口大小的变化而变化。通常使用百分比(%)来设置元素的宽度和高度，从而达到自适应的效果。

下面是一个使用流式布局展示的例子：

Copy Code
<div style="width: 50%; float: left;">
  左侧内容
</div>

<div style="width: 50%; float: right;">
  右侧内容
</div>

弹性布局

弹性布局指的是网页中的元素可以根据所在容器的大小来自适应地改变大小和位置。

下面是一个使用弹性布局展示的例子：

Copy Code
<div style="display: flex; justify-content: space-between; align-items: center;">
  <div>左侧内容</div>
  <div>中间内容</div>
  <div>右侧内容</div>
</div>

网格布局

网格布局指的是网页中的元素可以通过网格的方式进行布局，类似于表格布局，但比表格布局更灵活、语义化。

下面是一个使用网格布局展示的例子：

Copy Code
<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 100px); gap: 10px;">
  <div style="grid-column: 1 / 3; grid-row: 1;">左上角</div>
  <div style="grid-column: 3; grid-row: 1 / 3;">右上角</div>
  <div style="grid-column: 1; grid-row: 2;">左下角</div>
  <div style="grid-column: 2; grid-row: 2;">中间</div>
</div>

以上是CSS 网页布局学习笔记的一些例子，希望能对你有所帮助。