美文网首页
《微信小程序开发从入门到实战》学习五

《微信小程序开发从入门到实战》学习五

作者: 阿宅白石 | 来源:发表于2023-11-10 23:10 被阅读0次

第二章、小程序的项目结构和开发基础

2.3.5 盒模型 

将wxl每个组件看作一个盒子,盒子都是由外边距margin,边框border、内边距padding和内容组成。

view组件没有外边距、边框、内边距,加上样式属性,可设置边距和边框

.box{color:green;margin:10rpx;border:1pxsolid#000000;padding:5rpx;}

默认情况下,组件宽度等于content区域宽度,组件高度等于content高度。如果对组件设置了确定的高度和宽度,为组件加padding,会使组件所占区域往外扩展。

将组件的box-sizing设置为border-box,组件宽度等于content区域宽度+左右边框宽度+左右padding宽度,对组件设置了padding,组件的content区域向内缩小,组件所占的区域并不变。

2.3.6 块级元素和行内元素

text组件是行内(inline)元素,view是块级(block)元素

行内元素能并排显示,块级不能

行内严肃不能设置宽高,块级能,没设置默认父级的100%

<view>view1</view>

<view>view2</view>

<text>txt1</text>   

<text>txt2</text>

希望修改块级元素或者行内元素,可对display组件样式属性进行设置。例如修改 text组件设置为块级元素:

text {display: block;}

相关文章

网友评论

      本文标题:《微信小程序开发从入门到实战》学习五

      本文链接:https://www.haomeiwen.com/subject/qvdkwdtx.html