Layouts

Question 1

What is a Box Model?

Answer 1

Whenever a browser renders an element, it will place it in a box model.

The innermost element in the box model is called content area. The texts are shown in the content area.

Next, we have a padding area. This is used to provide some space outside the content area.

Next, we have a border. If the border is shown, they will show it here.

Next we have a margin area to add space between the elements.

Question 2

What is margin collapsing?

Answer 2

Margin collapsing happens when the top and bottom margins of elements are
combined into a single margin.

The size of the margin is equal to the largest of the two
margins.

Question 3

What is block level elements?

Answer 3

Block level element will occupy the entire available horizontal space. DIvs are block level element.

Spans are inline element. They dont respect width and height property.

Hence, we have inline-block. They dont occupy entire horizontal space but they respect width and height.

Question 4

What is display property?

Answer 4

diplay: block | span | inline-block

There are two types of HTML elements: block-level and inline.
• Block-level elements always start on a new line and take up the entire available
horizontal space. The <p> and </p><div> elements are examples of block-level elements.
• Inline elements don’t start on a new line. They take up as much width as necessary. The
<span>, <a> and <img></img> are a few examples of inline elements.
• We can size elements by setting their width and height properties. These properties
have no effect on inline elements. To size an inline element, we need to set its display
property to inline-block</a></span></div>

Question 5

What is box-sizing?

Answer 5

When the browser renders the element, the width and height will be applied to the content of the box element. This will be difficult to manage.

box-sizing: content-box;

*,
*::before,
*::after{
box-sizing: border-box;
}

Question 6

What is overflow?

Answer 6

Overflow occurs when an element’s content is too large to fit. Using the overflow
property we can specify what should happen when overflow occurs.

for example, create a div with 100px and 100px;
Add Lorem text of 250 words.

Overflow: hidden | scroll;

Question 7

What are the measuring units available in HTML?

Answer 7

There are two types of measuring units -

Absolute- px
Relative - rem, em, vh, vw,

Absolute units dont change in any device and screen size.

Relative units are relative to its container.

vh/vw - relative to the viewport
em - relative to the parent’s font-size
rem- relative to root’s font size.

html{
font-size: 62.5%;
}

default height of a block-level element is 0.

Question 8

What are different positions available in HTML?

Answer 8

There are three types of positioning:

static - default
relative: relative to its actual positon.
abslolute: relative to parent.
fixed

Create 3 boxes -

<div>
<div>
<div>
</div>

~~~
.box--one{
background: black,
position: relative,
left: 5rem;
}
~~~

using relative we can postion using trbl;

~~~
for absolute positioing, make paraeatn relative
<div>
<div>
<div>
</div>
~~~

.boxes{
position:relative;
}

~~~
.box--one{
background: black,
position: absolute,
left: 5rem;
}
</div></div></div></div>

~~~

Question 9

What is z-index?

Answer 9

When we set the z-index the element moves towards us. default is 0. we can have - or + number.

Question 10

What is float?

Answer 10

we can make an elemnt float.

float: left
float: right

all other elemnts will float around this element

example, create box , make it float. add two paragraphs.. These two paragarpahs will flaot.

Question 11

What is the problem with float?

Answer 11

Parent dont see the floating elemnts and hence pareant will collapse. TO fix, we need to clear it.

to clear,

box–one::after{
clear:both,
content: ‘ ‘,
}