1.圣杯布局
<!DOCTYPE html> <html> <!-- 圣杯布局 标准三列布局要求： 1.两边固定 当中自适应 2.当中列要完整显示 3.当中列要优先加载 --> <!-- 知识点 浮动：搭建完整的布局框架 margin 为赋值：调整旁边两列的位置（是三列布局到一行上） 使用相对定位：调整旁边两列的位置（是两列位置调整到两头） --> <head> <style> * { margin: 0; padding: 0; } #header, #footer { height: 20px; text-align: center; border: 1px solid deeppink; background-color: gray; } #content { padding: 0 200px; } #content .middle { float: left; width: 100%; background-color: pink; } #content .left { position: relative; left: -200px; float: left; width: 200px; margin-left: -100%; background-color: yellow; } #content .right { position: relative; right: -200px; margin-left: -200px; float: left; width: 200px; background-color: yellow; } /*清除浮动 让浮动的元素有能力撑开父元素的高度*/ .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: block; clear: both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer">footer</div> </body> </html>
2.伪等高布局
<!DOCTYPE html> <html> <!-- 伪等高布局 overflow padding margin 为负值 主要控制盒模型（margin border padding width） --> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 700px; border: 1px solid #ddd; margin: 0 auto; overflow: hidden; } .left { float: left; width: 200px; background: pink; padding-bottom: 1000px; margin-bottom: -1000px; } .right { float: left; width: 300px; background: deeppink; padding-bottom: 1000px; margin-bottom: -1000px; } /* 清除浮动 让浮动的元素有能力去撑开父元素的高度 */ .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: block; clear: both; } </style> </head> <body> <div id="wrap" class="clearfix"> <div class="left"> left<br /> left<br /> left<br /> left<br /> left<br /> </div> <div class="right"> right <br /> right <br /> </div> </div> </body> </html>
3.双飞翼布局
与圣杯布局对比
1.两种布局方式都是把主列放在文档最前面，是主列优先加载
2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局
3.两种布局方式的不同之处在于如何处理中间主列的位置
圣杯布局是利用父容器在左右内边距 + 两个从列相对定位
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左右外边距进行布局调整
<!DOCTYPE html> <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } body { min-width: 600px; } /* 三列的伪等高布局 */ .middle, .left, .right { /* padding-bottom: 10000px; margin-bottom: -10000px; */ height: 50px; line-height: 50px; float: left; } #header, #footer { border: 1px solid #ddd; background-color: gray; text-align: center; } /* 双飞翼布局 */ #content { overflow: hidden; } .middle { width: 100%; background-color: deeppink; } .m_inner { padding: 0 200px; } .left, .right { background-color: pink; width: 200px; text-align: center; } .left { margin-left: -100%; } .right { margin-left: -200px; } </style> </head> <body> <div id="header"> <h4>header</h4> </div> <div id="content"> <div class="middle"> <div class="m_inner"> middle </div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer"> <h4>footer</h4> </div> </body> </html>
4.粘连布局
<!DOCTYPE html> <html> <header> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!-- stickyFooter 粘连footer布局 有一块内容main 当main的高度足够长的时候，footer应该紧跟在main后面的后面 当main元素比较短的时候，我们期望这个footer元素能够粘连在屏幕底部 --> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } #wrap { min-height: 100%; background-color: pink; text-align: center; padding-bottom: 50px; } #footer { height: 50px; line-height: 50px; background-color: deeppink; text-align: center; margin-top: -50px; } </style> </header> <body> <div id="wrap"> <div class="main"> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main <br> main </div> </div> <div id="footer"> footer </div> </body> </html>
5.BFC两列布局
<!DOCTYPE html> <html lang="en"> <head> <!-- BFC是什么 BFC(Block formatting context) 直译为 块级格式化上下文 它是一个独立的渲染区域， 只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干 BFC布局规则： 1.内部的Box会在垂直方向，一个接一个的放置 2.BRC的区域不会雨float box重叠 3.内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的margin会发生重叠 4.计算BFC的高度时，浮动元素也参与计算（清楚浮动，haslayout） 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此 BFC什么时候出现（哪些元素会生成BFC？） 根元素 float属性不为none positon为absolute或fixed overflow不为visible display为inline-blocd,table-cell,table-caption,flex,inline-flex --> <meta charset="UTF-8"> <title>Title</title> <style> #left { width: 200px; background-color: pink; float: left; } #right { overflow: hidden; background-color: deeppink; } </style> </head> <body> <div id='left'> left </div> <div id='right'> right </div> </body> </html>