1. 布局核心原则
-
语义化优先：用HTML5语义标签定义结构，替代无意义的div堆砌，提升代码可读性、SEO效果和无障碍访问体验。
-
响应式适配：网页能自动适应不同设备屏幕尺寸和分辨率，核心是“一次开发，多端适配”，避免为不同设备单独开发页面。
-
视觉层次清晰：突出核心内容，合理引导用户视线，优化交互效率，让布局既美观又实用。
视口设置：必须在HTML头部添加视口标签，确保移动端适配，避免页面缩放异常。 示例：<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
相对单位：替代固定像素（px），适配不同屏幕，核心单位包括： – 百分比（%）：相对于父元素尺寸，适用于容器宽度自适应； – 视口单位（vw/vh）：1vw=视口宽度的1%，1vh=视口高度的1%，适用于全屏或高度自适应场景； – rem/em：rem相对于根元素（html）字体大小，em相对于当前元素字体大小，适用于字体和内边距适配
语义化标签：HTML5核心标签，用于定义页面结构，避免无意义div，常用标签及用途如下： – <header>：页面或区域头部（如网站Logo、导航）； – <nav>：导航链接区域（仅包含主要导航）； – <main>：页面核心内容（整个页面仅一个）； – <article>：独立内容块（如文章、商品卡片）； – <section>：主题性内容组（如章节、栏目）； – <aside>：辅助内容（如侧边栏、相关推荐）； – <footer>：页面或区域底部（如版权、联系方式
核心
现代网页布局的核心是「Flexbox（弹性盒）」和「CSS Grid（网格）」，两者常组合使用：Grid负责页面整体框架（二维布局），Flexbox负责局部元素对齐（一维布局），搭配媒体查询实现全端适配。
-
容器与项目：给父元素设置display: flex，父元素成为Flex容器，其直系子元素成为Flex项目；
-
两根轴线：主轴（由flex-direction定义，默认水平向右）和交叉轴（垂直于主轴，默认垂直向下），所有对齐属性均围绕两根轴线展开；
-
默认行为：项目沿主轴排列，不换行，项目不会拉伸主轴方向，会拉伸交叉轴方向填满容器。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
请登录后查看评论内容