Does the 50px is equivalent to the 50% attributes?

Question

Because I've noticed the differences of both every time I run each code.

Answer 1

50px is only 50 in value
50% means half size of screen.

Answer 2

px is an absolute unit where as % percentage is relative unit.

in simplest words px doesn't depend on size of any other element.

% vary depending upon size of elements parent.

50% *doesn't* mean *half of screen size*. it means half of size of it's nearest parent.

as an experiment try markup as:
<div id="parent">
<div id="child"></div>
</div>

and css:
div{
border:1px solid red;
}

#parent{
height:200px;
width:200px;
}
#child{
height:50%;
width:50%;
}

you'll notice height and width of child to be half of it's nearest parent not the screen height.

however if you set size of child in px it's independent of parent.

for better understanding use internet.

Answer 3

Thank you :)