页面规划有哪些 (页面规划有哪两种类型)

本文目录导航：

• 页面规划有哪些
• html经常出现的三种页面规划方法
• 前端几种经常出现的规划模式

页面规划有哪些

页面规划有以下几种：

1. 栅格规划

栅格规划是一种基于网格的页面规划模式。

它将页面划分红多个等宽或不等宽的栅格或列，内容则依照这些栅格启动陈列。

这种规划模式无利于成功页面的结构化，使内容愈加明晰、有序。

栅格规划实用于多种页面类型，包含网页设计和印刷品设计。

2. 流式规划

流式规划是一种自顺应页面规划模式。

它依据用户设施的屏幕尺寸和分辨率智能调整页面元素的尺寸和位置。

流式规划能够使页面在不同设施上出现出最佳的显示成果，提高用户体验。

这种规划模式实用于照应式网页设计。

3. 弹性规划

弹性规划是一种灵敏的页面规划模式。

它应用CSS的弹性盒子模型（Flexbox）成功页面的灵敏规划。

弹性规划可以轻松地调整页面元素的位置、尺寸和顺序，以顺应不同的屏幕和设施。

这种规划模式实用于须要灵敏调整元素位置的页面设计。

4. 相对定位规划

相对定位规划是一种经过设定元素位置坐标来定位页面元素的规划模式。

在这种规划模式中，元素的位置是相关于其最近的已定位后人元素或视口来设定的。

相对定位规划实用于须要准确管理元素位置的页面设计，如创立弹出框、菜单等。

以上四种是经常出现的页面规划类型。

每种规划模式都有其共同的特点和实用场景，设计师可以依据详细需求和指标选用适合的规划模式来成功最佳的页面设计成果。

html经常出现的三种页面规划方法

前端几种经常出现的规划模式

1.静态规划（固定宽高） 2.弹性规划（flex）————罕用 3.圣杯规划 flex：flex-group、flex-shrink、flex-basis flex：auto/none/正数/一个长度或百分比/两个非正数/一个非正数和一个长度或百分比等 A，flex-group：当父元素有残余空间时，子元素占据残余空间的量 B，flex-shrink：当父元素的空间无余以展现一切的子元素，父元素没设置flex-wrap，子元素须要启动收缩的量 C，flex-basis：示意该子元素的初始宽度 4.自顺应规划（为不同的屏幕分辨率定义的规划 @media媒体查问技术） 5.流式规划：（宽高用百分比，按屏幕分辨率调整，规划不出现变动） 6.照应式规划（经常使用meta标签，宽高随窗口调整智能适配，顺应规划和流式规划的综合模式） 7.栅格规划 1）.栅格(网格划分)：在一个特定区域内划分出有法令的格子，依托这些格子启动有法令的版面规划。

经常使用栅格规划：bootstrap（12列），element（24栏），antDesign 2）.栅格规划 container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙 3）.栅格规划成功照应式规划 规划（经常使用表格启动页面排版和样式设置） 1）.用法display:tabledisplay:table-cell，相当于td元素display:table-row，相当于tr元素table-layout:fixed | auto(自动)：table-layout 属性用于显示表格单元格、行、列；auto, 智能表格规划，列的宽度由单元格中最大内容的宽度选择；fixed ,固定表格规划。