0
点赞
收藏
分享

微信扫一扫

h5唤起微信小程序

sunflower821 03-12 07:00 阅读 2
css

文章目录

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, 内容
看名词的含义就很容易理解了
但看下面文档的解释,就变得混乱了
奇怪的解释不用管

对元素的设置只是针对内容
不同版本的浏览器对元素设置的定义有区别
为解决旧的 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>
举报

相关推荐

0 条评论