CSS note

文章目录

    • CSS doc
    • CSS 盒子模型
    • 微信小程序 WXSS
      • rpx: responsive pixel. 规定屏幕宽度为 750 rpx
      • 样式导入
      • 引用外部样式
    • 内联样式
    • 选择器
    • 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, 内容
看名词的含义就很容易理解了
但看下面文档的解释,就变得混乱了
奇怪的解释不用管

混乱的名词解释
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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738385.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaSE——面向对象高级一(3/4)-面向对象三大特征之二:继承(初步认识继承、了解继承的好处)

目录 认识继承 继承的好处 认识继承 什么是继承&#xff1f; Java中提供了一个关键字extends&#xff0c;用这个关键字&#xff0c;可以让一个类和另一个类建立起父子关系。 例如&#xff1a; public class B extends A{} 此时A类就称为父类&#xff08;基类或超类&…

MySQL Connector连接失败之SSL connection error: protocol version mismatch

调用 mysql_real_connect&#xff08;&#xff09; 连接失败&#xff0c;报错为ERROR 2026 (HY000): SSL connection error: protocol version mismatch 调用mysql_error&#xff08;&#xff09;查看失败原因&#xff0c;结果为 SSL connection error: protocol version …

人口性别年龄分布数据、不同年龄结构、性别结构人口分布数据、乡镇街道人口分布数据

人口分布是指人口在一定时间内的空间存在形式、分布状况&#xff0c;包括各类地区总人口的分布&#xff0c;以及某些特定人口&#xff08;如城市人口、、特定的人口过程和构成&#xff08;如迁移、性别等&#xff09;的分布等。 人口分布的最大特征是不平衡性。就全世界而言&am…

mysql 替换空值

函数 IFNULL() 用于判断一个表达式时否为NULL,如果为 NULL 则返回指定的代替值&#xff0c;否则返回原表达式的值。 函数&#xff1a; IFNULL(expression,alternavicate_value) expression 要判断的表达式alternavicate_value 当表达式为 NULL时要返回的代替值

Kafka整理-Consumer(消费者)

在Apache Kafka中,消费者(Consumer)是负责从Kafka的主题(Topics)读取数据的客户端应用程序。Kafka消费者的主要特点和工作原理如下: 主要特点 1、订阅主题: 消费者可以订阅一个或多个Kafka主题,并从中读取数据。2、消费者群组(Consumer Groups): 消费者可以组成消费…

Edu12 Beautiful Subarrays --- 题解

Beautiful Subarrays&#xff1a; 题目大意: 思路解析&#xff1a; 要找到一个区间并且区间的l--r里面所有的元素异或值大于等于k&#xff0c;称这样的数组是优美子数组&#xff0c;问优美子数组有多少个。 [L,R] 的数组异或和等价于 (a1,a2,a3,....aL-1) ^ (a1,a2,a3,a4,..…

CompletionService 处理异步任务

案例: public static void main(String[] args) throws Exception {ExecutorService executorService Executors.newCachedThreadPool();ArrayList<Future<Integer>> list new ArrayList<>();Future<Integer> future_15 executorService.submit(()…

【2024金三银四】

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

不锈钢电阻器-栅极电阻器 - 为什么要使用它们呢?

常规 如果你看一个典型的吉他放大器的原理图&#xff0c;你会注意到有一个电阻器与第一个电子管的栅极串联&#xff0c;通常在68K左右&#xff0c;还有一个电阻器与功率管的栅极串联&#xff0c;通常为1.5K或5.6K&#xff0c;你可能会偶尔看到非常大的电阻&#xff0c; 例如 4…

ssm+vue的高校课程评价系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的高校课程评价系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

Java各种规则引擎

一. Drools规则引擎 1.简介&#xff1a; Drools就是为了解决业务代码和业务规则分离的引擎。 Drools 规则是在 Java 应用程序上运行的&#xff0c;其要执行的步骤顺序由代码确定 &#xff0c;为了实现这一点&#xff0c;Drools 规则引擎将业务规则转换成执行树。 2.特性&…

伪分布HBase的安装与部署

1.实训目标 &#xff08;1&#xff09;熟悉掌握使用在Linux下安装伪分布式HBase。 &#xff08;2&#xff09;熟悉掌握使用在HBase伪分布式下使用自带Zookeeper。 2.实训环境 环境 版本 说明 Windows 10系统 64位 操作电脑配置 VMware 15 用于搭建所需虚拟机Linux系统 …

动态规划(算法竞赛、蓝桥杯)--概率DP求期望

1、B站视频链接&#xff1a;E40 概率DP 求期望_哔哩哔哩_bilibili

VUE 入门及应用 ( VueX )

8.状态管理 vuex vuex 是一个专门为vue.js应用程序开发的状态管理模式。用于解决大规模单页应用&#xff08;SPA&#xff09;中复杂状态管理和组件间通信的问题。 Vuex 采用了集中式存储管理应用的所有组件的状态&#xff0c;并通过一系列严格的规则来确保状态变更的可预测性…

python-0003-pycharm开发虚拟环境中的项目

前言 在虚拟环境中创建好了python项目&#xff0c;使用pycharm进行开发 打开项目 使用pycharm打开项目 设置虚拟环境的解释器 File–>Settings–>Project(项目名)–>Python Interpreter–>添加解释器–>添加已经存在的解释器–>选择虚拟环境的解释器 …

C语言⽂件操作

1. 为什么使⽤⽂件 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化的保存&…

C语言如何引⽤⼀维数组元素?

一、问题 数组是⼀组数的集合&#xff0c;数组元素是这组数中的⼀个个体。怎样引⽤数组集合中的每⼀个个体呢&#xff1f; 二、解答 数组定义完成后就要使⽤该数组&#xff0c;可以通过引⽤数组元素的⽅式&#xff0c;使⽤该数组中的元素。在引⽤数组的时候&#xff0c;应该注…

Matlab自学笔记二十八:总结|字符型与数值型的转换函数(汇总最全)

1.依据Unicode码转换 字符转数值使用函数uintN %依据Unicode码转换 数值转字符使用函数char %依据Unicode码转换&#xff0c;ASCII码与Unicode码并非相同概念&#xff0c;ASCII较基础&#xff0c;应用范围小&#xff0c;主要表示键盘上字母符号等&#xff0c;Unicode码包含…

安装 WPS 国际版并汉化

安装 WPS 国际版并汉化 奈何很多东西和其他同事使用的 Office 不通用&#xff0c;比如设置的数字精确以显示值为准、背景色不打印、还有本身一些操作方式上的不适应。 WPS 国际版地址&#xff1a;wps.com 刚开始的时候不知道国际版国内不能下载&#xff0c;点开下载地址速度…

小程序连接蓝牙

小程序 蓝牙功能 1.授予蓝牙权限2.蓝牙初始化3.监听寻找新设备4.搜索新设备5.建立连接⭐⭐⭐⭐⭐⭐⭐6.监听蓝牙低功耗连接状态改变事件8.监听特征值变化9.发送数据 1.授予蓝牙权限 //1.蓝牙授权 const authBlue (callback, initApp) > {app initApp;//鉴定是否授权蓝牙w…