<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Probe</title>
<style>
.Main { /* Вместилище */
width: calc((4vw + 2px) * 10 + 20px);
height: calc(100vh - 20px);
background-color: #000;
border: 4px solid #888;
margin: 0px;
padding: 0px;
position:fixed;
top: 0px;
left: calc(50vw - 20vh - 24px);
}
#DataArea { /* Вывод текста */
background-color: #444;
text-align:right;
font-size:6vh;
color:#fac;
padding-right: 3vh;
}
.Block { /* Все управляемые блоки */
position:relative;
width: 10vh;
height: 10vh;
border: 1px solid #fff;
background-color: #aaa;
border-radius: 25%
}
</style>
</head>
<body>
<div class="Main">
<div id="DataArea">012345678</div>
<div id="Controls">
<div id="F1" class="Block" >1</div>
<div id="F2" class="Block" >2</div>
<div id="F3" class="Block" >3</div>
<div id="F4" class="Block" >4</div>
</div>
</div>
<script>
'use strict';
var b,x,y; //Block-объект, координаты
for (var p=1;p<5;p++) {
x=~~(Math.random()*10);
y=~~(Math.random()*10);
b='F'+p.toString();
b=document.getElementById(b);
b.style.left = 'calc(4vw* ' + x + ' + ' + x + ' * 2px)';
b.style.top='calc(3vh * ' + y + ' + ' + y + ' * 2px)';
// alert(b.style.cssText);
};
</script>
</body></html>
А насчет посмотреть стили -
https://learn.javascript.ru/styles-and-classes