小程序中相关控件的使用、样式的使用、flex布局

css使用：https://www.jianshu.com/p/6dd021960783

 

**********button：

***button去边框的方法：

三种方法：
1.button::after{display:none}
2.button::after{border-color:transparent}
3.button::after{border-width:0}

****button设置背景：

3种方法：

1.网络url，不能用本地的；background-image: url(https://www.ccc.jpg);

2.本地的图片经过base64编码

3.使用img标签层叠覆盖。

 

*****image的相关设置：https://www.jianshu.com/p/ae335d50b67d

*****input值的获取：

方法一：<input class="newname" bindinput="getinputnewnickname"> </input>

getinputnewnickname:function(e){

//监听文本框

console.log("获取input框的内容"+e.detail.value)

}

方法二：input放在form标签中，

• 携带 form 中的数据触发 submit 事件
• bindsubmit 事件需要配合按钮的formType="submit" 操作
• 设置input的name值来获取对应的数据

*****水平垂直居中：

style="height: 44px; width: {{width}}px; background: red;text-align:center;margin: auto;display: flex;align-items: center;"

如果子容器中的view需要居中的话，那需要在父容器中设置居中

水平居中：text-align:center;margin: auto;

垂直居中：display: flex;align-items: center;

同时平和垂直居中：justify-content: center;display: flex;align-items: center;

******定位：

 

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

******margin:块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

静态定位的元素不会受到 top, bottom, left, right影响。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position: relative;相对定位，相对于自身移动，会占用原来的位置。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
position: absolute;绝对定位，绝对定位使元素的位置与文档流无关，因此不占据空间。普通流中其它元素的布局就像绝对定位的元素不存在一样。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

position:fixed;直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。比如我们准备一长串的文字，让文字超出一屏的宽度，设置浮动元素div1的left和top为100px，拖动浏览器的滚动条，浮动元素div1的位置不会发生变化。Fixed定位的元素可以和其他元素重叠。

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止，有的也会卡住。clear:both;清除浮动。

*******块元素、行内元素、行内块元素；

        (1)display:inline;转换为行内元素

　　(2)display:block;转换为块状元素

　　(3)display:inline-block;转换为行内块状元素

     （4display:none;让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

• display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)

 

块状元素特征：(1)能够识别宽高。(2)margin和padding的上下左右均对其有效。(3)可以自动换行。(4)多个块状元素标签写在一起，默认排列方式为从上至下。

1、总是在新行上开始

2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度，即父元素的width。当设定新的宽度，如果宽度是100%，并且padding、margin不为零，导致块级元素宽度溢出父元素

3、盒子模型的高度默认由内容决定

4、盒子模型中高度、宽度和内外边距都是可控制

5、可以容纳行内元素和其他块级元素。

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

 

行内元素特征：(1)设置宽高无效。(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间(3)不会自动进行换行。

1、和其他非块级元素在同一行

2、盒子模型中高度、宽度、上下margin、上下padding设置无效，只能设置左右的margin和左右的padding

3、宽度就是文字或图片的宽度，不可改变

4、行内元素的宽度和高度都不能直接设置

5、行内元素只能容纳文本或其他行内元素，在行内元素中放置其他的块级元素会引起不必要的混乱
 

　　行内块状元素特征：(1)不自动换行。(2)能够识别宽高。(3)默认排列方式为从左到右

 

**小程序布局：https://blog.csdn.net/lwzhang1101/article/details/86540832

flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html、http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html、https://www.cnblogs.com/milo-wjh/p/6758198.html?utm_source=itdadao&utm_medium=referral、https://blog.csdn.net/LzzMandy/article/details/91380510

微信小程序页面布局方式采用的是Flex布局。Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它可以应用于容器中，也可以应用于行内元素。

容器中的属性：

order　　项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order

  .item {
      order: <integer>;
    }
flex-grow

 .item {
     flex-grow: <number>; /* default 0 */
  }
flex-shrink

  .item {
    flex-shrink: <number>; /* default 1 */
   }
flex-basis

  .item {
     flex-basis: <length> | auto; /* default auto */
   }
flex

  .item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   }
align-self

 .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
   }

定位position和布局display不一样，可以同时使用，display：flex（默认在同一行显示，可以设置换行）和display：block（默认，会自动换行）。一般绝对定位、相对定位、flex布局一起使用。absolute定位是针对自身，display是针对子元素；

******flex布局注意问题：

1.align-items：center对<text>标签不起作用；解决方法：在text中添加 line-height:text的自身高度;

2.有的absolute定位的元素不参与flex的布局；

 

