CSS常用布局在小程序中的应用所有CSS布局的应用都基于三个基本概念：定位、浮动和边距操作我们其他的布局实现方式都是基于正常的文档流。那么我们先来看看什么是正常的单据流。普通文档流（NormalFlow）：普通布局流是指页面没有进行布局控制时，浏览器默认的HTML布局方式。默认文档流确保内容可以在没有任何css样式的情况下正确呈现和显示。使页面更具可读性和合理性。(positiondisplayfloattableflex-boxgrid-layout)元素默认是怎么布局的？（引用自https://developer.mozilla.org）首先，获取要放入单独元素框的元素的内容，然后在其周围添加填充、边框和边距。（盒模型）块级元素的内容宽度默认为其父元素的100%，其高度与其内容高度一致。内联元素的高宽与内容一致。您不能设置内联元素的高度和宽度。如果要控制行内元素的大小，需要设置display:block;对于元素（或者，display：inline-block；inline-block混合了inline和block的特性。）独立的元素如何相互影响呢？正常的布局流程是一个用于在浏览器视口中放置和组织元素的系统。默认情况下，块级元素按照它们在文档中出现的顺序放置——每个块级元素将在前一个元素下开始一个新行，并且它们将由设置的边距分隔。行内元素的行为不同——它们不另起一行；它们与其他内联元素分开，相邻的文本内容（或换行）只要在它们的父块级元素的宽度范围内有足够的空间都排列在同一行。如果空间不足，溢出的文本或元素将移至新行。如果两个相邻的元素都设置了边距并且两个边距重叠，则较大的设置将被保留而较小的将消失---这称为边距堆叠。在我们传统的css布局中，不管是css2还是css3，大致包括静态布局、流体布局、弹性布局、自适应布局、响应式布局和网格布局。css的这些布局方式，在小程序中是如何呈现的呢？让我们逐一看看。1.静态布局（StaticLayout）定宽布局。宽度以像素为单位。（当然我们也可以使用其他绝对长度单位）缺点：无论窗口有多大，大小都是一样的。不能很好地利用空间。行长和文本易读性差。静态布局是传统的网站形式：针对PC，设计居中布局。当窗口缩小时，内容被遮挡，出现水平和垂直滚动条。对于移动设备，创建一个m.域名和对应的手机网站分开。静态布局一般很少出现在小程序中。因为如果使用静态布局，无法适配不同的屏幕，而且750px的设计稿在小屏手机上会有滚动条。渲染效果如下：//wxml代码静态布局静态的内容部分布局在呈现的小程序中。小程序页面样式在overflow-x上默认是隐藏的。//样式如下page{overflow-x:scroll;}.page,.header,.content{width:750px;}.content{background:#ccc;}2。LiquidLayout（百分比布局）LiquidLayout是指页面元素的宽度会根据屏幕分辨率进行适配和调整，但整体布局保持不变。使用百分比实现：流体布局可以相对于浏览器窗口进行缩放。缺点：窗口宽度较小，线条变得很窄且难以阅读。需要设置min-width来解决，但是如果min-width比较大，就会有和静态布局一样的限制。如果宽度太宽，也会出现线长过长的问题。流式布局（也称“Fluid”）的特点是页面元素的宽度是根据屏幕适配和调整的。主要问题是，如果屏幕比例跨度太大，与原始设计相比会太小或太大。无法在大屏幕上正常显示。我们来看看在小程序中使用流体布局的效果：不同屏幕尺寸下呈现的效果如下：流式布局我是左边部分我是右边部分我是左边部分我是中间部分我是右边部分/*css代码*/.fluid,.content,.wrapper{width:100%;框大小：边框框;}.wrapper{高度：200px；margin-bottom:20px;}.wrapper.grid-item{height:100%;背景：#ccc；显示：内联块；box-sizing:border-box;}.??wrapper.grid-half{width:48%;}.wrapper.grid-half:nth-child(2n){margin-left:4%;}.wrapper.grid-three{width:32%;}.wrapper.grid-three:not(:first-child){margin-left:2%;}3.弹性布局（FlexLayout）CSS弹性框布局是CSS的模块之一，其中定义了一个针对flex布局中的用户界面设计优化的CSS盒模型，在该模型中，flex容器的子元素可以任意方向排列，它们的大小也可以“弹性拉伸”，既可以增加大小来填充未使用的空间，或缩小尺寸以防止父元素溢出。子元素的水平对齐和垂直对齐可以很容易地操作。可以通过嵌套框（垂直框内的水平框，或水平框内的垂直框）以二维方式构建布局。Flex的理解请参考阮一峰Flex布局教程：语法。这里将不给出详细描述。那么我们再看看Flex布局在小程序中的使用。还是之前例子中的wxml，我们只需要修改对应??的class和css即可。流式布局我是左边部分我是右边部分我是左边部分我是中间部分我是右边的部分/*csscode*/.wrapper{display:flex;高度：200px；底部边距：20px；证明内容：空格之间；}.wrapper.grid-item{高度：100%；弹性：1；background:#ccc;}.wrapper.grid-item:not(:first-child){margin-left:10px;}我们可以看到与流体布局显示的效果有一定的区别。我们可以在不考虑item宽度变化的情况下，给item之间的margin值设置一个固定的值。要在流式布局中实现这样的效果，我们只需要改变中间间距即可。我们都需要重新计算项目的宽度。当然，在之前的流式布局例子中，这也可以通过float或者padding来实现。4.自适应布局（Adaptive）自适应布局（Adaptive）的特点是为不同的屏幕分辨率定义布局。布局切换时页面元素会发生变化，但在每种布局中，页面元素不会随着窗口大小的调整而变化。在PC端和移动端都可能涉及到的布局中，我们可以使用媒体查询来实现不同屏幕分辨率的布局。示例5.响应式布局（Responsivelayout）响应式布局（Responsive）的特点是针对不同的屏幕分辨率定义布局。同时，在每一个布局中，都应用了流体布局的概念，即页面元素的宽度随着自动适应窗口的调整而增加。将响应式布局视为流体布局和自适应布局设计概念的融合。6、网格布局CSS网格布局擅长将一个页面划分为几个主要区域，并定义这些区域的大小、位置、层次等关系（前提是这些区域是由HTML生成的）。与表格一样，网格布局允许我们按行或列对齐元素。但是，就布局而言，网格比表格更有可能或更简单。例如，网格容器的子元素可以定位自己，以便它们真正重叠和分层，就像CSS定位元素一样。具体可以参考阮一峰CSSGrid网格布局教程我们来看一个例子，如何实现一个三行三列的布局？n行n列呢？网格布局12345678<viewclass='grid-item'>9.wrapper{显示：网格；/*网格模板列：100px100px100px；*//*grid-template-columns:repeat(3,100px);*/grid-template-columns:repeat(3,1fr);/*grid-template-rows:100px100px100px;*//*grid-template-rows:repeat(3,100px);*/grid-template-rows:repeat(3,100px);}.grid-item{背景：#ccc;margin-top:10px;}.grid-item:not(:nth-child(3n+1)){margin-left:10px;}6.vw,vh单位视口百分比长度定义相对于值视口大小，即文档可见部分vw：视口宽度的1/100；vh：视口高度的1/100；vmin：视口高度和宽度之间最小值的1/100。vmax：视口高度和宽度之间最大值的1/100。实际3行的显示例子：vw、vh单位123456789.page{内边距：5vw;}.grid-item{宽度：28vw;身高：28vw；背景：#ccc；显示：内联块；bottom:2vw;}.grid-item:not(:nth-child(3n+1)){margin-left:3vw;}在小程序中，我们更关心移动设备的显示效果，不会所谓适配媒体查询的使用，是指在不同的移动设备中对页面中的元素进行适配。具体实现可以使用微信小程序的rpx单元，使用定位、浮动、Flex、Grid布局来实现。综上所述，这里我只是触及了各种布局的基本用法。其实每个布局仔细研究都有很多东西要解释，因为各种布局中的很多属性和特性都没有涉及到。在我们的实际应用中，也会有各种布局需求。所以希望大家在实际使用的时候深入了解一下。另外正如本文标题所说，css布局在小程序中的应用，我们在h5页面中的布局可以说是五花八门，有不同的解决方案。这些布局概念有的是指对某一类布局的概括，有的是指CSS可以实现的布局方式。在小程序中，一般使用默认的rpx单位来定义布局和字体大小。上面的例子中没有使用微信的rpx单位。rpx的理解可以参考小程序官方文档。rpx（responsivepixel）：可以根据屏幕宽度自适应。指定的屏幕宽度为750rpx。例如iPhone6，屏幕宽度为375px，一共有750个物理像素，则750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。目的是在不同的屏幕分辨率下自适应。
