第三章总结 ：页面布局 盒子模型

已于 2024-03-14 11:00:11 修改
阅读量759 收藏 9
点赞数 18
文章标签： 前端 javascript html 小程序
于 2024-03-14 09:59:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75833379/article/details/136657829
版权
本文详细介绍了小程序中的盒子模型，包括内容、内边距、边框和外边距，以及如何运用Flex布局进行灵活布局和对齐。通过实例展示了块级元素与行内元素、浮动与定位、以及flex布局的使用方法和属性设置。
摘要由CSDN通过智能技术生成
盒子模型介绍

小程序中的盒子模型是**用于布局和定位元素的基础模型，它包括内容、内边距、边框和外边距四个部分**。

具体来说，盒子模型的各个部分包括：

1. **内容（Content）**：这是盒子的核心部分，显示文本、图片等实际内容。内容区域的尺寸可以通过设置宽度（width）和高度（height）来定义。
2. **内边距（Padding）**：是指内容与边框之间的透明区域。可以通过WXSS的padding属性来设置内边距的大小。
3. **边框（Border）**：包围在内容和内边距之外的线型区域。可以设置边框的样式、宽度和颜色，通过border-style、border-width和border-color属性来进行设置。
4. **外边距（Margin）**：这是围绕在边框外面的透明区域，它决定了盒子与其他元素之间的距离。外边距的大小可以通过margin相关属性设置。

此外，在小程序中，任何一个容器都可以指定为Flex布局，这使得盒模型更加灵活。使用display: flex;可以启用一个容器的弹性布局特性。Flex布局提供了一种简便而强大的方式去处理项目中的布局问题，例如对齐、分布、空间分配等。

总的来说，了解和应用盒子模型对于小程序开发是非常重要的，它能够帮助开发者创建出既美观又符合设计规范的界面。 

图片示例：
块级元素与行内元素
块级元素实例图：

代码：


<!-- 每个元素占一行 -->
<view style ="border:1px solid #f00">块级元素1</view>
   <!-- 块元素的宽度等于父元素的宽度减去内外边距的宽度 -->
  <view style ="border:1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
   <!-- 块级元素的宽度高度自定义 -->
  <view style ="border:1px solid #00f;width:200px;height:80px">块级元素3</view>
   <!-- 块级元素的高度随内容决定，内容为文本元素 -->
  <view style ="border:1px solid #ccc;">
    <view style ="height: 60px;">块级元素4</view>
     <!-- 块级元素的高度随内容决定，内容为文本元素，块级元素的宽度为100px -->
  </view>
  <view style ="border:1px solid #f00;width: 100px;background-color: #ccc">父级元素高度随内容决定，内容为文本</view>
   <!-- 块级元素的高度随内容决定，内容为文本元素 -->
行内元素示例图：

代码：

 <view style="padding:20px">
   <text style="border: 1px solid #f00;">文本</text>
   <text style="border: 1px solid #0f0;margin:10px;padding: 5px;">文本2</text>
   <view style="border: 1px solid #00f;display: inline">块级元素设置为行内元素</view>一行显示不全，自动换行显示
   </view>
行内块元素示例图：

代码：

<view>
   元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素、行内元素和行内块元素</view>三种类型
   </view>
浮动与定位
元素浮动与清除

效果图实例：

代码：

<view>box1,box2,box3 没浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
   <view style="border: 1px solid #f0f;">box1</view>
   <view style="border: 1px solid #0f0;">box2</view>
   <view style="border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1左浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
    <view style="float: left;border: 1px solid #f0f;">box1</view>
   <view style="border: 1px solid #0f0;">box2</view>
   <view style="border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1 box2 右浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
   <view style="float: right;border: 1px solid #f0f;">box1</view>
   <view style="float: right;border: 1px solid #f0f;">box2</view>
   <view style="border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1,box2,box3 右浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
    <view style="float: right;border: 1px solid #f0f;">box1</view>
    <view style="float: right;border: 1px solid #f0f;">box2</view>
    <view style="float: right;border: 1px solid #f0f;">box3</view>
   </view>
   <view>box1,box2,左浮动box3 清除浮动</view>
   <view style="border: 1px solid #f00;padding: 5px;">
    <view style="float: left;border: 1px solid #f0f;">box1</view>
    <view style="float: left;border: 1px solid #f0f;">box2</view>
   <view style="clear: left;border: 1px solid #0f0;">box3</view>
   </view>
   <view>box1,box2,box3 左浮动 在父元素后添加一个空元素</view>
   <view style="border: 1px solid #f00;padding: 5px;"class="clearfloat">
    <view style="float: left;border: 1px solid #f0f;">box1</view>
    <view style="float: left;border: 1px solid #f0f;">box2</view>
    <view style="float: left;border: 1px solid #f0f;">box3</view>
   </view>
