布局技术

主要布局技术如下：

• 浮动（Float）: 最初用于文本环绕图像，但后来被用于布局。通过float属性，元素可以向左或向右移动，直到它的外边缘接触到包含框或另一个浮动元素的边缘。

• 定位（Positioning）: 包括绝对定位（absolute）、相对定位（relative）、固定定位（fixed）和粘性定位（sticky）。这些属性允许元素相对于其正常位置或其包含元素进行定位。

• 显示属性（Display）: 如block、inline、inline-block等，控制元素如何显示以及它们如何布局。

• 弹性盒子布局（Flexbox）: 一种现代的布局模式，使得在各种大小的屏幕上对元素进行灵活排列变得更加简单。通过display: flex属性，可以轻松控制轴线、方向、对齐等。

• 网格布局（Grid）: CSS网格布局是一个二维的布局系统，允许创建复杂的布局结构，提供行和列的布局控制。通过display: grid启用，并通过网格线、网格区域等进行布局控制。

 

浮动（Float）

CSS中的float属性是一个用于实现元素的浮动布局的属性。当你对一个元素应用float属性时，它会脱离正常的文档流，并向指定的方向移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘为止。

float属性主要有以下几个值：

1. left：元素向左浮动。
2. right：元素向右浮动。
3. none：默认值，元素不浮动，并会显示在其在文档流中的正常位置。
4. inherit：继承父元素的float属性。

使用float时通常需要注意以下几点：

• 浮动元素会影响其周围元素的布局。非浮动元素可能会围绕浮动元素排列。
• 浮动可能导致父元素高度塌陷，因为浮动元素不再占据正常的文档流空间。这通常通过清除浮动（使用clear属性）来解决。
• 在现代网页布局中，float用得较少，Flexbox和Grid布局提供了更灵活和强大的布局选项。

定位（Positioning）

1. 静态定位（Static Positioning）:

   • 默认方式

2. 相对定位（Relative Positioning）:

   • 元素首先按照静态定位放置，然后相对于其正常位置进行偏移。
   • 可以使用top, bottom, left, right属性来指定偏移量。
   • 元素仍然占据其在文档流中的空间。

   • 

      

3. 绝对定位（Absolute Positioning）:

   • 元素脱离正常文档流，相对于最近的已定位（非static）祖先元素进行定位。不动了
   • 使用top, bottom, left, right属性来指定位置。
   • 会覆盖

   • 

      

   • 

   •  

     

   •  

     <template>
       <div class="container">
         这是一个普通的容器。
         <div class="absolute-box">
           这是一个绝对定位的盒子。
         </div>
       </div>
     </template>
     
     <script>
     export default {
       name: 'AbsolutePositioningDemo'
     }
     </script>
     
     <style>
     .container {
       border: 1px solid black;
       padding: 20px;
       width: 300px;
       height: 300px;
     }
     
     .absolute-box {
       position: absolute;
       top: 50px;
       left: 50px;
       border: 1px solid red;
       padding: 10px;
     }
     </style>
     

      

      

      

4. 固定定位（Fixed Positioning）:

   • 类似于绝对定位，但是元素是相对于浏览器窗口进行定位的。
   • 即使页面滚动，元素也会保持在相同的位置。
   • 使用top, bottom, left, right属性来指定位置。
   • 元素不占据文档流中的空间。

   • 

      

5. 粘性定位（Sticky Positioning）:

   • 是相对定位和固定定位的混合体。
   • 元素根据正常文档流定位，但当页面滚动到达某个阈值时（如top设置的值），元素会像固定定位那样固定在页面上。
   • 使用top, bottom, left, right属性来指定阈值

显示属性（Display）

1. none:

   • 元素不会被显示，完全从文档流中移除。
   • 元素及其子元素都不会渲染，且不占据任何空间。

2. block:

   • 元素会显示为块级元素。
   • 可以设置宽度、高度、边距和填充。

   • 

      

3. inline:

   • 元素会显示为内联元素。
   • 不能设置宽度和高度。

4. table, table-row, table-cell等:

   • 使元素表现得类似于HTML表格中的<table>, <tr>, <td>等标签。

弹性盒子布局（Flexbox）

主要处理一维布局（行或列）

display: flex; 时，该元素变成了一个弹性容器，其直接子元素则成为弹性项目（flex items）

对齐：

justify-content（沿主轴对齐）

1. flex-start：项目被对齐到容器的起始线。这是默认值，项目会排列在容器的开始处。

2. flex-end：项目被对齐到容器的结束线。项目会挤在容器的末端。

3. center：项目居中对齐。项目会集中在容器的中间。

4. space-between：项目之间的空间相等。第一个项目在容器的开始处，最后一个项目在容器的末端，其余项目则平均分布在它们之间。

5. space-around：项目周围的空间相等。每个项目两侧的空间相等，所以项目之间的空间是项目与容器边缘空间的两倍。

6. space-evenly：所有项目和边缘之间的空间都相等。这意味着每个项目之间的空间与项目与容器边缘的空间相同。

 

align-items（沿交叉轴对齐）

1. flex-start：项目被对齐到容器的交叉轴起始线。项目将放置在容器交叉轴的开始处。

2. flex-end：项目被对齐到容器的交叉轴结束线。项目将放置在容器交叉轴的末端。

3. center：项目在交叉轴上居中对齐。项目将在容器的中间沿交叉轴对齐。

4. baseline：项目在容器的基线上对齐。所有项目的文本基线将对齐。

5. stretch：如果项目未设置固定高度（或宽度，取决于交叉轴的方向），它们将扩展以占据容器的整个交叉轴空间。这是默认值。

 

方向

 

 

网格布局（Grid）

处理二维布局，同时处理行和列

行和列：用来创建空间内容器的多少

固定大小的列：

grid-template-columns: 100px 200px 300px;

　　

百分比大小的列：

grid-template-columns: 20% 30% 50%;

　　

使用 fr 单位：

grid-template-columns: 1fr 2fr 1fr;

　　

重复的列：

grid-template-columns: repeat(4, 1fr);

　　

自动布局列：

grid-template-columns: auto auto auto;

　　

跨行或跨列

 

 

ENG FRN