CtrlK

❤️fav

🔸 Code ┊ CSS ┊ Design ┊ Help ┊ Materials

Global Functions, helper functions ⭐️, getter/setter
DOM ⟩ $(), $all() ⭐️
CSS ⟩ Layout, style.prop(), Color Names
String ⟩ .escapeHTML(), .kebabToCamelCase(), .capitalize()

Code

CSS

Design

- web design tools ❤️
- web design (lots of) tools 😲

Help

📗
📘
📘

素材

PreviousfreeCodeCamp Nexttools

Last updated 2 years ago

Was this helpful?

/* :root = html (with higher specificity) */
:root { 
    box-sizing: border-box; 
}

/* "*" doesn't include pseudo-elements */
*, ::before, ::after {
    /* box-sizing isn’t normally an inherited property, */
    /* use `inherit` to force it.                       */
    box-sizing: inherit;
}

/* ⭐️ import Font Awesome */
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css");

/* -- custom styling for all icons -- */
.fas, .fab {
    border: 1px solid black;
    font-size: 48px;
    background-color: white;
    color: black;
}

/* -- custom styling for specific icons -- */
.fa-facebook {
    color: rgb(59, 91, 152);
}

root
  ├ index.html
  ├ style.css
  ├ calc-app.js
  ├ calc-app-styles.css
  └ Calculator.js
  
root
  ├ index.html
  ├ style.css
  ├ calc-app ──┬ calc-app.js
  │            ├ calc-app-styles.css
  │            └ Calculator.js
  └ calc-app ──┬ calc-app.js
               ├ calc-app-styles.css
               └ Calculator.js

root
  ├ index.html
  ├ style.css
  ├ calc-app.js
  ├ calc-app-styles.css
  └ Calculator.js
  
root
  ├ index.html
  ├ style.css
  └ calc-app ──┬ calc-app.js
               ├ calc-app-styles.css
               └ Calculator.js

/* centered element */
.centered-element {

  margin: 0;
  
  /* ⭐️  child 跟隨 parent 的坐標系   */
  position: absolute;
  
  /* ⭐️  垂直水平置中   */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}