Learn about CSS visual formats-CSS Tutorial-php.cn

Learn about CSS visual formats

PHPz

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

forward

1353 people have browsed it

CSS visual formatting is a model that corresponds to an algorithm that processes and transforms each element of a document to produce one or more boxes that conform to the CSS box model.

Handling CSS box generation for elements -

Block level

These elements force a line wrap above and below themselves and take up the available of the entire width, even if their content doesn't require it.
For example: partition (), title (
to
), etc.

Inline Level

These elements do not force wrapping above and below them, and only take up as much width as the content requires.
Example: span(), strong element()

Let’s see an example of block-level box generation-

Example

Live demonstration

<!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>

Copy after login

Output

After clicking the 'Preview' button with the text field empty-

了解 CSS 视觉格式

Click the 'Preview' button where the text field is not empty and and select "h2" Radio button-

了解 CSS 视觉格式

Let's see an example of inline level box generation -

Example

This is an example of an em element-

Live Demo

<!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>

Copy after login

Output

Before clicking the 'Check' button-

了解 CSS 视觉格式

After clicking the 'Check' button-

Learn about CSS visual formats

The above is the detailed content of Learn about CSS visual formats. For more information, please follow other related articles on the PHP Chinese website!

Learn about CSS visual formats

to

), etc.

Example

Output

Example

Output