作为页眉区域,包含网站标题或Logo。
2、紧随其后使用
立即学习“前端免费学习笔记(深入)”;
3、用包裹页面核心内容,内部可嵌套多个表示独立文章单元。
4、侧边栏内容放入
二、Flexbox弹性布局
Flexbox专为一维布局设计,适用于导航栏、卡片排列、居中对齐等场景。通过设置容器display: flex,控制子元素的排列方向、换行、对齐方式。
1、给父容器添加CSS属性display: flex,并设定flex-direction为row或column。
2、使用justify-content控制主轴对齐方式,如space-between可使子项两端对齐并均匀分布间隙。
3、使用align-items控制交叉轴对齐,如center可实现垂直居中。
4、对单个子元素应用align-self可覆盖容器级对齐设置,此操作优先级高于容器align-items。
三、Grid网格布局
CSS Grid提供二维布局能力,允许同时定义行与列,适合复杂版面如仪表盘、图文混排、响应式相册等。容器通过grid-template-rows和grid-template-columns划分轨道。
1、将父容器display设为grid,并用grid-template-areas定义命名区域,如"header header" "nav main" "footer footer"。
2、为每个子元素设置grid-area属性,匹配模板中对应名称,例如header { grid-area: header; }。
3、使用gap属性统一设置网格间距,gap值不可为负数。
4、通过grid-column和grid-row指定某元素跨越多列或多行,如grid-column: 1 / -1表示横跨全部列。
四、浮动布局(兼容旧项目)
尽管Flexbox和Grid已成主流,但部分遗留系统仍依赖float实现多栏排版。浮动会使元素脱离文档流,需清除浮动以避免父容器高度塌陷。
1、对需要并排显示的块级元素设置float: left或float: right。
2、在浮动元素的父容器末尾添加空
并设clear: both,或直接对父容器应用
overflow: hidden触发BFC。
3、为浮动元素显式声明width,未设宽度的浮动块级元素将收缩至内容宽度。
4、避免对行内元素直接使用float,应先将其display设为block或inline-block。
五、响应式流体布局
流体布局基于相对单位(如%、rem、vw/vh)构建,结合媒体查询适配不同视口尺寸。核心是容器宽度设为百分比,字体与间距采用rem单位,根字体大小随视口动态调整。
1、设置html { font-size: 100%; },并在媒体查询中按断点修改该值,如@media (max-width: 768px) { html { font-size: 14px; } }。
2、所有宽度相关属性使用%,高度慎用%,避免内容溢出时高度失效。
3、图片添加max-width: 100%和height: auto,防止超宽图片撑破容器。
4、使用min-width和max-width限制容器最小与最大宽度,确保小屏下不缩太小、大屏下不无限延展。