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

CSSで生成されるボックスのタイプ

ビジュアルフォーマットモデルで処理した後、ドキュメントツリーの要素ごとに1つ以上のボックスが生成されます。生成されたボックスには特定のCSSプロパティが関連付けられているため、HTMLでレンダリングされます。

次のボックスがCSSで生成されます-

  • ブロックレベルの要素とブロックボックス
    • 匿名のブロックボックス
  • インラインレベルの要素とインラインボックス
    • 匿名のインラインボックス

例

ブロックレベルの要素とブロックボックスの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   box-sizing: border-box;
   /*margin:5px;*/
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   height: 40px;
   width: 100%;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSで生成されるボックスのタイプ

例

インラインレベルの要素とインラインボックスの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSで生成されるボックスのタイプ


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

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

  2. CSSの要素タイプセレクター

    CSS要素タイプセレクターは、タイプのすべての要素を選択するために使用されます。 CSS要素タイプセレクターの構文は次のとおりです 構文 element {    /*declarations*/ } 例 次の例は、CSS要素タイプセレクターを示しています <!DOCTYPE html> <html> <head> <style> li {    list-style: none;    margin: 5px;    border-bottom-style: do