标签:布局
浮动
<!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
未完待续..................
本文出自 “子莫首” 博客,请务必保留此出处http://zimoushou.blog.51cto.com/4306790/1729213
标签:布局
原文地址:http://zimoushou.blog.51cto.com/4306790/1729213