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>
输出点击文本字段为空的'预览'按钮后 -
点击文本字段不为空且的'预览'按钮后选中“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 视觉格式的详细内容。