Ketahui tentang format visual CSS-tutorial css-php.cn

Ketahui tentang format visual CSS

PHPz

Lepaskan： 2023-08-29 09:45:01

ke hadapan

1353 orang telah melayarinya

Pemformatan visual CSS ialah model yang sepadan dengan algoritma yang memproses dan mengubah setiap elemen dokumen untuk menghasilkan satu atau lebih kotak yang mematuhi model kotak CSS.

Kendalikan penjanaan kotak CSS untuk elemen -

Peringkat blok

Elemen ini memaksa membalut di atas dan di bawah sendiri dan mengambil keseluruhan lebar yang tersedia, walaupun kandungannya tidak memerlukannya.
Contohnya: sekatan (), tajuk (
hingga
), dsb.

Tahap Sebaris

Elemen ini tidak memaksa pembalut di atas dan di bawahnya dan hanya mengambil lebar yang diperlukan oleh kandungan.
Contoh: Span (), Elemen Kuat ()

Mari kita lihat contoh penjanaan kotak tahap blok -

Contoh

Demonstrasi Langsung

<!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;
}
</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 === &#39;&#39;)
      headingPreview.innerHTML = &#39;Write a Heading&#39;;
   else{
      for(var i=0; i<6; i++){
         var radInp = document.getElementsByClassName(&#39;radio&#39;)[i];
         if(radInp.checked === true && textSelect.value !== &#39;&#39;){
            headingPreview.innerHTML = &#39;<&#39;+radInp.value+&#39;>&#39;+textSelect.value+&#39;</&#39;+radInp.value+&#39;>&#39;;
            headingPreview.innerHTML += &#39;<&#39;+radInp.value+&#39;>&#39;+textSelect.value+&#39;</&#39;+radInp.value+&#39;>&#39;;
         }
      }
   }
}
</script>
</body>
</html>

Salin selepas log masuk

Klik Selepas teks kosong

Output P Butang '

了解 CSS 视觉格式 klik pada

di mana medan teks tidak kosong dan

butang 'Pratonton' selepas memilih "h2" butang radio -

了解 CSS 视觉格式 kotak sebaris Mari kita jana tahap -

Contoh

Ini adalah contoh elemen em -

Demo langsung

<!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;
}
</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>

Salin selepas log masuk

Output