Rumah > Artikel > hujung hadapan web > Ketahui tentang format visual CSS

Ketahui tentang format visual CSS

PHPzke hadapan: 2023-08-29 09:45:011309semak imbas

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>

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>

Output

Sebelum mengklik

'semak'

butang -

selepas mengklik butang ' 了解 CSS 视觉格式

' -

Atas ialah kandungan terperinci Ketahui tentang format visual CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css 算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Buat bahagian boleh tatal mendatar dalam CSSArtikel seterusnya：Buat bahagian boleh tatal mendatar dalam CSS

Artikel berkaitan

Lihat lagi

Ketahui tentang format visual CSS

hingga

), dsb.

Contoh

Klik Selepas teks kosong

Ini adalah contoh elemen em -

Sebelum mengklik

Artikel berkaitan