首页 > 其他分享 >第三章 页面布局 总结

第三章 页面布局 总结

时间:2024-03-13 17:32:13浏览次数:31  
标签:总结 浮动 行内 第三章 块级 元素 box2 box1 页面

1、盒子模型

       微信小程序的视图层由WXML和WXSS组成。其中,WXSS (WeiXin Style Sheets)是基
于CSS拓展的样式语言,用于描述 WXMI的组成样式,决定 WXMI的组件如何显示。WXSS 具有CSS 的大部分特性。

       在页面设计中,只有掌握了盒子模型以及盒子模型的各个属性和应用方法,才能轻松控制页面中的各个元素。

      盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中,一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin) 4个部分组成

盒子模型结构

 

此外,对padding、border和margin可以进一步细化为上、下、左、右4个部分,在CSS中可以分别进行设置。

盒子模型元素 

图中的元素的含义如下:

【1】:width height:内容的宽度与高度

【2】:padding-toppadding-rightpadding-bottom padding-left :上内边距、右内边距、下内边距与左内边距

【3】:border-topborder-rightborder-bottom border-left:上边框、右边框、下边框与左边框

【4】: margin-topmargin-rightmargin-bottommargin-left:上外边距、右外边距、下外边距与左外边距

2、块元素和行元素

         元素按显示方式分为块级元素行内元素行内块元素,它们的显示方式由display属性控制。

1、块级元素

        块级元素默认占一行高度,一行内通常只有一个块级元素(浮动后除外),添加新的块
