css中view,CSS常⽤布局在⼩程序中的应⽤
CSS 常⽤布局在⼩程序中的应⽤
所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵
我们其他的布局实现⽅式，都是基于正常的⽂档流来进⾏的。所以我们先来看看什么是正常的⽂档流。
正常⽂档流(Normal Flow)：正常布局流是指在不对页⾯进⾏任何布局控制时，浏览器默认的HTML布局⽅式。默认的⽂档流，确保在没有任何css样式的时候，还能够正确的渲染和显⽰内容。使页⾯具有⽐较好的可读性以及合理性。(position display float table flex-box
grid-layout)
默认情况下，元素是如何布局的？ (引⽤⾃ )
⾸先，取得元素的内容来放在⼀个独⽴的元素盒⼦中，然后在其周边加上内边距、边框和外边距。(盒⼦模型)
⼀个块级元素的内容宽度默认是其⽗元素的100%，其⾼度与其内容⾼度⼀致。⾏内元素的height width
与内容⼀致。你⽆法设置⾏内元素的height width。 如果你想控制⾏内元素的尺⼨，你需要为元素设置display: block; (或者，display: inline-block; inline-block 混合了inline 和 block的特性。)
那独⽴元素之间⼜是如何相互影响的呢？ 正常布局流是⼀套在浏览器视⼝内放置、组织元素的系统。默认情况下，块级元素按照在⽂档中书写出现的顺序放置 --- 每个块级元素会在上⼀个元素下⾯另起⼀⾏，它们会被设置好的margin 分隔。
⾏内元素的表现有所不同 --- 它们不会另起⼀⾏；只要在其⽗级块级元素的宽度内有⾜够的空间，它们与其他⾏内元素、相邻的⽂本内容(或者被包裹的)被安排在同⼀⾏。如果空间不够，溢出的⽂本或元素将移到新的⼀⾏。
如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更⼤的设置会被保留，⼩的则会消失 --- 这被称为外边距叠加。
我们在传统的css布局当中，不管是css2还是css3，⼤致囊括了静态布局、流式布局、弹性布局、⾃适应布局、响应式布局、⽹格布局。对于css的这些布局⽅式，在⼩程序中⼜是怎样的呈现⽅式呢？我们分别来看⼀看。
1. 静态布局 (Static Layout)
固定宽度布局。宽度以像素为单位。(当然我们还可以使⽤其他的绝对长度单位)
缺点：⽆论窗⼝多⼤，尺⼨不变。⽆法充分利⽤空间。⾏长和⽂本易读性不好。
静态布局就是传统的⽹站形式：对于PC设计⼀个居中布局，窗⼝缩⼩时，内容被遮挡，呈现横竖向滚动条。对于移动设备，单独建⽴⼀个m.域名及相应的移动⽹站。
静态布局在⼩程序中⼀般很少出现。因为如果使⽤静态布局，就⽆法做到不同屏幕⾃适应，750px的设计稿在⼩屏幕的⼿机上就会出现滚动条。
呈现效果如下：
// wxml 代码
静态布局
静态布局内容部分在⼩程序中的呈现。⼩程序page样式在overflow-x
上默认是hidden。
//样式如下
page {
overflow-x:scroll;
}
.page, .header, .content {
width: 750px;
}
.
content {
background: #ccc;
}
2. 流式布局 (Liquid Layout)(百分⽐布局)
流式布局是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。
使⽤百分⽐实现：流式布局能够相对于浏览器窗⼝进⾏伸缩。
缺点：窗⼝宽度较⼩，⾏变得⾮常窄，很难阅读。需要设置min-width来解决，但是如果min-width较⼤的话，也会有静态布局相同的限制。宽度太宽，同样会存在⾏长过长的问题。
流式布局(Liquid)的特点(也叫"Fluid") 是页⾯元素的宽度按照屏幕进⾏适配调整，主要的问题是如果屏幕尺度跨度太⼤，那么在相对其原始设计⽽⾔过⼩或过⼤的屏幕上不能正常显⽰。
我们来看看在⼩程序中使⽤流式布局的效果：
在不同的屏幕⼤⼩下呈现出来的效果如下：
流式布局
我是左侧部分
我是右侧部分
我是左侧部分
我是中间部分
我是右侧部分
/* css代码 */
.fluid, .content, .wrapper {
width: 100%;
box-sizing: border-box;
}
.wrapper {
height: 200px;
margin-bottom: 20px;
}
flex布局对齐方式.wrapper .grid-item {
height: 100%;
background: #ccc;
display: inline-block;
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. 弹性布局 (Flex Layout)
CSS 弹性盒⼦布局是 CSS 的模块之⼀，定义了⼀种针对⽤户界⾯设计⽽优化的 CSS 盒⼦模型。在弹性布局模型中，弹性容器的⼦元素可以在任何⽅向上排布，也可以“弹性伸缩”其尺⼨，既可以增加尺⼨以填满未使⽤的空间，也可以收缩尺⼨以避免⽗元素溢出。⼦元素的⽔平对齐和垂直对齐都能很⽅便的进⾏操控。通过嵌套这些框(⽔平框在垂直框内，或垂直框在⽔平框内)可以在两个维度上构建布局。
对Flex的理解可以参考阮⼀峰 Flex 布局教程：语法篇。在此不做详细说明。那我们看看在⼩程序中Flex布局的使⽤。依然还是上⼀个例⼦中的wxml，我们只需要修改对应的class以及css即可。
流式布局
我是左侧部分
我是右侧部分
我是左侧部分
我是中间部分
我是右侧部分
/* css 代码*/
.wrapper {
display: flex;
height: 200px;
margin-bottom: 20px;
justify-content: space-between;
}
.
wrapper .grid-item {
height: 100%;
flex: 1;
background: #ccc;
}
.wrapper .grid-item:not(:first-child) {
margin-left: 10px;
}
我们能够看到与流式布局显⽰出来的效果是有⼀定的差别的，在item之间的margin值，我们可以设定⼀个固定值，⽽不⽤去考虑item宽度的变化。⽽流式布局中想要实现这样的效果，只要想改变中间的间距，我们都需要重新计算下item的宽度。当然在上⼀个流式布局的例⼦中还可以配合float或者使⽤padding来实现这⼀点。
4. ⾃适应布局 (Adaptive)
⾃适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页⾯元素发⽣改变，但在每个布局中，页⾯元素不随窗⼝⼤⼩的调整发⽣变化。在pc以及移动端都可能涉及到的布局当中，我们可以使⽤媒体查询来实现不同屏幕分辨的布局。
5. 响应式布局 (Responsive layout)
响应式布局(Responsive)的特点是分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应⽤流式布局的理念，即页⾯元素宽度随着窗⼝调整⽽⾃动适配。
可以把响应式布局看作是流式布局和⾃适应布局设计理念的融合。
6. ⽹格布局
CSS ⽹格布局擅长于将⼀个页⾯划分为⼏个主要区域，以及定义这些区域的⼤⼩、位置、层次等关系(前提是HTML⽣成了这些区域)。
像表格⼀样，⽹格布局让我们能够按⾏或列来对齐元素。 然⽽在布局上，⽹格⽐表格更可能做到或更简单。 例如，⽹格容器的⼦元素可以⾃⼰定位，以便它们像CSS定位的元素⼀样，真正的有重叠和层次。详情请参考阮⼀峰 CSS Grid ⽹格布局教程
我们来看⽰例，如何实现⼀个三⾏三列的布局？n⾏n列呢？
Grid 布局
1
2
3
4
5
6
7
8
9
.wrapper {
display: grid;
/* grid-template-columns: 100px 100px 100px; */
/* grid-template-columns: repeat(3, 100px); */
grid-template-columns: repeat(3, 1fr);
/* grid-template-rows: 100px 100px 100px; */
/* grid-template-rows: repeat(3, 100px); */
grid-template-rows: repeat(3, 100px);
}
.grid-item {
background: #ccc;
margin-top: 10px;
}
.grid-item:not(:nth-child(3n+1)) {
margin-left: 10px;
}
6. vw, vh单位
视⼝百分⽐长度定义相对于viewport的⼤⼩的值，即⽂档的可见部分。vw: 视⼝宽度的1/100;
vh: 视⼝⾼度的1/100;
vmin: 视⼝⾼度和宽度之间的最⼩值的 1/100。
vmax: 视⼝⾼度和宽度之间的最⼤值的 1/100。
实现3⾏3列的⽰例：
vw、vh单位
1
2
3

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。