转自https://www.jianshu.com/p/8f8842c29f51

一、首先介绍一下HTML中几种类型标签。
（1）行内标签：能够设置多个标签在一行内，不能设置宽高，宽高是内容的大小。
（2）块级标签：一个标签独占一行，能设置宽高。
（3）行内块级标签：可以多个标签共占一行，又能设置宽高。

同理，微信小程序中也存在这种划分情况，微信小程序中，大部分控件是块级标签，行内标签较少，比如form。那么既然块级标签不能多标签共用一行，我们布局的时候不是就很被动吗？？请看第二条。

二、块级标签通过属性设置转为行内块级标签，满足需求。
（一）display属性

display属性可设置值有：block,inline,inline-block,none.


block:让行内标签变成块级标签。块级标签默认值。
inline:让块级标签变成行内标签。
inline-block:可以将任意标签变为行内块级标签。
none:不设置。

（二）position属性

position属性：可设置为：absolute,fixed,relative,static,inherit。默认值——static,假如设置为fixed,absolute，就会脱离标准流（标准流：布局从上到下，从左到右依次排布），能够达到行内块级标签的效果。 从而达到既能设置宽高，又能多个控件。但是这个属性的设置一般是用于绝对布局。


absolut——生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative  ——生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed——生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static——默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit——规定应该从父元素继承 position 属性的值。


这儿要重点解释一下absolute，有一个词是形容绝对布局的，子绝父相——意思是，假如你要在某个父控件中绝对布局一个子控件，那么子控件的position设置为absolute，父控件position属性设置为relative。
假如只是给子控件设置position属性，子控件就会自主从内往外找父控件的position属性，直到发现谁的position属性值为relative，就相对于谁进行绝对布局，假设没找到（即所有子控件的position值都为默认的static）就相对于外层父控件中，最外层的static控件进行绝对布局。

position的六个属性值：static、relative、absolute、fixed、sticky和inherit。1、static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
2、relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
3、absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
4、fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
5、sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址（https://jsbin.com/moxetad/edit?html,css,output）
偏移量top、right、bottom、left四个属性。偏移量不会对static的元素起到作用。而margin，相对应的是盒子模型的外边距，它会对每个元素框起到作用，使得元素框与其他元素之间产生空白。

（三）float属性

用于设置控件浮动于界面，也是脱离标准流。将块级标签变为行内块级标签。


left  元素向左浮动。
right 元素向右浮动。
none  默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit   规定应该从父元素继承 float 属性的值。

（四）Overflow的用法

Overflow：visible   默认值超出部分可见
Overflow：hidden  将超出部分隐藏
Overflow：scroll    将控件设置为滚动
Overflow：auto     自动设置滚动

（五）设置控件水平居中和垂直居中

水平居中：
行内标签和行内块级标签：在父控件中设置text-align:center.
块级标签需要多设置一步，在子控件自身设置margin：0 auto。


垂直居中：
行内标签和行内块级标签：只需将line-height 的值设置为父控件的高度。
块级标签：第一种，可将块级标签转为行内块级，然后同上，第二种，用position，然后left=50%，top=50%，然后设置平移属性transform（-50%，-50%）；

尺寸：

1、百分比：百分比的参照物是父元素，50%相当于父元素width的50%

2、rem：这个对于复杂的设计图相当有用，它是html的font-size的大小

3、em：它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

4:px

 

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)。

 

css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。

标准盒子模型width的长度等于content的宽度；而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和。

宽度默认的属性值是auto，这个属性值会使得内部元素的长度自动填充满父元素的width。

 

****text-align的用法：对标签内的所有东西基本都有作用。前提是，标签内的东西，属于标准输出流，不能是浮动或者定位的标签。如果标签内是其他的标签，而不是具体的文本。你需要给里边的标签增加margin-left:auto;margin-right:auto属性，这样，里边的标签就居中了。如果没有设置  width 属性(或者设置 100%)，居中对齐将不起作用。一般情况下使用margin：auto；来设置元素居中，使用text-align设置文本居中。

margin:auto只适用于水平边距，它不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。

*******颜色：

**渐变色：https://blog.csdn.net/huangxiaoguo1/article/details/80013943

 

 

****边框：
圆角：

/* border-top-left-radius:34rpx;

border-top-right-radius:34rpx;

border-bottom-right-radius:34rpx;

border-bottom-left-radius:34rpx; */

border-radius: 34rpx;

background:rgba(255, 255,255, 1);



border:1px solid #FC732F;//必须要设置成这样颜色才有效

border-width: 2rpx;