<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
等高布局：
指多列子元素在父元素中实现等高视觉效果的布局技巧
实现要点：
①多列
②每一列的背景要不同
③其中任意一列变高，其他列要同步变高
方法一：
原理：利用padding和margin负值相互抵消
padding 提前延申背景
margin的负值抵消padding的占位
优缺点：
①需要合理的控制padding和margin的负值
②可以实现任意列的等高布局
方法二：
原理：盒子的层层嵌套，利用内盒子高度的变化，外盒子的高度也会变化
步骤：
①准备三个负责背景的盒子，在html结构上要嵌套结构
②将内容盒子放在最内层的背景盒子里面bg3
③最内层盒子bg3清除浮动
④将bg2和bg3移动，相对定位，形成三列背景效果
⑤将内容盒子移动到对应的位置即可
优缺点：
①结构复杂
②可以创建任意列
③方便通过百分比实现自适应
-->
<!--
圣杯布局：
①三列（不一定等高）
②改变加载顺序，优先加载中间列（结构：中左右，显示效果：左中右）
③中间列自适应，两侧列固定
步骤：
①外盒子左右需要固定padding值，预留左右两侧盒子的位置+
②center宽度为100%，左右两个盒子固定宽度
③结构上要浮动
④移动.left盒子通过margin-left：-100%；，配合相对定位left：-左盒子宽度；移动到左侧预留的位置
⑤移动.right盒子通过margin-left：-右盒子的宽度；，配合相对定位，left：右盒子的宽度；，移动到右侧预留的位置。
-->
<!--
双飞翼布局：
步骤：
①centerbox与left和right要在一排
②centerbox要设定固定宽度，left盒子和right盒子固定宽度
③centerbox内部的center盒子不固定宽度，需要通过左右margin值预留出左右两个盒子的位置
④移动left盒子，通过margin-left：-100%；实现
⑥移动right盒子，通过margin-left：-右盒子的宽度；实现
-->
<!--
滑动门：
-->
</body>
</html>
扫一扫
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
