HTML元素内联元素、块级元素的布局介绍
程序员文章站
2022-04-27 12:56:56
...
HTML元素布局展示
默认展示(未添加width和height属性)
①HTML元素在浏览器展示的方式是:从上到下,从左到右。
②内联元素,是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够,就会换至下一行。
③块级元素,根据内联元素的展示方式展示大概区域;当浏览器的宽度减少时,会自动扩充块级元素的height属性的值,以容纳内嵌元素的展示
展示页面
增加了width属性的展示
块级元素(div)增加了width属性
结论
①当块级元素没设置width属性时,浏览器宽度的变更,会压缩块元素内嵌元素的排版。
②设置块级元素的width属性时,浏览器的width属性值变更,不会影响到块级元素里的内嵌元素的布局,他们(内嵌元素)受父级块级元素的影响。
适用范围:导航条(导航条里有多个a标签,可放在一个div里,并给div附加width属性;以免浏览器缩小,造成导航排版乱掉);
以上就是HTML元素内联元素、块级元素的布局介绍的详细内容,更多请关注其它相关文章!
推荐阅读
-
HTML行类元素与块级元素_html/css_WEB-ITnose
-
HTML5的结构和语义——语义性的块级元素(三)
-
HTML5的结构和语义——语义性的内联元素(四)
-
探讨行内元素转换为块级元素_html/css_WEB-ITnose
-
HTML行类元素与块级元素_html/css_WEB-ITnose
-
html块级元素和行内元素_html/css_WEB-ITnose
-
HTML中time元素的使用介绍
-
【HTML基础】*元素、块元素、内联元素、可变元素、元素属性_html/css_WEB-ITnose
-
移除行块级元素之间的空格(译文)_html/css_WEB-ITnose
-
CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose