CSS布局是前端开发中非常重要的一部分，掌握不同的布局技巧可以帮助我们实现各种复杂的页面布局。下面我将简要记录一些常用的CSS布局技巧及其应用场景，并且附上我的实操实践具体源代码。
-
浮动布局（Float Layout）：
- 应用场景：适用于实现多列布局，如新闻列表、产品展示等。
- 实操实践：使用
float属性将元素浮动到左侧或右侧，通过设置clear属性来清除浮动。 - 以下是一段实操代码片段，可以看到效果图和源代码
-
定位布局（Positioning Layout）：
- 应用场景：适用于实现绝对定位和相对定位的布局，如弹出框、悬浮菜单等。
- 实操实践：使用
position属性设置元素的定位方式，如absolute、relative等，通过设置top、right、bottom、left属性来控制元素的位置。
- 以下是一段实操代码片段，可以看到效果图和源代码
-
弹性盒子布局（Flexbox Layout）：
- 应用场景：适用于实现灵活的、自适应的布局，如导航菜单、响应式布局等。
- 实操实践：使用
display: flex将容器设置为弹性盒子，通过设置flex-direction、justify-content、align-items等属性来控制子元素的布局。 - 以下是一段实操代码片段，可以看到效果图和源代码
-
网格布局（Grid Layout）：
- 应用场景：适用于实现复杂的网格结构布局，如平铺式布局、响应式网格等。
- 实操实践：使用
display: grid将容器设置为网格布局，通过设置grid-template-columns、grid-template-rows等属性来定义网格的列数和行数，使用grid-column、grid-row等属性来控制子元素的位置。
-
响应式布局（Responsive Layout）：
- 应用场景：适用于实现适应不同屏幕尺寸的布局，如响应式网页设计。
- 实操实践：使用媒体查询（Media Queries）来根据不同的屏幕尺寸应用不同的样式，使用百分比单位和弹性盒子布局来实现自适应布局。
通过以上对于每种css的概念学习和应用了解，以及使用简单的小例子进行代码编写，可以基础分辨和掌握一些css布局技巧，我觉得这一方面还是非常具有实用性的。平时会更注重前端开发时运用的技巧，而不是简单的把标签堆砌。我认为实践更多技巧有助于开发的实现性和提高效率时间。
实际上还有很多其他的布局技巧和方法。在实际开发中，我们需要根据具体的需求和设计来选择合适的布局技巧，并结合CSS的其他属性和特性来实现所需的布局效果。同时，不同的布局技巧也可以结合使用，以达到更复杂的布局需求。
后记:时至今日，可用于现代 Web 布局的特性非常的多，可能大家最为熟知的还是 Flexbox，都觉得 Flexbox 布局可以一把梭。虽然说 Flexbox 布局已非常强大了，但他始终还是一维布局，对于一些二维布局的场景，他还是有很大的极限性。这也从侧面说明现代Web布局中或未来的布局方案中还是离不开 CSS Grid，毕竟到目前为止，他是唯一一个支持二维布局的技术
tailwindCSS 相当好用，五星好评，继续用。
然后我想讨论一下 为什么以前总是说样式要和 html 分离，现在却又使用 tailwindCSS 这样的一种形式让样式与 html 紧密的结合在了一起。
造成这种反转的原因是 react，vue ，angular 这些前端技术出现后前端组件化变得非常容易了。
样式分离的目的主要是为了复用和方便维护，但在组件化面前根本就不够打的。
反而像 vue 单文件组件这样的形式 html模板，css ，js 放在一起更方便修改
对于组件的样式而言采用嵌套的 css 选择器结构:.body > .heder {color:red}来设定样式是不如直接在模板内内联样式：
更方便维护的。然后内联样式又不如原子类简洁，tailwind 又是原子类的大成者。
页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。
常用的页面布局，其实就那么几个，只要掌握了它们，就能应对绝大多数常规页面。
这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行，有很大的学习价值，内容也很实用。
