首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > css教程

了解 CSS 视觉格式

PHPz
PHPz 转载
2023-08-29 09:45:01 950浏览

CSS 视觉格式是一种与算法相对应的模型，该算法处理和转换文档的每个元素以生成一个或多个符合 CSS 框模型的框。

处理元素的 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;
}
</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 视觉格式

让我们看一个内联级别框生成的示例 -

示例

这是 em 元素的示例 -

 Live演示

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

输出

点击'检查'按钮之前 -

了解 CSS 视觉格式

点击'检查'按钮后 -

以上就是了解 CSS 视觉格式的详细内容，更多请关注php中文网其它相关文章！

PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除
上一条：在CSS中创建水平可滚动的部分 下一条：CSS list-style 属性的用法

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！