• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

cokelike

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

css常用方式

 常容器用的样式:

position: relative | absolute;  /*相对定位|决定定位*/
display: flex;  /*浮动*/
line-height: 0px;  /*div 撑开问题*/
overflow: hidden;  /*超出范围隐藏*/
z-index: 999; 图层
opacity: 0;/*透明度*/
outline: 0; /*隐藏聚焦边框*/
cursor: pointer; /*鼠标变小手*/
zoom:1; /*页面缩放*/
white-space:nowrap; /*强制不换行*/
box-sizing: border-box; /*避免border边框撑开控制在border外贴合 vw 屏幕像素 vw(宽)vh(高)单位像素 100vw为全屏宽*/
box-shadow: 0 5px 10px rgba(0,0,0,0.3); /*盒子阴影*/
position: fixed; /*根据body固定位置 有决定相对定位*/ 
display: flex; /*盒子内浮动*/

常用合作配置

view {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 32rpx;
}

对 rpx 详细说明:

设计师在提供设计图时,一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题。uni-app 在 App 端、H5 端都支持了 rpx,并且可以配置不同屏幕宽度的计算方式,具体参考:rpx 计算配置。

rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之,页面元素宽度在 uni-app 中的宽度计算公式:

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。
若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。
若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。

合作模型:

常用的伪类:

:nth-child() 选择元素(n)。
:nth-of-type() 同种标签指定序号的子元素,.box    1 p:nth-of-type(    3 )  box    1 里第    3 个p元素。
:link没被访问过的状态
:visited已被访问过的状态
:hover鼠标悬停时的状态
:active点击时的状态(鼠标按下还没弹起)
:empty选择空标签。
:focus选择当前获得焦点的表单元素。
:enabled选择当前有效的表单元素。
:disabled选择当前无效的表单元素,添加此属性,将无法选择。
:checked选择当前已经勾选的单选按钮或者复选框。
:root选择根元素,即标签,通过继承性影响文档样式。
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容

 

posted on 2024-09-11 19:02  cokelike  阅读(20)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3