Complete sorting of 2022 web front-end stack -- (II) csscss3

Bejpse 2022-05-14 14:35:21 阅读数:402

completesortingwebfront-endend

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

2. css3 Add attribute value initial: You can directly cancel the style value specified by an element and make it the default value , Such as color:initial.

3. vue3 Medium .vue Of documents style Inside css have access to js/ts Declared variables in , And support two-way response : attribute :v-bind(js/ts Variable ).

<template>
<div class='ace_class'> text color </div>
<button @click='btnClick'> Click to modify the text color </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 Medium depth selector :deep() Use , stay vue2 in css Use >>>, And precompile less/scss/sass Medium /deep/, stay vue3 Replace with :deep():

.box{
:deep(.ul){
/* style */
}
}
.box :deep(.ul){
/* style */
}

5. Mirror interface , Like Saudi Arabia, Arabic :

.css{
direction:rtl/ltr;
}

6. css Frosting effect :https://blog.csdn.net/qq_42231156/article/details/101203553

7. css The file in js/css/less/scss Introduction of :

// stay js in
import 'xx/reset.css'
// stay css/less/scss in , ending ';' Symbols are necessary
@import 'xx/reset.css';
@import url('xx/reset.css');

8. css Custom scroll bar :https://blog.csdn.net/qq_42231156/article/details/103070807

9. css A single / More than one line is omitted :https://blog.csdn.net/qq_42231156/article/details/84565677

10. vue Project responsive adaptation plug-in library :postcss-px2rem perhaps postcss-plugin-px2rem

11. css The box model :https://blog.csdn.net/qq_42231156/article/details/103176762

12. css Reset / Common style library :https://blog.csdn.net/qq_42231156/article/details/124463067

13. css Draw triangle :https://blog.csdn.net/qq_42231156/article/details/124619100

principle : Width width by 0;height by 0;(1) There is a horizontal and vertical edge ( The up and down or so ) The Settings for border- Direction : length solid red, This is the straight line at the bottom . Other side use border- Direction : length solid transparent.(2) There are two sides ( The up and down or so ) Set up , If the hypotenuse is to the right of the triangle , Set at this time top or bottom The straight line of , And the slash on the right . If the hypotenuse is to the left of the triangle , Set at this time top or bottom The straight line of , And the slash on the left .

14. Media query @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 */
}
</style>
/*
mediatype Common values :all( All devices ),print( Printer and print preview ),screen( The computer , Flat , Smart phones and so on )
mediafeature Common values :max-width/min-width/max-height/min-height
*/

15. css squared paper for practicing calligraphy :N The same principle of palace lattice is realized

<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 The animation library :Animate.css

17. css Text around pictures shape-outside:https://blog.csdn.net/qq_40047198/article/details/89087084

18. css Viscous positioning of ( Rolling ceiling ): For example, when the address book list scrolls , The current scroll position letter is really ceiling :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 Mobile web Development skills :https://blog.csdn.net/qq_42231156/article/details/84565595

20. iconfont Icon Library :https://www.iconfont.cn/

21. css Of cursor Mouse style :http://css-cursor.techstream.org/

22. css It's not often used in English , But some properties that are particularly useful :

  • @font-face: Import font file .
  • font-stretch: Font stretch .
  • font-kerning: Word spacing .
  • letter-spacing: Between characters .
  • text-align-last: Alignment of the last line of text .
  • vertical-align: Vertical to its way , Such as text and pictures .
  • word-spacing: Word spacing .
  • text-transform: Text letter case conversion .
  • text-decoration: Text underline .
  • text-shadow: Text shadow .
  • white-space: White space processing in text .
  • hyphens/word-break: Line breaks and hyphenation .
  • writing-mode: The text is written horizontally and vertically .
  • ::first-letter: Initial pseudo class .
  • ::first-line: First line pseudo class .
  • shape-outside、polygon: Text around pictures .
  • position:sticky: Rolling ceiling .
  • background-clid: Cut the background .
  • background-attachment: Background adhesion , That is, the background follows the scroll .
  • direction:rtl/ltr: Mirror interface , Such as Saudi Arabia, Arabic , Inherited .
  • filter、mix-blend-mode、background-blend-mode、isolation、clip-path、mask-image、object-fit:css Filter 、 tailoring 、 blend 、 Mask 、 fill …
  • display:grid、grid-template-rows、gird-template-columns、grid-row、grid-column: Grid layout .

Continuously updated and supplemented …

版权声明:本文为[Bejpse]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/134/202205141340163882.html