qq_30906791的博客

前言 这里是本人学习时简单记录的笔记，可供参考，学习GRID网格请直接查看MDN原文链接. 网格系统真强大！！！强大的东西，学起来也激动，轻松实现强大的布局 CSS Grid Layout是用于Web的二维布局系统。 它使您可以按行和列对内容进行布局，并具有许多使构建复杂布局简单明了的功能。 本文将为您提供开始布局页面所需的全部知识。 什么是网格布局？ 网格是水平线和垂直线的集合，创建了一个图案，我们可以在该图案上排列我们的设计元素。 它们可以帮助我们创建设计，使元素在页面之间移动时不会跳动或改变宽度，从

参考 参考自MDN：链接: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout. 多栏布局规范为您提供了一种按列布局内容的方法，正如您在报纸上看到的那样 指定列数 .container { column-count: 3; } 指定列宽 .container { column-width: 2

定位介绍 定位使我们能够覆盖基本文档流行为，以产生有趣的效果。 ：position. 一共有五种不同的定位值：static，relative，fixed，absolute，sticky. 静态定位 静态定位是每个元素都会获得的默认位置-只是意味着“将元素放入文档布局流程中的正常位置-在这里看不到什么特别之处”。 静态定位的元素不受top，bottom，left和right属性的影响 静态定位是默认行为！始终根据页面的正常流进行定位 相对定位 相对定位的元素原本在标准文档流中的位置保留在原地，元素根据相对定位

为什么使用Float？ 最初，float属性是用于在文本块内浮动图像，它是在网页上创建多列布局的最常用工具之一。 随着flexbox和grid的出现，它现在又恢复了其原始用途。 浮动的背景知识 引入float属性是为了让web开发人员实现简单的布局，其中涉及到图像在文本列中浮动，文本环绕在文本列的左侧或右侧。你可能在报纸版面上看到的那种东西。 浮动通常用于创建具有浮动的多个信息列的整个网站布局，这样它们就可以并排排列（默认行为是，这些列的排列顺序与在源代码中出现的顺序相同——位于另一列的下方）。随着有更好的

为什么使用flexBox Flexbox是一种用于按行或列布局项目的一维布局方法。 物品可以弯曲以填充额外的空间，并收缩以适合较小的空间 简而言之，以前使用浮动和定位来布局的效果很有效，但是能够实现的效果有限，所以出现了flexBox 使用flexBox可以轻松地实现一些漂亮的布局，比如，等宽度填充长度、将内容块垂直居中放置在其父项中… 指定一个元素作为（Flexbox）灵活框 准备一个html文件：文件链接: flexbox0.html. 在这个html文件中，首先，我们需要选择将哪些元素布置为灵活的框。