微信小程序学习Course 2 关于WXSS一些样式

微信小程序学习Course 2 关于WXSS一些样式

WXSS在CSS的基础上增加了一些自己的东西，如果你有CSS基础，本节可以不看，如果没有基础的话可以看一下这里，这里给大家展示一些基础的东西。

view的样式

2.1 display:排版形式

flex形式代表弹性布局，具体参考如下帖子

https://www.runoob.com/w3cnote/flex-grammar.html

flex-direction:column弹性排版方式，column代表列排，row代表行排。

2.2 字体

2.3 边框边界

先举一个例子，假设在墙上有4幅画整齐地排列着，如图所示。对于每幅画来说，都有一个“边框”，在英文中称为“border”；每个画框中，画和边框通常都会有一定的距离，这个距离称为“内边距”，在英文中称为“padding”；各幅画之间通常也不会紧贴着，它们之间的距离称为“外边距”，在英文中称为“margin”。

 CSS结构也类似，整体的边框如下图所示，从里到外分别是内容、内边框、边框、外边框。

2.3.1 边距

对于外边距和内边距，我们均可以对其边距长度进行设置。如下两个例子

外边距可以设计边框和边缘的距离，外边框可以如下设计方式

  margin-left: 8px;
  margin-right: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin:8px 8px 8px 8px;//对 上 右  下  左 进行设计 顺时针排序
  margin:8px 8px;//对  上   右进行设置，默认下和上一致，左和右一致
  margin:8px;//上下左右均为一样

　　

padding内边距可以设置边框和元素之间的距离；具有以下四个属性

  padding-left:8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-top: 8px;

这里有两点注意：

1、关于宽度、边距值可以设置成具体指20rpx也可以写成百分比100%也可以写成auto自动也可以写成inherit继承。

2、内边距也可以类似于外边距的写法，用padding直接给四个或者一个或者两个参数。

2.3.2  边框

border边框可以设置边框的格式 包括宽度、粗细、线形、颜色等等。

border-style  样式

border-color 颜色

border-width 宽度

亦可以在其中加入方向

border-top-style

亦可以整体设计

border

距离如下例子

  border: 1px solid #eaeaea;//整体设计  1px宽度， 实现  灰色
  border-radius: 5px;//圆角弧度5px
  border-bottom: 1px solid #d0d0d0;//底部参数
  border-style:solid dotted double solid //分别设计上右下左的参数
  border-top-style:solid;

border-style参数可以为以下参数

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。