编程知识 cdmana.com

2022web前端全栈完整整理——(二)csscss3篇

1. css基础:https://alex-ss.blog.csdn.net/article/details/83053901

2. css3新增属性值initial:可直接取消某个元素指定的样式值使其变为默认值,如color:initial。

3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量,且支持双向响应:属性:v-bind(js/ts变量)。

<template>
    <div class='ace_class'>文本颜色</div>
    <button @click='btnClick'>点击修改文本颜色</button>
</template>
<script setup lang='ts'>
import {ref} from 'vue';
const colorVal =ref('red');
const btnClick=e=>{
    colorVal.value='blue'
}
</script>

<style lang='scss' scoped>
.ace_class{
    color: v-bind(colorVal )
}
</style>

4. vue3中深度选择器:deep()的使用,在vue2中css使用>>>,以及预编译less/scss/sass中的/deep/,在vue3中都替换为:deep():

.box{
    :deep(.ul){
        /*样式*/
    }
}

.box :deep(.ul){
        /*样式*/
}

5. 镜像界面,像沙特阿拉伯语:

.css{
    direction:rtl/ltr;
}

6. css磨砂效果:https://blog.csdn.net/qq_42231156/article/details/101203553

7. css文件在js/css/less/scss中的引入:

// 在js中
import 'xx/reset.css'
// 在css/less/scss中,结尾';'符号是必须的
@import 'xx/reset.css';
@import url('xx/reset.css');

8. css自定义滚动条:https://blog.csdn.net/qq_42231156/article/details/103070807

9. css单行/多行超出省略:https://blog.csdn.net/qq_42231156/article/details/84565677

10. vue项目响应式适配插件库:postcss-px2rem或者postcss-plugin-px2rem

11. css盒模型:https://blog.csdn.net/qq_42231156/article/details/103176762

12. css重置/通用样式库:https://blog.csdn.net/qq_42231156/article/details/124463067

13. css绘制三角形:https://blog.csdn.net/qq_42231156/article/details/124619100

原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

14. 媒体查询@media:

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=noe" />

<style>
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  /*css样式*/
}
</style>

/*
mediatype常用值:all(所有设备),print(打印机和打印预览),screen(电脑,平板,智能手机等)
mediafeature常用值:max-width/min-width/max-height/min-height
*/

15. css九宫格:N宫格相同原理实现

<template>
    <ul class='ul'>
        <li v-for='item in 9' class='li'>{
   {item}}</li>
    </ul>
</template>
<style lang='scss' scoped>
.ul{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid;
  margin: 0;
  padding: 0;
  .li{
    display: inline-block;
    background:red;
    width: calc((100% - 20px*2)/3);
    height: 86px;
    text-align: center;
    &:not(:nth-child(3n)){
      margin-right: 20px;
    }
    &:not(:nth-child(n+6)){
      margin-bottom: 20px;
    }
  }
}
</style>

16. css的动画库:Animate.css

17. css文字环绕图片shape-outside:https://blog.csdn.net/qq_40047198/article/details/89087084

18. css的粘滞定位(滚动吸顶):如通讯录列表滚动时,当前滚动位置字母实在吸顶:position:sticky。

<template>
   <div class="box">
     <ul class='ul'>
        <li v-for='(values,index) in list' class='li'>
          <h1 class="title">{
   {values[0]}}</h1>
          <ul>
            <li  v-for='(obj,i) in values[1]'>{
   {obj.name}}</li>
          </ul>
        </li>
    </ul>
   </div>
</template>
<script setup lang='ts'>
import {ref} from 'vue';
const list=ref(new Map())
list.value.set('A',Array.from({length:10},(v,k)=>{return {name:`A_${k}`}}))
list.value.set('B',Array.from({length:30},(v,k)=>{return {name:`B_${k}`}}))
</script>
<style lang='scss' scoped>
.box{
  width: 300px;
  height: 300px;
  border: 1px solid;
  .ul{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .title{
      position: sticky;
      background: red;
      top: 0;
    }
  }
}
</style>

19. css移动端web开发技巧:https://blog.csdn.net/qq_42231156/article/details/84565595

20. iconfont图标库:https://www.iconfont.cn/

21. css的cursor鼠标样式:http://css-cursor.techstream.org/

22. css中不常用,但特有用的一些属性:

  • @font-face:引入字体文件。
  • font-stretch:字体拉伸。
  • font-kerning:字距。
  • letter-spacing:字符间距。
  • text-align-last:文本最后一行对齐方式。
  • vertical-align:纵向对其方式,如文本和图片。
  • word-spacing:单词间距。
  • text-transform:文本字母大小写转换。
  • text-decoration:文本划线。
  • text-shadow:文本阴影。
  • white-space:文本中空白处理。
  • hyphens/word-break:换行和断字。
  • writing-mode:文本横向纵向书写方式。
  • ::first-letter:首字母伪类。
  • ::first-line:首行伪类。
  • shape-outside、polygon:文字环绕图片。
  • position:sticky:滚动吸顶。
  • background-clid:裁剪背景。
  • background-attachment:背景粘附,即背景跟随滚动。
  • direction:rtl/ltr:镜像界面,如沙特阿拉伯语,具有继承性。
  • filter、mix-blend-mode、background-blend-mode、isolation、clip-path、mask-image、object-fit:css滤镜、裁剪、混合、遮罩、填充…
  • display:grid、grid-template-rows、gird-template-columns、grid-row、grid-column:栅格布局。

持续更新补充中…

版权声明
本文为[Bejpse]所创,转载请带上原文链接,感谢
https://blog.csdn.net/Bejpse/article/details/124761839

Scroll to Top