- 浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动布局</title> <style> .box{ overflow: hidden; } .box1 { float: left; background: red; width: 20%; height: 80px; } .box2 { float: right; background: blue; width: 80%; height: 180px; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>效果：
代码量少，能够轻松实现多列布局（父元素高度坍塌那都不叫事）。但是，无法实现各列高度自适应，设置多列宽度后，剩下一列宽度无法自适应,而且浮动原本不是用来布局的，他是用来实现文字环绕图片来着。而且无法通过父元素设置text-align:center,使得子元素居中显示，浮动是紧贴顶部的。无法设置vertical属性进行设置垂直对其方式。
使用场景：早期布局神器，但是很多地方需要设置绝对值,导致无法自适应，或者在设置百分比的时候容易导致布局错乱
案例：w3c官方文档
- 绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位布局</title> <link rel="stylesheet" href="css/install.css"> <style> .box { position: relative; } .box1 { background: red; width: 20%; height: 80px; } .box2 { position: absolute; display: inline-block; background: blue; width: 80%; height: 180px; top: 0px; left: 20%; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>效果：
高宽都不能自适应，而且position具有破坏性，脱离了文档流，具有遮罩特性。一般用作弹出层。京东、淘宝、天猫首页商品都有使用，一般不用来布局
- display:inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display:inline-block</title> <link rel="stylesheet" href="css/install.css"> <style> .box{ overflow: hidden; font-size: 0px; } .box1 { display: inline-block; background: red; width: 20%; height: 80px; font-size: 20px; text-align: center; vertical-align: top; } .box2 { display: inline-block; background: blue; width: 80%; height: 180px; font-size: 20px; text-align: center; vertical-align: top; } </style> </head> <body> <div class="box"> <div class="box1">box1</div> <div class="box2">box2</div> </div> </body> </html>效果：
没有浮动的烦恼，可以设置各列垂直水平对其，inline-block元素之间有html空白,而且inline-block元素沿着默认的基线对齐，会出现在各种奇形怪状的高度，可以通过vertical-align或者line-height进行设置
- display:table-cell
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位布局</title> <link rel="stylesheet" href="css/install.css"> <style> .box { display: table; table-layout: fixed; width: 100%; text-align: center; } .box>div { display: table-cell; } .box1 { background: red; vertical-align: middle; } .box2 { background: blue; vertical-align: middle; } .box3 { background: yellow; vertical-align: middle; } </style> </head> <body> <div class="box"> <div class="box1"> <p>box1</p> <p>box1</p> </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> </div> </body> </html>效果：
inline-block的升级版，不需要清除各列之间的空白间隙，各列宽度可以根据外边框自适应都能做到可控
- display：flex
未完待续..................
时间： 2024-09-29 17:53:53