CSS note

文章目录

    • [CSS doc](#CSS doc)
    • [CSS 盒子模型](#CSS 盒子模型)
    • [微信小程序 WXSS](#微信小程序 WXSS)
    • 内联样式
    • 选择器
    • [CSS 语法列举](#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>
相关推荐
少年阿闯~~2 小时前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher2 小时前
CSS 继承 (Inheritance)
前端·css
闲人编程5 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
昔人'7 小时前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
冲!!8 小时前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
梦6508 小时前
CSS新特性
css
BillKu21 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
乖女子@@@1 天前
css3新增-网格Grid布局
前端·css·css3
Sapphire~1 天前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰1 天前
歌词滚动效果
前端·css