Соотношение padding, margin, border текущего элемента и width-а родительского элемента
Хочу сверстать адаптивный, резиновый сайт. Возник вопрос: нужно задавать padding-и, margin-ы, border-ы текущего элемента в % относительно текущего div-а или родительского div-а (желателен пример)?
$(document).ready(function() {
/*
all__buttons=document.querySelectorAll('.header__button');
[].forEach.call(all__buttons, function(selected__button){
selected__button.addEventListener('click', function(event){
event.target.style.backgroundColor='#5f3ec0';
event.target.style.color='#ffffff';
});
});
*/
$('.header__button').click(function(event){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
event.target.style.color='#ffffff';
}
);
const getItem = `<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
</div>
<div class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<a href="#"><img class="youtube__icon-play" src="../img/Vector.png"></a>
</span>
<span>
<button class="crashvideo" id="ex2">Краш видео</button>
</span>
</div>
<div class="content__text">
Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
</div>
<div class="endlink">
<a href="#">Читать далее</a>
</div>
</div>
`;
if (document.documentElement.clientWidth<640)
{
const getAllItems = () => {
let content = '';
for (let i=0; i<4; i++) {
content+=getItem;
}
return content;
}
const renderAllItems = () => {
document.getElementById('content').innerHTML=getAllItems();
}
renderAllItems();
console.log('Mobile');
}
if ((window.innerWidth>=640) && (window.innerWidth<=1023))
{
/*document.getElementsByClassName('content__article').innerHTML = getItem;*/
/*document.querySelectorAll('.content__article').forEach(i => i.innerHTML = getItem);*/
let blocks = document.querySelectorAll('.content__article');
for (let block of blocks)
{
block.innerHTML=getItem;
/*document.querySelectorAll('.content__article')[i].innerHTML = getItem;*/
}
console.log('Tablet');
}
if (document.documentElement.clientWidth > 1023)
{
console.log('Desktop');
}
}
)body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
/*height: 100%;*/
}
.header > .header__text {
position: relative;
width: (calc(93/360))%;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
border-color: #5f3ec0;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px (calc(15/360))% 7px 0px;
overflow: hidden;
/*margin-right: 10%;*/
}<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content" id="content">
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
</div>
</div>
<button class="show__more">Показать еще</button>
<!-- </div> -->
<div class="footer">
<div class="threecolumnfooter">
<div class="firstfootercolumn">
<div class="logo__company">
<img src="../img/lastlogo1.png">
</div>
<div class="contacts">
<div class="contacts__title">
Контакты
</div>
<div class="contacts__telephones">
<div class="telephone1">
+7 (800) 333 32 24
</div>
<div class="telephone2">
+7 (812) 448 68 11
</div>
</div>
<button class="requestcall">
Заказать звонок
</button>
</div>
<div class="privacy__policy">
Политика конфиденциальности
</div>
<div class="terms__of__use">
Пользовательское соглашение
</div>
</div>
<div class="secondfootercolumn">
<div class="internetshop">
<div class="internetshop__title">
Интернет магазин
</div>
<div class="disclosure__arrow">
>
</div>
<div class="about__shop">
О магазине
</div>
<div class="delivery__and__payment">
Доставка и оплата
</div>
<div class="guarantees__and__returns">
Гарантии и возврат
</div>
<div class="credit__and__installments">
Кредит и рассрочка
</div>
<div class="trade__in">
Trade-in
</div>
<div class="promotions">
Акции
</div>
<div class="catalog">
Каталог товаров
</div>
<div class="service">
Сервис
</div>
<div class="news">
Новости
</div>
<div class="reviews">
Обзоры
</div>
</div>
</div>
<div class="thirdfootercolumn">
<div class="company">
<div class="company__title">
Компания
</div>
<div class="disclosure__arrow">
>
</div>
<div class="about__us">
О нас
</div>
<div class="company__news">
Новости
</div>
<div class="vacancies">
Вакансии
</div>
<div class="company__contacts">
Контакты
</div>
</div>
<div class="help__to__the__buyer">
<div class="help__to__the__buyer__title">
Помощь покупателю
</div>
<div class="help__to__the__buyer__title__for__tablet">
Помощь
</div>
<div class="disclosure__arrow">
>
</div>
<div class="contacts__for__help">
Контакты
</div>
<div class="warranty__and__return">
Гарантия и возврат
</div>
<div class="service__for__help">
Сервис
</div>
<div class="support">
Поддержка
</div>
</div>
</div>
</div>
<div class="footerend">
<div class="socialnetworks__links">
<div class="socialnetworks__links__title">
Мы в соц. сетях
</div>
<div class="socialnetworks__links-images">
<div class="facebook-image">
<embed src="../img/facebook.svg">
</div>
</div>
</div>
<div class="allrights">
<div class="allrights__text">
© 2020 Все права защищены
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>Как задать размеры элемента header__text, header__buttons и header__button, и относительно каких элементов, чтобы было резиново? Какой элемент является родительским по отношению к margin-right, указанному на рисунке (см. @Paprika)? Паддинги и бордеры должны задаваться относительно div-а, который они обрамляют, а мэрджины относительно div-a, в котором они содержатся? (правильно ли я понял @Paprika)
