web页面布局知识总结

一、布局基础元素默认排列方式块级元素独占一行行内元素并排显示。盒模型所有元素都有内容、内边距、边框、外边距。清除默认样式先重置浏览器默认边距布局更稳定。二、三种常用布局方式标准流元素默认从上到下、从左到右排列不用写样式最基础。浮动float让块级元素横着排列做导航、两栏三栏布局常用。注意浮动后要清除避免父盒子高度塌陷。定位position让元素固定在某个位置适合做悬浮按钮、固定导航、弹窗。相对定位不脱标绝对定位脱标找父级定位固定定位固定在屏幕。三、现代最强布局Flex 布局最常用、最简单的一维布局适合一行或一列排列。给父盒子加 display: flex子元素就能灵活排列。常用功能水平居中、垂直居中、两端对齐、自动占满剩余空间。适用导航、表单、列表、居中、自适应分栏。四、响应式布局让网页在手机、平板、电脑上都能正常显示。要点加视口 meta 标签使用百分比、rem、vw 等单位用媒体查询根据屏幕宽度调整样式五、常用布局场景水平垂直居中优先用 flex两栏 / 三栏布局flex 最方便固定导航固定定位列表排列flex六、总结基础标准流、浮动、定位主流flex 解决大部分布局适配响应式适配多设备