CSS all i know.

 1. Inline-block will make it stay side by side: suppose we have icon and text to the right, if we use this it will align side by side.

2. Hitesh grid video on tailwind CSS is god level where I can have all control for all the element grids in the display and I won't have any problem for that.

3. We use flex when we want to display the item in the horizontal manner.

4. 1em = 100% of parent. When body has defined as 20px and inside body h1 is 1em means it's same as body = 20px as well. If it's 2em = 40px.

5. 1rem= 100% of root. Here root is HTML element that enclose everything. 


CSS Positioning:

Static(Default one): Original one. If we put left or top to it, won't affect as it is default.

Relative: Item is positioned relative to its default position. Left, Top: 50 px.

So in this we can have full control of customizing the top, left, right, bottom, but it makes a mess with this so it's not recommended.

Absolute: Either Role 1: Relative to nearest positioned ancestor or Role 2: Relative to the top left corner of the webpage.

We use absolute when we need to stick something and anyone else to move around it. 

Things to be noted: The ancestor has to be in relative or other than static. Or it will be Role 2 where it will be relative to the top left corner of the webpage. When the parent is in static, it will be following the role 2, and it will position with the top left of the screen. If parent is other than static, hypothetically it's absolute, it will be positioned then with the parent not to the top left of the screen.

Sticky: By default it's relative but when we scroll down it will be fixed.

We can use Z index to push to behind. Where it will be in absolute. Z-index by default it is 0 if we make it -1 it will be behind of the original element as it was in absolute.

Comments

Post a Comment

Popular posts from this blog

c# .net learning From 19 Sep 2023

Introduction | C# | Tutorial 1 - YouTube This is the best youtuber! Getting started with c# .net by watching video tutorial of Mr. Bangar Raju and Codewith harry: (1) Mr. Bangar Raju: (1) Working with Visual Studio .NET | C#.NET Tutorial | Mr. Bangar Raju - YouTube   (1) Working with Visual Studio .NET | C#.NET Tutorial | Mr. Bangar Raju - YouTube (2) Codewith harry: https://youtu.be/SuLiu5AK9Ps?t=296 (3) Programming with Mosh: (1) C# Tutorial For Beginners - Learn C# Basics in 1 Hour - YouTube Important topics in c#:  1. Generics  2. garbage collection  3. Exception handling  4. Interface Implementation  5. Delegates(callbacks, multicast etc)  6. Events  7. Multithreading using TPL My .NET Developer Roadmap for 2023 - YouTube Learn: RDBMS, SQL server. Fundamentals-of-Computer-Programming-with-CSharp-Nakov-eBook-v2013.pdf
Read more

template

 **** Combinatorics **** const ll M = 1e9+7;  // default modulus // --- Basic modular operations --- ll mod(ll x, ll m = M){      return ((x % m) + m) % m;  } ll mod_add(ll a, ll b, ll m = M){      return (a + b) % m;  } ll mod_sub(ll a, ll b, ll m = M){      return ((a - b) % m + m) % m;  } ll mod_mul(ll a, ll b, ll m = M){     return ((a % m) * (b % m)) % m; // safe for small numbers } ll mod_pow(ll a, ll b, ll m = M) {     ll res = 1;     a %= m;     while(b) {         if(b & 1) res = (res * a) % m;         a = (a * a) % m;         b >>= 1;     }     return res; } // --- Modular inverse for prime modulus --- // Fermat's Little Theorem: a^(m-2) ≡ a^(-1) (mod m) ll mod_inv_prime(ll a, ll m = M){     return mod_pow(a, m - 2, m); } // --- Modular inverse for non-prime modulus --- /...
Read more

settings.json

 {     "editor.fontFamily": "'Fira Code', Consolas, monospace",     "editor.fontLigatures": true,     "editor.fontWeight": "normal",     "editor.fontSize": 18,     "editor.lineHeight": 26,     "editor.wordWrap": "on",     "editor.cursorBlinking": "smooth",     "editor.cursorStyle": "underline",     "editor.cursorWidth": 5,     "editor.cursorSmoothCaretAnimation": "off",     "editor.smoothScrolling": false,     "editor.mouseWheelSmoothScroll": false,     "workbench.reduceMotion": "on",     "editor.scrollBeyondLastLine": false,     "editor.scrollBeyondLastColumn": false,     "editor.fastScrollSensitivity": 20,     "editor.allowVariableLineHeights": false,     "files.autoSave": "onFocusChange",     "explorer.confirmDelet...
Read more