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

CSSビジュアルフォーマットモデル

CSS Visual Formattingは、ドキュメントの各要素を処理および変換して、CSSボックスモデルに準拠する1つ以上のボックスを生成するアルゴリズムに対応するモデルです。

生成されたボックスのレイアウトは、-

などのいくつかのプロパティによって異なります。
  • 寸法
  • タイプ-アトミックインラインレベル、ブロック、インライン、またはインラインブロック
  • ポジショニング-絶対、フロート、または通常
  • ドキュメントの子要素と隣接要素との関係
  • 外部情報-ビューポートと画像の幅-高さなど

処理された要素のCSSボックス生成-

  • ブロックレベル
    • これらの要素は、コンテンツがそれを必要としない場合でも、それら自体の上下に改行を強制し、使用可能な全幅を占有します。
    • 例：分割（
      ）、見出し（

      から

      ）など
  • インラインレベル
    • これらの要素は、要素の上下に改行を強制せず、コンテンツに必要な幅のみを使用します。
    • 例：スパン（）、強力な要素（）

例

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#headingPreview h2{
   background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked >
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset></form>
<script>
var textSelect = document.getElementById("textSelect");
var headingPreview = document.getElementById("headingPreview");
function changeHeading() {
   if(textSelect.value === '')
      headingPreview.innerHTML = 'Write a Heading';
   else{
      for(var i=0; i<6; i++){
         var radInp = document.getElementsByClassName('radio')[i];
         if(radInp.checked === true && textSelect.value !== ''){
            headingPreview.innerHTML = '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
            headingPreview.innerHTML += '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
         }
      }
   }
}
</script></body></html>

出力

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

[プレビュー]をクリックした後 テキストフィールドが空のボタン-

CSSビジュアルフォーマットモデル

[プレビュー]をクリックした後 テキストフィールドが空ではなく、「h2」のボタン ラジオボタンがチェックされました-

CSSビジュアルフォーマットモデル

例

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

<!DOCTYPE html>
<html>
<head>
<title>em element</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
em{
   background-color: #FF8A00;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>em-element</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
   for(i=0; i<2; i++){
      var italicObject = document.createElement("EM");
      var italicText = document.createTextNode(textSelect.value);
      italicObject.appendChild(italicText);
      divDisplay.appendChild(italicObject);
   }
}
</script>
</body>
</html>

出力

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

[確認]をクリックする前に ボタン-

CSSビジュアルフォーマットモデル

[確認]をクリックした後 ボタン-

CSSビジュアルフォーマットモデル


  1. CSSの外観プロパティを持つカスタムラジオボタン

    外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。 構文 CSSの外観プロパティの構文は次のとおりです- Selector {    appearance: /*value*/;    -webkit-appearance: /*value*/; /*for Safari and Chrome */    -moz-appearance: /*value*/; /*for Firefox */ } 例 次の例は、CSSの外観プロパティを示しています。

  2. HTML見出し

    HTML見出しは、からまでの6つのレベルを指し、h1が最も重要な見出しレベルであり、h6が最も重要度が低くなっています。 H1、H2、H3、H4、H5、H6は6つの見出しです。 注 −見出しは、検索エンジン（googleなど）がWebページのコンテンツのインデックスを作成するために使用します。 HTML見出しの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML Heading</title> <style>    form {