- 微信小程序开发与运营
- 李文奎
- 488字
- 2020-08-26 14:13:30
3.1 盒子模型
微信小程序的视图层由WXML和WXSS组成。其中,WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言,用于描述WXML的组成样式,决定WXML的组件如何显示。WXSS具有CSS的大部分特性,因此,本章将重点讲解CSS中的布局相关内容。
在页面设计中,只有掌握了盒子模型以及盒子模型的各个属性和应用方法,才能轻松控制页面中的各个元素。
盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中,一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成,如图3-1所示。
图3-1 盒子模型结构
此外,对padding、border和margin可以进一步细化为上、下、左、右4个部分,在CSS中可以分别进行设置,如图3-2所示。
图3-2 盒子模型元素
图中各元素的含义如下:
■ width和height内容的宽度和高度。
■ padding-top、padding-right、padding-bottom和padding-left上内边距、右内边距、底内边距和左内边距。
■ border-top、border-right、border-bottom和border-left上边框、右边框、底边框和左边框。
■ margin-top、margin-right、margin-bottom和margin-left上外边距、右外边距、底外边距和左外边距。
因此,一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”+“边框”+“外边距”组成。例如:
此盒子所占宽度如图3-3所示。
图3-3 盒子的宽度
CSS中的布局都基于盒子模型,不同类型的元素对盒子模型的处理不同。