CSS note

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>