网页的布局方式有哪些?
发布时间:2021-03-29来源:admin
1.普通布局<br />
每个新的块级元素渲染为新行。行内元素(行内元素/行内块级)则按照顺序被水平渲染直到当前行遇到了边界,然后换到下一行垂直渲染。<br />
2.定位布局<br />
绝对定位:(absolute),元素的位置通过左,上右,下属性来进行定位。<br />
绝对定位的元素是脱离标准流的,不占据标准流中的空间。<br />
绝对定位不区分块级元素,行内元素,行内块元素。<br />
如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点。定位的元素会随着页面滚动而滚动。<br />
固定定位:(fixed),固定定位可以理解为是绝对定位的一种。<br />
固定定位的元素位置是相对于浏览器窗口决定的。<br />
这使得能够创建总是出现在窗口固定位置的元素。<br />
es5,es6不支持固定定位,可以用javascript解决。<br />
相对定位:(relative)相对定位就是相对于自己以前再普通流中的位置来移动,就是相对于其正常位置进行定位。<br />
使用相对定位后,无论元素是否移动,元素都会占据原先的空间。<br />
在相对定位中同一个方向的定位属性只能使用一个。<br />
3。浮动布局<br />
浮动布局只有一种排版方式,就是水平排版,他只能设置某个元素左对齐或者右对齐,先浮动的元素显示再前面,后浮动的元素会显示在后面。<br />
浮动中没有居中对齐,没右center这个取值。<br />
元素浮动后,会脱离文档流,不会占据标准流的空间。<br />