微信小程序开发与运营教学课件作者李文奎第３章.ppt

下载文档

12
0
约5.86千字
约 40页
2019-10-13 发布于广东
举报
版权申诉
保障服务

微信小程序开发与运营教学课件作者李文奎第３章.ppt

1、本文档共40页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

图３－５　行内元素返回图３－６　行内块元素返回图３－１２　ｆｌｅｘ布局模型返回表３－１　ｆｌｅｘ容器支持的属性返回图３－１３　ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ示例返回图３－１４　ｆｌｅｘ－ｗｒａｐ示例返回图３－１５　ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ示例返回图３－１７　ａｌｉｇｎ－ｃｏｎｔｅｎｔ示例返回表３－２　容器内项目属性返回 * 第３章　页面布局３.１　盒子模型３.２　块级元素与行内元素３.３　浮动与定位３.４　ｆｌｅｘ布局返回３.１　盒子模型微信小程序的视图层由ＷＸＭＬ和ＷＸＳＳ组成。其中, ＷＸＳＳ (ＷｅｉＸｉｎＳｔｙｌｅＳｈｅｅｔｓ) 是基于ＣＳＳ拓展的样式语言, 用于描述ＷＸＭＬ的组成样式, 决定ＷＸＭＬ的组件如何显示。ＷＸＳＳ具有ＣＳＳ的大部分特性, 因此, 本章将重点讲解ＣＳＳ中的布局相关内容。在页面设计中, 只有掌握了盒子模型以及盒子模型的各个属性和应用方法, 才能轻松控制页面中的各个元素。盒子模型就是我们在页面设计中经常用到的一种思维模型。在ＣＳＳ中, 一个独立的盒子模型由内容(ｃｏｎｔｅｎｔ)、内边距(ｐａｄｄｉｎｇ)、边框(ｂｏｒｄｅｒ)和外边距( ｍａｒｇｉｎ) ４个部分组成, 如图３－１所示。下一页返回３.１　盒子模型此外, 对ｐａｄｄｉｎｇ、ｂｏｒｄｅｒ和ｍａｒｇｉｎ可以进一步细化为上、下、左、右４个部分, 在ＣＳＳ中可以分别进行设置, 如图３－２所示。图中各元素的含义如下: ■ ｗｉｄｔｈ和ｈｅｉｇｈｔ　内容的宽度和高度。 ■ ｐａｄｄｉｎｇ－ｔｏｐ、ｐａｄｄｉｎｇ－ｒｉｇｈｔ、ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ和ｐａｄｄｉｎｇ－ｌｅｆｔ　上内边距、右内边距、底内边距和左内边距。 ■ ｂｏｒｄｅｒ－ｔｏｐ、ｂｏｒｄｅｒ－ｒｉｇｈｔ、ｂｏｒｄｅｒ－ｂｏｔｔｏｍ和ｂｏｒｄｅｒ－ｌｅｆｔ　上边框、右边框、底边框和左边框。上一页下一页返回３.１　盒子模型 ■ ｍａｒｇｉｎ－ｔｏｐ、ｍａｒｇｉｎ－ｒｉｇｈｔ、ｍａｒｇｉｎ－ｂｏｔｔｏｍ和ｍａｒｇｉｎ－ｌｅｆｔ　上外边距、右外边距、底外边距和左外边距。因此, 一个盒子实际所占有的宽度(高度) 应该由“内容” ＋ “内边距” ＋ “边框”＋ “外边距” 组成。ＣＳＳ中的布局都基于盒子模型, 不同类型的元素对盒子模型的处理不同。上一页返回３.２　块级元素与行内元素元素按显示方式分为块级元素、行内元素和行内块元素, 它们的显示方式由ｄｉｓｐｌａｙ属性控制。３.２.１　块级元素块级元素默认占一行高度, 一行内通常只有一个块级元素(浮动后除外), 添加新的块级元素时, 会自动换行, 块级元素一般作为盒子出现。块级元素的特点如下: (１) 一个块级元素占一行。 (２) 块级元素的默认高度由内容决定, 除非自定义高度。 (３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度。下一页返回３.２　块级元素与行内元素 (４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。 (５) 块级元素可以容纳块级元素和行内元素。ｖｉｅｗ/ 组件默认为块级元素, 使用ｖｉｅｗ/ 组件演示盒子模型及块级元素的示例代码如下: 上一页下一页返回３.２　块级元素与行内元素显示效果如图３－４所示。上一页下一页返回３.２　块级元素与行内元素３.２.２　行内元素行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。将一个元素的ｄｉｓｐｌａｙ属性设置为ｉｎｌｉｎｅ后, 该元素即被设置为行内元素。行内元素的特点如下: (１) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。 (２) 行内元素内不能放置块级元素, 只级容纳文本或其他行内元素。 (３) 同一块内, 行内元素和其他行内元素显示在同一行。上一页下一页返回３.２　块级元素与行内元素ｔｅｘｔ/ 组件默认为行内元素, 使用ｖｉｅｗ/ 及ｔｅｘｔ/ 组件演示盒子模型及行内元素的示例代码如下: 显示效果如图３－５所示。上一页下一页返回３.２　块级元素与行内元素３.２.３　行内块元素当元素的ｄｉｓｐｌａｙ属性被设置为ｉｎｌｉｎｅ－ｂｌｏｃｋ时, 元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下