/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

.clearfloat::after{display: block;clear: both;height: 0;content: "";}
元素定位示例图

代码：
 

元素定位
<view style="position: relative;">
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(195, 15, 240);width:100px;height:100px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>
</view>


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



对 box1 box2 box3元素绝对定位 
<!--box2 元素绝对定位 absolute top:30px left:30px -->
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(235, 11, 149);width:100px;height:100px;position:absolute; left:30px;top:30px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>


对box1 box2 box3 元素固定定位
<!-- box2 固定定位 fixed top:30px left:30px -->
<view style="border: 1px solid #0f0;width:100px;height:100px">box1</view>
<view style="border: 1px solid rgb(228, 15, 61);width:100px;height:100px;position:fixed; left:30px;top:30px">box2</view>
<view style="border: 1px solid #0f0;width:100px;height:100px">box3</view>
flex 布局
flex布局介绍：

 flex布局是万维网联盟(World Wide Web Consortium，W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。 flex 是 flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
flex 布局主要由容器和项目组成，采用flex 布局的元素称为flex容器(flex container), flex 布局的所有直接子元素自动成为容器的成员，称为flex 项目(flexitem)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做crossstart,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。flex 布局模型 
设置 display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。

flex布局模型示例图：

容器属性：

flex容器支持的属性有7种
     属性名  |  功能
    display  |  指定元素是否为flex 布局
    flex - direction  |  指定主轴方向，决定项目的排列方式
    flex - wrap   |  定义项目如何换行(超过一行时)
    flex - flow  |  flex - direction和flex - wrap的简写形式
    justify - content  | 定义项目主轴上的对齐方式
    align -items  |  定义项目在交叉轴的对齐方式
    align - content  |  定义多根轴线的对齐方式

justify-content—flex-start——左对齐，默认值（a）

flex-end——右对齐（b）

center——居中（c）

space-between——两端对齐，项目之间的间隔都相等（d）

space-around——每个项目两侧的间隔都相等（e）

效果图展示：

项目属性：

代码：

<view class="cont1">
    <view class="item">1</view>
    <view class="item">2</view>
    <view class="item">3</view>
    <view class="item">4</view>
</view>
<view class="cont1">
<view class="item" style="order: 1">1</view>
<view class="item" style="order: 3">2</view>
<view class="item" style="order: 2">3</view>
<view class="item">4</view>
</view>

.cont1{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.item{
    background-color:#ccc;
    border: 1px solid #f00;
    height: 100px;
    width: 50px;
    margin: 2px;
}

.item2{
    height: 80px;
}

.item3{
    display: flex;
    height:  50px;
    align-items: flex-end;
}

.item4{
    height: 120px;
}

SKY-song
关注
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2242
行内元素
初识HTML（五）进阶：CSS盒子模型、页面布局
Simple子夜
03-13 1万+
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容（文本、或者图片、或者其它标签）。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 标准的W3C盒子模型： 元素的宽度和高度 重点: 当你指定一个 CSS 元素的宽度和高度属性时
css布局模型
weixin_30257433的博客
06-17 79
1，清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在...
页面布局 | 盒模型
zljiaa的博客
08-15 263
CSS框模型（译者注：也被称为“盒模型”）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。 文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。 width 和 heigh...
布局模型
bjnihao的专栏
07-07 346
在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）模型有三种形式：1、绝对定位(position: absolute)： 相对于父块而言，如果没有就是相对body元素 定位元素加入absolute 2、相对定位(position: relative) 相对于元素之前所在的位置而言 参照定位必须加入relative
css页面布局基础盒模型
yangtjh的博客
07-31 376
css
CSS中的三种布局模型
Matt_You的博客
05-18 1567
三种布局模型： 1、流动模型（Flow）； 2、浮动模型（Float）； 3、层模型（Layer）； 流动模型： 流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。 实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2526
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
HTML5+CSS3网页设计-第六章 盒子模型.pptx
最新发布
12-21
在第六章“HTML5+CSS3网页设计-第六章 盒子模型”中，我们将深入探讨这些概念。 首先，要设置一个`<li>`标签的下边框为1px的蓝色虚线，可以使用以下CSS代码： ```css li { border-bottom: 1px dashed blue; } ``` ...
CSS（四）|页面布局之盒子模型
Better_Xing的博客
11-25 419
01.盒子模型 1.1看透网页布局的本质 1.2盒子模型（Box Modle）组成 1.3边框（border） 1.4表格的细线边框 第一个图没有合并相邻的边框 1.5边框会影响盒子实际大小 1.6内边距（padding） 案例：新浪导航案例-paddind影响盒子好处 案例：小米导航案例修改-padding影响盒子大小计算...
html页面布局模型,css布局模型有哪些？
weixin_39525933的博客
06-03 602
css布局模型有哪些？下面本篇文章给大家介绍一下css的布局模型。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css三种基本网页布局模型：流动模型(flow)：元素没有转换类型，没有设置float的默认显示状态浮动模型(float)：通过给元素设置float进行页面布局层模型：语法：position:static|absolute | relative |fixed流动模型(默...
CSS中的几种布局模型
风中木叶
12-31 556
CSS中的几种布局模型
玩转页面布局与CSS盒子模型解析
涤生大数据
07-22 1136
1.页面布局概述 布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种： 1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。 2、HTML+CSS布局(DIV+CSS)：主要...
Css三种基本的布局模型包含层模型的三种定位
溯缔的博客
02-01 1112
在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型(Float)、层模型(Layer)。 流动模型 流动模型是默认的网页布局模式。 具有两个典型特征：1、块级元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块级元素的宽度都为100%。2、内联元素都会在所处元素内从左到右水平分布显示 浮动模型 float：left;float:right
页面布局的方式有哪些？
热门推荐
最爱谭先森的博客
07-08 1万+
常见的页面布局方式有六种：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 （1）、双飞翼布局 经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点： a、三列布局，中间宽度自适应，两边定宽； b、中间栏要在浏览器中优先展示渲染； c、允许任意列的高度最高； d、要求只用一个额外的DIV标签； e、要求用最简单的CSS、最少的HACK...
前端:css页面布局总结
lululul123的博客
12-05 7048
W3C标准：是万维网制定的一系列标准，包括结构化标准语言（html、xml），表现 标准语言（css），行为标准语言（DOM，ECMAScript<javascript>)组成。这个标准倡 要将结构，样式，行为分离。 在网页制作中，面对设计图，网页制作人员一般要遵循的原则： 先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化， 然后在考虑布局和表现形式。 今天主要对css的页面布局做过总结： css的页面布局模型分为三大种模式： （1）流动模型（标准文档流）（2）浮动模型（定位）
WEB入门.七 CSS布局模型
张晨光老师的播客
02-17 4503
学习内容标准文档流流动模型（flow model）浮动模型（float model）CSS基本布局能力目标理解标准文档流使用流动模型实现页面布局使用浮动模型实现页面布局掌握常用CSS布局本章简介上一章节讲解了盒子模型以及页面元素定位，理解了绝对定位、相对定位、包含块三者之间的关系以及应用场合。例如：绝对定位的页面元素会脱离标准文档流，通过指定的坐标位置进行定位；相对定位则不脱离标准文档流，只是
页面布局与css盒子模型
晨露
01-23 1179
六大方向： 页面布局 css盒模型 DOM事件 HTTP协议 面向对象 原型链 难度提升：通信，安全（web安全，xss），算法 页面布局： 浮动，定位，flexBox , table-cell, 网格布局（grid）【兼容性不好】 关于浮动和定位很简单，就不写了。 html结构: section class="layout flex"> div cl
HTML与CSS学习：页面布局与盒子模型
首先，我们要理解的是“盒子模型”，这是网页布局的基础。盒子模型包括四个主要部分：margin（外边距）、border（边框）、padding（内边距）以及width和height（内容区域的宽和高）。理解这个模型可以帮助我们精确地...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值