微信小程序学习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 | 规定应该从父元素继承边框样式。 |