Передача ширины и высоты с помощью свойств width, height, max-width и min-height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина и высота</title>
<style>
body {
font-size: 20px;
background: #fc0;
color: #000;
}
p {
background: white;
}
#p1 {
width: 300px;
}
#p2 {
height: 100px;
}
#p3 {
width: 50%;
}
#p4 {
max-width: 500px;
}
#p5, #p6 {
min-height: 100px;
}
#htmldog {
background: none;
}
#htmldog a {
display: block;
width: 120px;
background: white;
text-align: center;
transition: width .5s;
}
#htmldog a:hover {
width: 100%;
}
</style>
</head>
<body>
<h1>Ширина и высота</h1>
<p>Куча абзацев…</p>
<p id="p1"><code>width: 300px; /* а высота - это просто высота содержимого */</code></p>
<p id="p2"><code>height: 100px; /* а высота - это просто высота содержимого */</code></p>
<p id="p3"><code>width: 50%; /* 50% от ширины родительского элемента абзаца, который в данном случае является телом */</code></p>
<p id="p4"><code>max-width: 500px; /* ширина 100% (потому что это значение абзаца по умолчанию), но только до 500 пикселей */</code></p>
<p id="p5"><code>min-height: 100px; /* Высота не менее 100 пикселей */</code></p>
<p id="p6"><code>min-height: 100px; /* Это значение может превышать 100 пикселей. Если бы абзац был посвящен этому, тому, другому, о чем-нибудь действительно, например, действительно, действительно, действительно интересном, о слонах, или пузырьках, или яйцах-пашот, или русских матрешках, или антидизайнментаризме, например, если в этих случаях, в этом деле Ваффли, или, если, для (другого) примера, там были не настоящие вафли, а подлинные, очень необходимые вещи, которые нужно было сказать, например, если бы там было предложение о слонах, а в абзаце на самом деле не говорилось о пузырьках, яйцах-пашот, русских матрешках или антидизайнментаризме, или о чем-либо еще в этом отношении, если, в таком случае, в абзаце должны были быть подробно описаны бивни, или толстокожие, или хоботы, или что-либо связанное со слонами, тогда, хотя это вполне могло бы быть вафельным, есть также шанс, что это могло бы быть очень актуальным и не вафельным, но в любом случае суть в том, что содержание могло бы продолжаться, и продолжаться, и и так далее, и так далее, и в таких обстоятельствах стандартный абзац bog, вафельный или нет, может быть довольно длинным и может, вполне разумно, требовать большей высоты, чем 100 пикселей, вафельный он или нет. */</code></p>
</body>
</html>Страницы в тему:
- Макет страницы (Продвинутый урок CSS)
