了解 CSS 视觉格式

百变鹏仔 3个月前 (09-20) #CSS

文章标签视觉

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 === &#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>

输出

点击文本字段为空的'预览'按钮后 -

点击文本字段不为空且的'预览'按钮后选中“h2”单选按钮 -

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

示例

这是 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如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写