1.盒子模型
微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXinSyle Sheets)是基干CSS拓展的样式语言，用于描述XML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。
盒子模型就是我们在页面设计中经常用到的种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border和外边距(margin)4个部分组成，如图所示。
此外，对 padding、border 和 margin 可以进一步细化为上、下、左、右4个部分，在 CSS中可以分别进行设置，如图所示。
图中各元素的含义如下:
width和 height 内容的宽度和高度。
padling -top、 padding -right, pedding- botom 和 padding- left上内边距、右内边距、底内边距和左内边距。
border -oap、 border -ight, border- bottom 和 border -left上边框、右边框、底边距、底内边距和左内边距。
mangin -top、 margin- right、 margin - bottom和 margin-lef上外边距、有外边和左边框。
因此，一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”+“边。
2.块级元素与行内元素
2.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">块级元素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>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc">父级元素高度随内容决定，内容为文本</view>
2.2行内元素
行内元素，不必从新一行开始，通常会与前后的其他元素显示在同一行中，它们占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。
练习代码
<view style="padding: 20px">
<text style="border: 1px solid #f00">文本1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px">文本2</text>
<view style="border: 1px solid #00f;display: inline">块级元素设置为行内元素</view>一行显示不全自动换行显示
</view>
2.3行内块元素
当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度，宽度，内边距和外边距，练习代码如下
<view>
元素显示方式的
<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px">
块级元素，行内元素和行内块元素
</view>
三种类型
</view>
3.浮动与定位
3.1元素浮动与清除
float属性定义浮动
none——默认值，表示不浮动
left——元素向左浮动
righ——元素向右浮动
练习代码如下：
<view>box1,box2,box3不浮动</view>
<view style="border: 1px solid #f00;padding: 5px">
<view style="border: 1px solid #0f0;padding: 5px">box1</view>
<view style="border: 1px solid #0f0;padding: 5px">box2</view>
<view style="border: 1px solid #0f0;padding: 5px">box3</view>
</view>
<view>box1,box2,box3左浮动</view>
<view style="border: 1px solid #f00;padding: 5px">
<view style="float:left;border: 1px solid #0f0;padding: 5px">box1</view>
<view style="float:left;border: 1px solid #0f0;padding: 5px">box2</view>
<view style="float:left;border: 1px solid #0f0;padding: 5px">box3</view>
</view>
<view>box1,box2,box3右浮动</view>
<view style="border: 1px solid #f00;padding: 5px">
<view style="float:right;border: 1px solid #0f0;padding: 5px">box1</view>
<view style="float:right;border: 1px solid #0f0;padding: 5px">box2</view>
<view style="float:right;border: 1px solid #0f0;padding: 5px">box3</view>
</view>
<view>box1左浮动,box2不浮动,box3右浮动</view>
<view style="border: 1px solid #f00;padding: 5px">
<view style="float:left;border: 1px solid #0f0;padding: 5px">box1</view>
<view style="float:none;border: 1px solid #0f0;padding: 5px">box2</view>
<view style="float:right;border: 1px solid #0f0;padding: 5px">box3</view>
</view>
clear属性用于清除浮动元素对于其他元素的影响
left——清除左浮动
right——清除右浮动
both——同时清除两边的浮动
none——不清楚浮动
<view>box1box2左浮动,box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px">
<view style="float:left;border: 1px solid #0f0;padding: 5px">box1</view>
<view style="float:left;border: 1px solid #0f0;padding: 5px">box2</view>
<view style="clear: left;border: 1px solid #0f0;padding: 5px">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 #0f0;padding: 5px">box1</view>
<view style="float:left;border: 1px solid #0f0;padding: 5px">box2</view>
<view style="float:left;border: 1px solid #0f0;padding: 5px">box3</view>
</view>
3.2元素定位
position属性可以实现对页面元素的精确定位
static——默认值
relative——相对定位
absolut——绝对定位
fixed——固定定位
元素定位
<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>
绝对定位
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
元素固定定位
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
3.flex布局
3.1容器属性
flex容器属性有七种
3.2项目属性
容器内的项目支持六个属性
1.order
<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>
2.flex-grow
flex-grow按照比例放大比例默认为0
<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">1</view>
<view class="item" style="flex-grow: 1;">2</view>
<view class="item" style="flex-grow: 2;">3</view>
<view class="item">4</view>
</view>
3.flex-shrink
用来定义缩小比例默认值为1
<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">1</view>
<view class="item" style="flex-shrink: 1;">2</view>
<view class="item" style="flex-shrink: 2;">3</view>
<view class="item" style="flex-shrink: 5;">4</view>
</view>
4.flex-basis
用来定位伸缩项目的基准值
<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">1</view>
<view class="item" style="flex-shrink: 150px;">2</view>
<view class="item" style="flex-basis: 202px">3</view>
<view class="item">4</view>
</view>
5.flex
flex属性是flex-grow.flex-shrink,flex-basis的简写
扫一扫
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
