这篇文章给大家分享的是有关html布局的常见类型是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强> 1,流动布局(html网页默认的布局方式)
特点:
1块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。
2,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
<强> 2,浮动布局(浮动)
特点:默认布局下,块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示。就需要使用浮动来实现。
如下
<强> 3层模型
特点:如果我想一个div在另外一个div的上面,我们就需要可以使用绝对定位来完成,层模型的三种定位方式相对的,绝对的,固定的
<>强绝对定位(绝对)
需要设置位置:绝对(表示绝对定位),这条语句的作用将元素从文档流中拖出来,
然后使用左,右,顶部,底部属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块,则相对于身体元素,即相对于浏览器窗口。
<强>相对定位(相对)
如果想为元素设置层模型中的相对定位,需要设置位置:相对(表示相对定位),
它通过左,右,顶部,底部属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按静态(浮动)方式生成一个元素(并且元素像层一样浮动了起来),
然后相对于以前的位置移动,移动的方向和幅度由左、右,顶部,底部属性确定,偏移前的位置保留不动。
<强>固定定位(固定)
固定:表示固定定位,与绝对定位类型类似,
但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,
除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,
这与background-attachment:固定吗?属性功能相同。
<强>注意:
在使用z - index属性的时候,只有元素使用了位置属性的,才具有z - index属性。没有使用位置的属性的元素是没有z - index属性的,设置了也没有用
感谢各位的阅读!关于“html布局的常见类型是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
