Как создать контейнеры DIV меньшего размера внутри родительского DIV?
Пример работы селекторов CSS3
Изучение HTML5 и CSS3 по обучающим видеороликам; Человек, который сделал пример на изображении для селекторов CSS3, не показал, что он использовал для «div {}», что, как я предполагаю, применимо ко всем DIV. Я хотел бы знать об определенных свойствах, с помощью которых можно достичь такого результата.
Селекторы мне подарили вот такие. Что касается «div{}», я думал, что смогу изменить размер внутренних DIV с помощью свойств «position» и «margin». Можно ли настроить размер внутренних DIV и выровнять их по центру, просто указав «div»?
div {
position: relative;
top: 50%;
width: 90%;
height: 90%;
margin: auto auto auto auto;
}
div.outer-outer {
background-color: red;
}
div.outer-outer div.inner {
background-color: blue;
}
div.outer,
div.inner-inner {
background-color: yellow;
}
div#main-section {
background-color: green;
}
div.footer-section {
background-color: purple;
}<div class = "outer-outer">
Outer Outer
<div class = "outer">
Outer
<div class = "inner">
Inner
<div class = "inner-inner">
Inner Inner
</div>
</div>
</div>
</div><br /><br />
<div id = "main-section">
Main Section
</div><br />
<div class = "footer-section">
Footer Section
</div>
Ответы 2
Возможное решение — настроить отступы «div» следующим образом:
div {
position: relative;
width: 99%;
padding: 10px;
margin: 10px auto;
}
Если вы хотите настроить размер, вам нужно будет изменить процент, назначенный ширине.
Я прокомментировал изменения, которые я сделал. Если вы укажете родительскому элементу или, как я сделал, общему селектору div, отступ, вы сможете отрегулировать положение дочернего элемента.
padding имеет тот же порядок единиц, что и маржа:
вверху > справа > внизу > слева
А чтобы настроить размер конкретного div, вы можете присвоить его классу нужные width и height. Если вы используете относительные единицы измерения, он будет корректировать свой размер в соответствии с родительским элементом в зависимости от области просмотра.
div {
/* position absolute is not needed and has no effect on it. */
width: 90%;
height: 90%;
margin: auto; /* One auto is enough if you want to give every side the same margin */
padding: 1rem 1rem 2rem; /* One possibility to reposition the elements */
}
div.outer-outer {
background-color: red;
}
div.outer-outer div.inner {
background-color: blue;
/* width and height are there for resizing the wanted element */
width: 50%;
height: 20%;
}
div.outer,
div.inner-inner {
background-color: yellow;
}
div#main-section {
background-color: green;
}
div.footer-section {
background-color: purple;
}<div class = "outer-outer">
Outer Outer
<div class = "outer">
Outer
<div class = "inner">
Inner
<div class = "inner-inner">
Inner Inner
</div>
</div>
</div>
</div><br /><br />
<div id = "main-section">
Main Section
</div><br />
<div class = "footer-section">
Footer Section
</div>