文章目录
CSS doc
https://www.w3schools.com/cssref/pr_class_position.php
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative
CSS 盒子模型
Margin 外边框
Border，边框
Padding, 内边距
content， 内容
看名词的含义就很容易理解了
但看下面文档的解释，就变得混乱了
奇怪的解释不用管
混乱的名词解释
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
对元素的设置只是针对内容
不同版本的浏览器对元素设置的定义有区别
为解决旧的 IE 版本不兼容问题，在 HTML 页面声明
微信小程序 WXSS
WXSS 具有 CSS 大部分特性.
扩展的特性：
-
尺寸单位
-
样式导入
rpx: responsive pixel. 规定屏幕宽度为 750 rpx
样式导入
@import后跟需要导入的外联样式表的相对路径
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
引用外部样式
Component({
externalClasses: ['menu-bg', 'menu-content', 'menu-list'], //不能使用小驼峰命名，只能用 -或 _
properties: {
内联样式
style：静态的样式统一写到 class 中。
style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
选择器
.class
#id
element: eg, view
element,element: view, text
::after: eg, view::after 在 view 组件后边插入内容
::before: eg, view::before 在 view 组件前边插入内容
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
在 page 的 wxss 文件中定义的样式为局部样式，作用于对应的页面，并会覆盖 app.wxss 中相同的选择器。
CSS 语法列举
boarder 的设置
- border: 0.3px solid #e2e2e2;
- white-space: nowrap;
white space 可以用来设置文字在一行，或自动换行，或每一个空格另起一行 - width： 可以设置省 100%， 或 35 rpx
- justify-content: left;
元素靠左 - 标签 text width 是固定的，不能调，用 view 标签就可以了
- first-child
p:first-child 满足条件的第一项
eg
.className:first-child
p:first-child
排版
-
让元素居中
.center-flex {
display: flex;
align-items: center; /* 垂直居中 /
justify-content: center; / 水平居中 /
height: 100px; / 需要设置高度 */
} -
水平居中
对于行内元素（如文本或链接），
将下面的类应用到一个包裹行内元素的块级元素上。.center-text {
text-align: center;
}
对于块级元素（如div），
确保设置了宽度，margin: 0 auto; 会使得左右边距自动调整以居中元素。
.center-div {
margin: 0 auto;
width: 50%; /* 或者其它宽度 */
}
eg, 让自定义组件居中
wxss
.cls-select-container{
margin: 0 auto;
width: 90%;
border-width:1px;
border-color:darkgray;
height: 80rpx;
}
cls-selector{
border: 50px solid rgb(0, 0, 0);
}
wxml
<view class="cls-select-container">
<selector data-value="{{selectId[0]}}" class="cls-selector" selectId="{{selectId[0]}}"
selectArray="{{selectData}}" catch:tap="catch_tap_selector"></selector>
</view>