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

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


1. css Basics :

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 ).

<div class='ace_class'> text color </div>
<button @click='btnClick'> Click to modify the text color </button>
<script setup lang='ts'>
import {ref} from 'vue';
const colorVal =ref('red');
const btnClick=e=>{
<style lang='scss' scoped>
color: v-bind(colorVal )

4. vue3 Medium depth selector :deep() Use , stay vue2 in css Use >>>, And precompile less/scss/sass Medium /deep/, stay vue3 Replace with :deep():

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

5. Mirror interface , Like Saudi Arabia, Arabic :


6. css Frosting effect :

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 :

9. css A single / More than one line is omitted :

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

11. css The box model :

12. css Reset / Common style library :

13. css Draw triangle :

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" />
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
/*css 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

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

16. css The animation library :Animate.css

17. css Text around pictures shape-outside:

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.

<div class="box">
<ul class='ul'>
<li v-for='(values,index) in list' class='li'>
<h1 class="title">{
<li v-for='(obj,i) in values[1]'>{
<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}`}}))
<style lang='scss' scoped>
width: 300px;
height: 300px;
border: 1px solid;
width: 100%;
height: 100%;
overflow-y: auto;
position: sticky;
background: red;
top: 0;

19. css Mobile web Development skills :

20. iconfont Icon Library :

21. css Of cursor Mouse style :

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 …