CSS Topic
Published: 2021-12-21 16:26:18

## **CSS Topic**

**Box-sizing **
When we add padding and border in an element's then the total width and height increase on the outside of the box. Box-sizing fixes this outside extra padding of the box and fixes the original width of the box.

<style>
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
</style>

<h1>with box-sizing</h1>
<div class="div1">withOut Padding div>
<br>
<div class="div2">with Padding</div>



**CSS Float**
 
The most important thing is done with the CSS float when creating the layout. In addition, if the text and the picture are together, then the float is used. There are basically two values of float left and right. If left, the element will be pushed to the left, and if right, it will be moved to the right.
For example, if you want to take an image or picture to the left of the text, for example, if there is a picture with the writing in the letter magazine.





img {
float: left;
}

**Float: **

the right day the image will go to the right.
Float elements can be placed side by side (horizontally) or side by side. The float always works horizontally.
Usually in HTML, the elements are positioned vertically one after the other like many li, p or div, etc. Now to bring them side by side means to bring one to the right and another to the end of the browser like this float: left; It will work if given.
Any block-level element occupies space on the right or left side of the browser so no other block-level element can be inserted next to the block-level element. However, when you give a float, it will take up the content of the element and leave the rest for another floated element.
When creating the layout, it is decided with these floats which div will be next to which div.
The default value of float is none.
There is a clear property with which floated elements can be removed. Floated elements on the left, right or both sides can be removed using the left, right and both values. A floated element will have floated elements on one side and not on the other. This can be fixed with clear properties.

**CSS Position:**
 
Positioning in CSS is a very important issue. If you don't have a clear idea, you will go to work a lot and get stuck later. Especially if you want to put a picture etc. in an unexpected place on the page, if you want to take another div or element on one div or element, etc.
There are 4 types of positions
**Static**
By default position: static; Yes, that means no positioning. Due to the code of the document, the element will also appear on the next page.

**Relative**
It is the same as static but here the element can be moved from its position using top, left, bottom, right, and z-index. When a relative position is held, the element is subject to its own position. Example: 



div.one{
position:relative;
top:50px;
left:30px;
width:200px;
height:200px;
background: red;
}


div.two{
width:200px;
height:200px;
background: maroon;
}


div.three{
width:200px;
height:200px;
background: black;
}

Notice that Div 1 is 50 pixels down and 30 pixels to the left. Even No. 2 has moved on to Div. If you want to see the number 1 div below then z-index: -1; Or the day will go down with any minus value.
The remarkable thing is that the vacuum created by going down the left did not allow anyone else to enter. This means that Div will not lose its original space but will hold on.
Z-index works only when an element is positioned in CSS.
**Absolute**

If given, the element will be subject to its immediate previous parent div (with top, left, etc.). If there is no parent div, then <html> i.e. the left and right sides of the browser will be calculated. As in the previous example, make position: absolute and see the application.
Here the element no longer holds space for itself
When doing absolute position, the element loses its normal position in the document.



**Fixed**

If the position of an element is fixed then it will be fixed subject to the browser and even if you scroll, that element will not change its position. The only difference is that it works exactly like absolute, it will always take its position according to the browser (given top, left, etc.), not subject to parent elements like absolute.



p.f_text {
position: fixed;
top: 20px;
right: 15px;
color: maroon;
}