小程序UI布局前言盒相关的样式（css中display属性）display:blockinlinedisplay：inline-blockoverflow:hidden|scrolloverflow-x:前言

1.最近有小程序的开发需求，但又不是很急；就想着静下来系统的好好看看吧；之前都是浅显的知道点js、html；每次想好好学都不知道从何开始；想了想，我一个写iOS项目、学过android的程序员，接触这些也好几年了，总是觉得看看就会了，总觉得稍微看看就能写项目了；等到些项目的时候根本不能很熟练的使用，于是促使我还是系统的把知识点过一遍吧；虽然还是会不熟练，但好歹用的时候能找到也算；之前总觉得自己会，最近才发现自己对js、css、html5根本就不懂；于是只好结合上书、加上笔记心得来把基础只是过一遍了；今天下面是布局的一些知识；

2.对于写前端的、不管是Android、iOS、还是小程序、归根结底、区别大的就是UI的布局；像网络、数据存储、绘图、还是多媒体；这些东西只是在不同的平台上，不同的环境中有不同的写法；他们的核心思路还是变化不大的；但是对于UI来说，就不一样了；Android平台提供了好几个基础布局、利用xml来完成；UI组件在界面上的排列由这些基础布局决定；对于iOS来说，他的布局更是简单粗暴；所有的组件都可以添加子组件；跟Android相比，我觉得就是一个采用深度优先、一个是广度优先；那对于小程序来说又是啥呢；小程序首先要说一个，他的界面我们看到的，是通过webview渲染的，也就是浏览器；android、iOS底层库都包含WebKit(一个开源的浏览器引擎)有他就可以解释js；可以渲染界面；学习小程序前提html、css基础好，那小程序用起来简直是易如反掌；奈何我的基础并不好；所以基础还是得看呀；下面讲讲这两天看到的以及我的理解；

盒相关的样式（css中display属性）display:blockinline

3.总的来讲，可以分为两种block、inline；display:inline当前行能放下的话就在当前行，放不下的话才会另起一行放；宽高不起作用;在小程序中、Text是inline组件、原生的span、a元素属于inline类型display:block组件另起一行；接收宽高（button、view都是block组件）button、view可以说是block组件下面是一个例子：wxss

.inline{display:inline;background-color:red;/*设置：display:inlinewidth:heightmarginpaddingfloat都不生效*/}.block{display:block;background-color:yellow;}

4.wxml

button布局学习/buttonviewclass='inline'display:inline!--label设置：display:inlinewidth,height,margin,padding,float都不生效/label--texttext1/texttexttext2/texttexttext3/texttextclass="block"display:block/textbuttonbutton1/buttonbuttonbutton2/button/view

5.效果

6.大家可以自己试试；

display：inline-block

7.display:block组件另起一行；接收宽高（button、view都是block组件）他可以很好的做一个布局按照列的排列；需要结合width；比如两个button，如果想一行放两个，可以设置宽50%，display:inline-block;刚刚好;如下：wxss

.inline-block{display:inline-block;background-color:rgb(63,33,230);width:50%;color:white;}

8.wxml

viewbuttonclass='inline-block'button1/buttonbuttonclass='inline-block'button2/button/view

9.效果图

overflow:hidden|scroll

10.超出的部分隐藏或者滑动显示;

overflow-x:

11.x轴hidden|scroll超出的部分隐藏或者滑动显示;

12.总结：以后不能再说简单不简单，知识，对于不熟悉不了解的东西，即使他学起来没那么困难，但对于不懂的来说，他就是不简单，跟一分钱难倒英雄汉是一个道理；今年大半年，迷迷糊糊的就过去了；今后还是始终的保持一个脚踏实地的态度；积极的心态去工作、去生活；即使渺小，也要把所在的工作、职业做好；不能因简单就不想看，重在变化，重在过程；乐在其中；也不错；