页面布局课堂总结

m0_74079618

已于 2024-04-22 19:31:54 修改

阅读量1.4k

点赞数 52

文章标签：微信小程序

于 2024-03-15 12:02:47 首次发布

本文链接：https://blog.csdn.net/m0_74079618/article/details/136684910

版权

3.1盒子模型

什么是盒子模型？

"盒子模型"通常指的是在网页设计和开发中使用的CSS盒模型（Box Model）。CSS盒模型是用于布局和设计网页元素的一种方式，它将每个HTML元素表示为一个矩形的"盒子"，并包括内容、内边距（padding）、边框（border）和外边距（margin）这四个主要部分。

具体来说，CSS盒模型的四个部分分别是：

内容（Content）： 盒子中包含的实际内容，比如文本、图像等。
内边距（Padding）： 包围在内容周围的透明区域，内边距在内容和边框之间。
边框（Border）： 内边距的外边缘，是盒子的边界。
外边距（Margin）： 盒子外部的透明区域，用于控制元素之间的间距。

在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键

3.2块级元素和行内元素

元素可以分为两种主要类型：块级元素和行内元素。

块级元素：
- 块级元素通常以新的行开始，并占据其父元素（容器）的整个宽度（除非另有规定）。
- 块级元素可以包含其他块级元素或行内元素，也可以包含文本内容。
行内元素：
- 行内元素通常在同一行内显示，并且仅占据它们所包含内容的宽度。
- 行内元素不能包含块级元素，只能包含其他行内元素或文本内容。

示例 :

3.3浮动与定位

浮动和定位是常用的布局技术，用于控制元素在页面中的位置。

浮动（Float）：

浮动是一种布局技术，通过将元素从正常的文档流中移动，使其向左或向右浮动到其容器的左侧或右侧。
浮动元素会尽可能向左或向右移动，直到它的边缘碰到容器边缘或另一个浮动元素。
浮动元素会导致其父元素的高度塌陷，需要清除浮动来修复这个问题。

定位（Positioning）：

定位是指定元素在文档流中的准确位置的一种方式。

代码示例

运行结果

box1,2,3元素左浮动

<view>box1,box2,box3 float</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1 leftfloat</view>
<view style="border: 1px solid #f00;padding:5px">
<view style="float:left;border:1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1,box2 leftfloat</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
</view>

可以看到,box3左浮动后,父元素的边框未能包裹box3元素,可以清除浮动来实现

<view>box1 box2 float box3 clearleftfloat</view>
<view style="border: 1px solid #0f0;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
<view style="clear: left;border: 1px solid #0f0;">box2</view>
</view>
<view>box1 box2 box3 leftfloat 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px" class="clear-float" >
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
<view style="float: left;border: 1px solid #0f0;">box3</view>
</view>

浮动布局无法对元素的位置进行精确的控制,可以通过postition属性实现页面的精确定位

首先引入三个未定义的元素

<!--三个元素均为定位 static-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>

然后对1,2,3进行元素相对定位,示例代码如下

<!--box2元素相对定位 relative top:30px left:30px-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

同理,绝对定位与固定定位只需引入position:relative 与 position:fixed即可

3.4 flex布局

Flex布局是CSS3中引入的一种弹性盒子布局模型，它提供了一种更加简单、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。Flex布局的主要特点包括以下两点：容器属性和项目属性

容器属性

微信小程序中的 Flex 容器支持以下属性：

display: 定义元素的显示方式，可以设置为 flex 或 inline-flex。
flex-direction: 定义主轴的方向，可以是 row（水平方向）、row-reverse（反向水平方向）、column（垂直方向）、column-reverse（反向垂直方向）。
flex-wrap: 定义是否允许子元素换行，可以是 nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。
justify-content: 定义在主轴上对齐子元素的方式，可以是 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐）、space-around（均匀分布）。
align-items: 定义在交叉轴上对齐子元素的方式，可以是 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸填充）。
align-content: 定义多根轴线的对齐方式，仅在有多根轴线时生效，可以是 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐）、space-around（均匀分布）、stretch（拉伸填充）。

示例演示

display: 定义元素的显示方式，可以设置为 flex 或 inline-flex。

<view class="container">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
</view>

/* index.wxss */
.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

flex-direction: 定义主轴的方向，可以是 row（水平方向）、row-reverse（反向水平方向）、column（垂直方向）、column-reverse（反向垂直方向）。

<view class="container">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

具体化

演示的是column和row

lex-wrap: 定义是否允许子元素换行，可以是 nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）

<view class="container">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

justify-content: 定义在主轴上对齐子元素的方式，可以是 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐）、space-around（均匀分布）。

xml代码是一样的不作演示

/* index.wxss */
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

图像化居中演示

align-items: 定义在交叉轴上对齐子元素的方式，可以是 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸填充）。

/* index.wxss */
.container {
  display: flex;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

图像化baseline

align-content: 定义多根轴线的对齐方式，仅在有多根轴线时生效，可以是 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐）、space-around（均匀分布）、stretch（拉伸填充）。

/* index.wxss */
.container {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

项目属性

flex 布局的项目属性包括：

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex：是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖父容器的 align-items 属性。

示例演示

六种属性的示例代码按照顺序统一放一起,共用一个css代码

<view class="container">
  <view class="item" style="flex-grow: 1;">Item 1</view>
  <view class="item" style="flex-grow: 2;">Item 2</view>
  <view class="item" style="flex-grow: 1;">Item 3</view>
</view>

<view class="container">
  <view class="item" style="flex-shrink: 1;">Item 1</view>
  <view class="item" style="flex-shrink: 0;">Item 2</view>
  <view class="item" style="flex-shrink: 1;">Item 3</view>
</view>

<view class="container">
  <view class="item" style="flex-basis: 100px;">Item 1</view>
  <view class="item" style="flex-basis: 200px;">Item 2</view>
  <view class="item" style="flex-basis: auto;">Item 3</view>
</view>

<view class="container">
  <view class="item" style="flex: 1;">Item 1</view>
  <view class="item" style="flex: 2;">Item 2</view>
  <view class="item" style="flex: 1;">Item 3</view>
</view>

<view class="container">
  <view class="item" style="order: 2;">Item 1</view>
  <view class="item" style="order: 1;">Item 2</view>
  <view class="item" style="order: 3;">Item 3</view>
</view>

<view class="container">
  <view class="item" style="align-self: flex-start;">Item 1</view>
  <view class="item" style="align-self: center;">Item 2</view>
  <view class="item" style="align-self: flex-end;">Item 3</view>
</view>

.container {
  display: flex;
}

.item {
  background-color: lightblue;
  border: 1px solid blue;
  margin: 5px;
  padding: 10px;
}

m0_74079618

关注

52
点赞
踩
50

收藏

觉得还不错? 一键收藏
1
评论
页面布局课堂总结

"盒子模型"通常指的是在网页设计和开发中使用的CSS盒模型（Box Model）。CSS盒模型是用于布局和设计网页元素的一种方式，它将每个HTML元素表示为一个矩形的"盒子"，并包括内容、内边距（padding）、边框（border）和外边距（margin）这四个主要部分。盒子中包含的实际内容，比如文本、图像等。包围在内容周围的透明区域，内边距在内容和边框之间。内边距的外边缘，是盒子的边界。盒子外部的透明区域，用于控制元素之间的间距。
复制链接

扫一扫