CSS

Position property

Static: By default all the html elements are static. Here, static means ‘do not interfere’. Static positioned elements are not affected by the top, bottom, left, and right properties.
Relative: When an element is declared as relative it works as like top=left=0. It does not change natural flow that is it reserves it’s space even if the element moves to a new location. top, left values are applied relative to it’s static or default position (not the parent or not the window). top, bottom, left, right can be used ( This is the difference with static).
Absolute: When an element is declared as absolute it remains on it’s static or default position and leaves the space it was taking. But when top, left, right or bottom property is set, it references to it’s parent element if the parent has a position of relative. Otherwise it references to the browser window.

Box model

Total width or height = margin+border+padding+content.

Background = border+padding+content.

Generally margin, border, padding are calculated outside of width and height property.

If you set box-sizing: border-box; on an element padding and border are included in the width and height

Note: Two margins between two elements get unified. Only the highest margin is counted.

vw and vh

vw = View-port width

vh = View-port height

These units are used instead of px, inch, em, cm etc on any width, height, font-size for responsiveness.

vw vs 100%

In Mozilla Firefox, vw and 100% both referes to the total width excluding the scrollbar. On the otherhand, In other browsers, vw is the width including scroll bar but 100% is the width without scrollbar.

::before and ::after pseudo element

When you use ::before or ::after you must use content property. p::before means inside p and before contents(text of p). p::after means inside p and after contents(text of p).

Notice another thing

div:hover p {
    display: block;
}

p is in div. When hover on div, p will get changed on div hover.

Difference child and descendant

Just think of what the words “child” and “descendant” mean in English:

My daughter is both my child and my descendant
My granddaughter is not my child, but she is my descendant.

In CSS

<div>
<p>This is paragraph</p>
<p><span>Span: </span>This is another paragraph</p>
</div>

Here, the the p elements are children but span are not. On the other hand p and span both are descendant.
The > is used to select the children but not the descendant other than the immediate children.

Variable height transition

Method-1: Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get. Set max-height:100vh; overflow-x:hidden; overflow-y:auto

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow-x: hidden;
    overflow-y: auto;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 100vh;
    transition: max-height 0.25s ease-in;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Method-2: Consider a class collapsed which contains height:0 and transition css. The element will be hidden without show class. Now, During open, add show class, get the scrollHeight of the element using JS. Now set the height style.

Responsive image making square or other ratio

Square: Parent should have a padding 100% and relative position
Child should be always 100% x 100%

<div class=”parent”>

<img src=”#abc.jpg”>

</div>

Z-index

z-index requires the element to be positioned
When two adjacent element are transitioned, the latter element will overlap the first one without any z-index. You can change this overlaping by changing the z-index. You can also bring just an inner element of the first container above the second container by changing z-index of the inner element only. This inner element will be relative positioned and second element can be absolute positioned.

cover vs contain

cover: ফটোর ছোট ডাইমেনশনটা ফুল করে দেয়। এতে বড় ডাইমেনশন কিছুটা কাট হতে পারে।
contain: ফটোর বড় ডাইমেনশন্টা ফুল করে দেয়। এতে ছোট ডাইমেনশন ফুল স্ক্রিন নাও হতে পারে।

Labels: CSS, Web development

Edit This post