微信小程序-布局css样式

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

 

 

附部分说明：

width: fit-content;
font-size:20px;      /*设置文字字号*/
color:red;           /*设置文字颜色*/
font-weight:bold;    /*设置字体加粗*/
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
font-family:"宋体";   /*设置字体为宋体*/

font-style:italic;    /*文字排版--斜体*/
text-decoration:underline;   /*文字排版--下划线*/
text-decoration:line-through;/*文字排版--删除线*/
text-indent:2em;             /*段落排版--缩进*/
line-height:1.5em;           /*段落排版--行间距（行高）*/
letter-spacing:50px;         /*段落排版--中文字间距*/
word-spacing:50px;           /*字母间距*/
text-align:center;  right ; left ;  /*段落排版--对齐*/

display:inline-flex;        /*将对象作为内联块级弹性伸缩盒显示*/
display:block;              /*设置为块状元素*/
display:inline;             /*设置为内联元素*/
display:inline-block;       /*设置为内联块状元素*/

word-break:keep-all;        /* 不换行 */ 
white-space:nowrap;         /* 不换行 */ 
vertical-align:middle;     /*把此元素放置在父元素的中部。*/

border-style（边框样式）常见样式有：  （border-color,border-width） 边框相关设置
dashed（虚线）| dotted（点线）| solid（实线）。
border-bottom border-top border-right border-left 上下左右线单独设置

box-sizing: border-box; //当使用padding的时候不影响大小
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left (margin:10px 10px 10px 10px; top、right、bottom、left)