常见布局形式有哪几种(布局包括)

lxf2023-03-18 16:33:01

html布局的常见类型有哪些?html中有三种布局方式:流动布局、浮动布局和层模型。html的三种布局各有特点。本文将简单谈谈html的三种布局方式的特点。

1。流动布局(html页面的默认布局方法)

特点:

1.块状元素将在包含元素中从上到下垂直延伸,因为块状元素的宽度默认为100%。

2.内联元素将在其包含的元素中从左到右水平显示。(行内元素不像块元素那样独占一行。)

2。浮动

特点:默认布局下,块元素霸道到都独占一行。如果我们现在想并排显示两个块元素。你需要使用float来实现它。

如下

div{ width:200px; height:200px; border:2px red solid; float:right; }

3。层模型

特点:如果我想让一个div在另一个div上面,我们需要能够使用绝对定位来完成图层模型的三种定位方法:相对、绝对和固定。

绝对

你需要设置position:absolute(即绝对定位)。该语句的功能是将元素拖出文档流,
然后使用left、right、top和bottom属性相对于其最近的包含定位属性的父块进行绝对定位。
如果没有这样的包含块,则相对于body元素,也就是相对于浏览器窗口。

相对

如果要设置元素在图层模型中的相对定位,需要设置position:relative(表示相对定位)。
它通过left、right、top和bottom属性确定元素在正常文档流中的偏移位置。
相对定位的过程是先以静态(浮动)的方式生成一个元素(并且元素像层一样浮动),
然后相对于前面的位置移动。移动的方向和幅度由左、右、上、下的属性决定,移动前的位置保持不变。

固定

Fixed:表示固定定位,类似于绝对定位类型,
但其相对移动坐标是视图(屏幕中的网页窗口)本身。
因为视图本身是固定的,不会随着浏览器窗口的滚动条而变化。
除非您移动浏览器窗口的屏幕位置或者改变浏览器窗口在屏幕上的显示大小,
因此,固定定位元素将始终位于浏览器窗口中视图的某个位置,不会受到文档流的影响。
这类似于背景-附件:fi。

注:

使用z-index属性时,只有具有position属性的元素才具有z-index属性。不使用position属性的元素没有z-index属性,设置它是没有用的。

相关文章推荐:

html+css布局的三种方式(自然布局/流动布局/定位布局)_HTML/Xhtml_网页制作

用HTML和HTML实现常用的layout _html/css_WEB-ITnose。

这些是html布局的常见类型。关于html三大布局特征的分析详情,请关注AdminJS的其他相关文章!