CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの要素の幅と高さ

CSSのheightプロパティとwidthプロパティは、要素の高さと幅をそれぞれ指定するために使用されます。 max-height、max-width、min-height、およびmin-widthプロパティを使用して、これらのプロパティの最大値と最小値を設定することもできます。

構文

CSSの高さとCSSの幅のプロパティの構文は次のとおりです-

Selector {
   height: /*value*/
   width: /*value*/
}

要素の実際の幅と高さは次のように計算されます-

ボックスサイズ 計算
全幅 幅+パディング-左+パディング-右+ボーダー-左+ボーダー-右+マージン-左+マージン-右
全高 高さ+パディングトップ+パディングボトム+ボーダートップ+ボーダーボトム+マージントップ+マージンボトム

例

次の例は、CSSの高さとCSSの幅のプロパティを示しています-

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
   margin: auto;
   width: 400px;
   height: 80px;
   border: 2px solid black;
   display: flex;
   border-radius: 15px;
}
#demo div {
   flex: 1;
   border: thin dotted;
   border-radius: 50%;
   line-height: 60px;
   text-align: center;
}
#orange {
   box-shadow: inset 0 0 8px orange;
}
#green {
   box-shadow: inset 0 0 8px green;
}
#blue {
   box-shadow: inset 0 0 8px blue;
}
#red {
   box-shadow: inset 0 0 8px red;
}
</style>
</head>
<body>
<div id="demo">
<div id="orange">Somebody</div>
<div id="green">that I</div>
<div id="blue">used</div>
<div id="red">to know</div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSの要素の幅と高さ

例

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: 10% 35%;
   box-shadow: 0 0 6px 1px black;
   max-width: 200px;
   max-height: 150px;
   overflow: auto;
}
</style>
</head>
<body>
<h2>Java 8 Features</h2>
<article>
Lambda expression adds functional processing capability to Java.
Referencing functions by their names instead of invoking them directly.
Interface to have default method implementation.
New compiler tools and utilities are added like ‘jdeps’ to figure out dependencies.
New stream API to facilitate pipeline processing.
Improved date time API.
Emphasis on best practices to handle null values properly.
Nashorn, a Java-based engine to execute JavaScript code.
</article>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSの要素の幅と高さ


  1. CSSのブロックレベルの要素とブロックボックス

    ブロックレベルの要素にはCSS表示があります プロパティが「block」、「list-item」、または「table」のいずれかに設定され、これらの要素が上下に改行を強制します。ブロックレベルのボックスは、配置スキームの一部であり、子ボックスを含む各ブロックレベルの要素によって生成されます。 ブロックコンテナボックスには、ブロックレベルのボックスが含まれ、ブロックの書式設定コンテキストに従うか、インラインレベルのボックスが含まれ、インラインの書式設定コンテキストに従います。ブロックボックスは、ブロックレベルのボックスがブロックコンテナでもある場合に使用される用語です。 匿名ブロックボックス

  2. CSSのインラインレベルの要素とインラインボックス

    インラインレベルの要素では、CSS表示プロパティが「inline」、「inline-table」、または「inline-block」のいずれかに設定されており、これらの要素は上下に改行を強制しません。インラインレベルのボックスは、配置スキームの一部であり、子ボックスを含む各インラインレベルの要素によって生成されます。 インラインボックスは、コンテンツがインラインフォーマットコンテキストに従うボックスです。インラインボックスはいくつかのインラインボックスに分割されますが、分割されないインラインボックスはアトミックインラインレベルボックスと呼ばれます。 匿名のインラインボックスは、開発者が制御