>微信小程序的布局css样式 参考自  珺L

文字

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)

微信小程序 text属性设置 WXSS样式的更多相关文章

  1. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  2. 微信小程序四(设置底部导航)

    好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步 ...

  3. 微信小程序尺寸单位rpx以及样式相关介绍

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...

  4. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  5. 微信小程序的网络设置,及网络请求:wx.request(OBJECT)

    Md2All 一个Markdown在线转换工具 网址:http://md.aclickall.com 微信公众号:颜家大少本文所用排版工具:http://md.aclickall.com 支持通用的M ...

  6. 微信小程序全局属性

    通用全局属性:(前端也有) Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值. 通用全局函数:(前端也有) decodeURI() 解码某 ...

  7. 微信小程序 body属性的问题

    微信小程序里面没有了body这个节点了,取而代之的是page

  8. 学习微信小程序之css4设置颜色,单位表示,字体样式

    颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

  9. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

随机推荐

  1. dedecms文档长尾关键词,根据频率先替换长尾关键词再替换主关键词

    问题:在使用dedecms的文档关键词替换功能时,会造成交叉替换 如: 长尾关键词1:男人喝金丝皇菊有什么好处? 长尾关键词2:喝金丝皇菊有什么好处? 主关键词3:金丝皇菊 使用系统默认的功能时,在替 ...

  2. 刷完500道BAT面试题,我能去面试大厂了吗?

    面试之前先刷几篇面经,或者做几道热门面试题,想必是大家很熟悉的一种复习方式了,就像我们当年经常做五年高考三年模拟一样.但是可不要把面试题和面经当成你的主要复习方式,它只是锦上添花,绝非雪中送炭! 壹面 ...

  3. [疑难杂症]__当你的Cortana搜索无法使用,显示纯白界面(ps:已解决).

    前言 这个问题是在前不久解决关于我电脑点击屏幕上方快捷方式不久后出现的问题,之前并没有出现过这样的错误,但因为使用到的情况比较少,就一直没有去解决,但在一点时间后,发现没有Cortana搜索栏还是十分 ...

  4. DWR第四篇之对象传参

    1. 本示例在第一篇架构基础上添加代码 2. 首先,在dwr.xml文件里添加对象转换器 3. 编写Person实体类 package com.skyer.vo; import java.util.A ...

  5. leetcode — search-insert-position

    /** * Source : https://oj.leetcode.com/problems/search-insert-position/ * * Created by lverpeng on 2 ...

  6. 【原创】驱动卸载之ControlService函数

    BOOL WINAPI ControlService( _In_ SC_HANDLE hService, _In_ DWORD dwControl, _Out_ LPSERVICE_STATUS lp ...

  7. JS中如何理解浮点数?

    本文由云+社区发表 相信大家在平常的 JavaScript 开发中,都有遇到过浮点数运算精度误差的问题,比如 console.log(0.1+0.2===0.3)// false.在 JavaScri ...

  8. 一览js模块化:从CommonJS到ES6

    本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...

  9. 翻译:用户变量(User-Defined Variable)(已提交到MariaDB官方手册)

    本文为mariadb官方手册:User-Defined Variables的译文. 原文:https://mariadb.com/kb/en/user-defined-variables/我提交到Ma ...

  10. Apollo 9 — adminService 主/灰度版本发布

    目录 Controller 层 Service 层 publish 方法 发送 ReleaseMessage 消息 总结 1. Controller 层 主版本发布即点击主版本发布按钮: 具体接口位置 ...