右级元素时,会自动换行,块级元素一般作为盒子出现。块级元素的特点如下:
       (1)一个块级元素占一行。

       (2)块级元素的默认高度由内容决定,除非自定义高度。

       (3)块级元素的默认宽度是父级元素的内容区宽度,除非自定义宽度。

       (4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。

       (5)块级元素可以容纳块级元素和行内元素。

      <view/>组件默认为块级元素,使用<view/>组件演示盒子模型及块级元素的示例代码如下:

块级元素
<view style="border: 1px solid#f00;">块一</view>

<view style="border: 1px solid#0f0;margin: 15px; padding: 20px;">块二</view>

<view style="border: 1px solid#00f;width: 200px; height: 80px;">块三</view>

<view style="border: 1px solid#ccc;">
<view style="height: 60px;">
块四
</view>
</view>

<view style="border: 1px solid#f00;width: 100px;background-color: #ccc;">
父级元素高度随内容决定,内容为文本
</view>

运行结果:

 

2、行内元素


       行内元素,不必从新一行开始,通常会与前后的其他行内元素显示在同一行中,它们不占有独立的区域,仅靠自身内容支撑结构,一般不可以设置大小,常用于控制页面中文本的splay
样式。将一个元素的display属性设置为inline后,该元素即被设置为行内元素。

行内元素的特点如下:
       (1)行内元素不能被设置高度和宽度,其高度和宽度由内容决定。

       (2)行内元素内不能放置块级元素,只级容纳文本或其他行内元素。

       (3)同一块内,行内元素和其他行内元素显示在同一行。

       <texI/>组件默认为行内元素,使用<view/ >及<text/>组件演示盒子模型及行内元素的示例代码如下:

行内元素
<view style="padding: 20px;">
<text style="border: 1px solid #f00;">文本一</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本二</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置行内元素</view>
</view>

运行结果:

3、行内块元素

       当元素的 display属性被设置为inline-block时,元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:
 

行内块元素
<view>
元素显示方式的<view style="display:inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素、行内元素、行内块元素
</view>三种元素
</view>

运行结果:

3、浮动与定位

1、元素浮动

       元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制,移到其父元素中指定位置的过程。在CSS中,通过float属性来定义浮动,其基本格式如下:

{float:none|left|right;}

其中:none——默认值,表示元素不浮动

           left——元素向左浮动

           right——元素向右浮动

实列代码如下:

<-何弃疗呀->
浮动
<view>box1、box2、box3未浮动</view>
<view style="border: solid 1px #f00;padding: 5px;">
  <view style="border: solid 1px #f00;">box1 </view>
  <view style="border: solid 1px #0f0;">box2</view>
  <view style="border: solid 1px #0f0;">box3 </view>
</view>
<view>box1左浮动</view>
<view style="border: solid 1px #f00;padding: 5px;">
  <view style="float: left; border: solid 1px #f00;">box1 </view>
  <view style="border: solid 1px #0f0;">box2</view>
  <view style="border: solid 1px #0f0;">box3 </view>
</view>
<view>box1、box2左浮动</view>
<view style="border: solid 1px #f00;padding: 5px;">
  <view style="float: left; border: solid 1px #f00;">box1 </view>
  <view style="float: left; border: solid 1px #0f0;">box2</view>
  <view style="border: solid 1px #0f0;">box3 </view>
</view>
<view>box1、box2、box3左浮动</view>
<view style="border: solid 1px #f00;padding: 5px;">
  <view style="float: left; border: solid 1px #f00;">box1 </view>
  <view style="float: left; border: solid 1px #0f0;">box2</view>
  <view style="float: left; border: solid 1px #0f0;">box3 </view>
</view>
<view>box3右浮动</view>
<view style="border: solid 1px #f00;padding: 5px;">
  <view style="border: solid 1px #f00;">box1 </view>
  <view style="border: solid 1px #0f0;">box2</view>
  <view style=" float: right; border: solid 1px #0f0;">box3 </view>
</view>

运行结果、如图所示:

 

 2、元素清除

        由于浮动元素不在占用原文档流的位置,因此它会对页面中其他元素的排列产生影响。在CSS中,clear属性用于清除浮动元素对其他元素的影响,其基本格式如下:

{clear:left|right|both|none}

其中,left——清除左边浮动的影响,也就是不允许左侧有浮动元素

           right——清除右边浮动的影响,也就是不允许右侧有浮动元素

           both——

           none——

实列代码如下:

清除浮动
<view>box1、box2左浮动、box3清除左浮动</view>
<view style="border: solid 1px #f00;padding: 5px;">
  <view style="float: left; border: solid 1px #f00;">box1 </view>
  <view style="float: left; border: solid 1px #0f0;">box2</view>
  <view style="clear: left; border: solid 1px #0f0;">box3 </view>
</view>

运行结果、如图所示:

另外,还可以在父元素外添加一个空元素,实现父元素包裹浮动元素。代码如下:

<view>box1、box2、box3:左浮动,在父元素后添加一个空元素</view>
<view style="border: solid 1px #f00;padding: 5px; "class="clearfloat">
  <view style="float: left; border: solid 1px #f00;">box1 </view>
  <view style="float: left; border: solid 1px #0f0;">box2</view>
  <view style="float: left; border: solid 1px #0f0;">box3 </view>
</view>

 运行结果、如图所示:

4、flex布局

5、本章小结

标签:总结,浮动,行内,第三章,块级,元素,box2,box1,页面
From: https://blog.csdn.net/weixin_74842199/article/details/136616288

相关文章

  • 七、hive、hdfs、hbase查询总结
    【hive】1.连接hive:hive2.hive中查询:同mysql,如select* fromtablename;  注意:hive中的操作一定要加分号;否则语句一直不结束 【hdfs】1.查询文件或目录hdfsdfs-ls目录名  如:hdfsdfs-ls/winhadoop/org/ipva_third_data/2024/03/07查看根目录hdfsdfs......
  • C++ cout的使用总结
    cout是C++中ostream类型的对象cout是C++中ostream类型的对象,该类被封装在<iostream>库中,该库定义的名字都在命名空间std中,所以cout全称是std::cout。1、cout支持多种数据类型,如int、float、double、char、string等,它们都会被自动转换成字符串进行输出。#includ......
  • 关于JSON转换总结
    关于JSON转换总结前言JSON是JavaScript数据类型中的一个子集,目前主流的浏览器都使用了通用的JavaScript引擎组件,所以在解析JSON格式时具有良好的兼容性。这便是“JavaScriptObjectNotation”(缩写为JSON)诞生的由来。一些常用的JSON解析依赖库有阿里的fastjson和国外......
  • [C++]C++函数指针总结
    指针的概念指针是一个特殊的变量,它里面存储的数值被解释成为内存里的一个地址。要搞清一个指针需要搞清指针的四方面的内容:指针的类型,指针所指向的类型,指针的值或者叫指针所指向的内存区,还有指针本身所占据的内存区。让我们分别说明。先声明几个指针放着做例子:例一:int*......
  • MongoDB学习总结
    一、数据库基础命令1、关于database的基础命令查看所有的数据库:showdbs/showdatabases切换数据库:usedb_name查看当前的数据库:db删除当前的数据库:db.dropDatabase()2、关于集合的基础命令不手动创建集合:向不存在的集合中第一次加入数据时,集合会被创建出来手动创建集合......
  • SpringBoot Controller接收参数的常用方式总结
    原生的HttpServletRequest可和其他注解配合使用,是内置对象,是整个请求可获取到所有的数据请求路径参数@PathVariable请求路径参数例如url/{id},则获取id参数。@PathVariabel(name="xx")@RequestParam例如url?name=xxx。@RequestParam(name="xx")Body参数@Req......
  • 一个月内通过软考高级系统架构设计师,如何复习?进度安排、备考资料买哪些?附22条备考经验
    前言        楼主2022年下半年参加计算机软考,高级系统架构师的考试;复习时间:2个月(在职复习,真正有效时间<1个月);以下是楼主分数情况:综合知识45分;案例分析56分;论文58分。论文和案例均高分通过。    本文分享楼主复习高级系统架构师的考试的经验,备考建议,分享复......
  • (建议收藏)大牛总结的二十二个电源研发问题
    问题一:我们小功率用到最多的反激电源,为什么我们常常选择65K或者100K(这些频率段附近)作为开关频率?有哪些原因制约了?或者哪些情况下我们可以增大开关频率?或者减小开关频率?开关电源为什么常常选择65K或者100K左右范围作为开关频率,有的人会说IC厂家都是生产这样的IC,当然这也有原......
  • 动态缓存单个页面-vue3-实现思路
    状态管理定义-全局状态属性`keepNameArray``noKeepNameArray` (为数组)动态组件缓存设置<keep-alive:include="keepNameArray":exclude="noKeepNameArray"><component:is="Component"/></keep-alive>该文件获取keepNameArray和noKeepNameA......
  • ChatGPT提问技巧——总结提示
    ChatGPT提问技巧:总结提示摘要提示是一种允许模型生成给定文本的较短版本,同时保留其主要观点和信息的技术。具体做法是将较长的文本作为输入提供给模型,并要求它生成该文本的摘要。这项技术适用于文本摘要和信息压缩等任务。如何与ChatGPT一起使用:输入较长的文本,要求模......