创造100% 自适应css布局的行之有效的方法

要创造一个100%自适应的CSS布局，通常需要遵循以下几个步骤：

1. 使用流式布局

最简单的方法是使用流式布局（也称为流式设计）。在流式网格中，网站的布局从一定宽度开始，并根据浏览器的大小而发生变化。CSS中包含两个最常用的长度单位：px（像素）和%。像素（px）是固定的长度单位，而百分比（%）是相对于父元素的长度。因此，您可以将网格的宽度设置为百分比，这样当浏览器窗口更改大小时，您的布局也会相应更改。

.container {
  width: 80%;
  margin: 0 auto;
}

在这个例子中，容器的宽度为80%。这意味着容器的宽度将取决于页面宽度的百分之80。margin: 0 auto; 可以将容器居中。

2. 使用Flexbox

CSS3中引入了Flexbox（弹性盒子）布局。这是Web设计中最常用的自适应布局技术之一。Flexbox容器可以根据内容进行自适应。以下是Flexbox布局的一个示例：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

在这里，.container被定义为Flexbox容器。display: flex;将其设置为Flexbox容器。flex-wrap: wrap;表示当容器的空间不足时，flex子元素可以拆分为多行。 justify-content: space-between;和 align-items:center; 则是定义了flex子元素在主轴和侧轴上的排布方式。

示例

这里有两个使用Flexbox布局的网站示例：

1. CSS Tutorial

CSS-Tricks网站利用自适应设计来展示自己的CSS教程，其中包含了许多实用的示例和技巧。该站点使用了流式布局，同时还使用了Flexbox来实现响应式设计。

1. Smashing Magazine

Smashing Magazine网站是Web设计和开发方面的权威网站。该站点利用Flexbox布局和其他响应式设计技术来创建自适应设计。

以上就是创造100%自适应的CSS布局的完整攻略。当然，这只是入门级别的技巧，如果你想获得更多的技巧和实践经验，请继续学习更多的CSS布局技术。