1. 三列布局优先方法
需求 :
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
实现方法 :
1. 浮动 : 尽量使用浮动进行布局
2. 定位 :尽量不要使用定位来处理布局框架, 因为定位脱离文档流
1 . 浮动(推荐) :圣杯布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1.两边固定 当中自适应 8 2.当中列要完整显示 9 3.当中列要优先加载 10 --> 11 12 <!-- 13 浮动: 搭建完整的布局框架 14 margin 为赋值:调整旁边两列的位置(使三列布局到一行上) 15 使用相对定位:调整旁边两列的位置（使两列位置调整到两头） 16 --> 17 18 <style type="text/css"> 19 *{ 20 margin: 0; 21 padding: 0; 22 } 23 body{ 24 min-width: 600px; 25 } 26 #content{ 27 padding: 0 200px; 28 } 29 #header,#footer{ 30 height: 20px; 31 text-align: center; 32 border: 1px solid deeppink; 33 background: gray; 34 } 35 #content .middle{ 36 float: left; 37 width: 100%; 38 background: pink; 39 /*padding: 0 200px;*/ 40 } 41 #content .left{ 42 position: relative; 43 left: -200px; 44 margin-left: -100%; 45 float: left; 46 width: 200px; 47 background: yellow; 48 } 49 #content .right{ 50 position: relative; 51 right: -200px; 52 margin-left: -200px; 53 float: left; 54 width: 200px; 55 background: yellow; 56 } 57 58 59 60 .clearfix{ 61 *zoom: 1; 62 } 63 .clearfix:after{ 64 content: ""; 65 display: block; 66 clear: both; 67 } 68 </style> 69 </head> 70 <body> 71 <div id="header">header</div> 72 <div id="content" class="clearfix"> 73 <div class="middle"> 74 <h4>middle</h4> 75 <!--<h4>middle</h4> 76 <h4>middle</h4> 77 <h4>middle</h4> 78 <h4>middle</h4>--> 79 </div> 80 <div class="left">left</div> 81 <div class="right">right</div> 82 </div> 83 <div id="footer">footer</div> 84 </body> 85 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1.两边固定 当中自适应 8 2.当中列要完整显示 9 3.当中列要优先加载 10 --> 11 12 <!-- 13 浮动: 搭建完整的布局框架 14 margin 为赋值:调整旁边两列的位置(使三列布局到一行上) 15 使用相对定位:调整旁边两列的位置（使两列位置调整到两头） 16 --> 17 18 <style type="text/css"> 19 *{ 20 margin: 0; 21 padding: 0; 22 } 23 body{ 24 min-width: 600px; 25 } 26 #content{ 27 overflow: hidden; 28 padding: 0 200px; 29 } 30 #header,#footer{ 31 height: 20px; 32 text-align: center; 33 border: 1px solid deeppink; 34 background: gray; 35 } 36 #content .middl,#content .left,#content .right{ 37 padding-bottom: 10000px; 38 margin-bottom: -10000px; 39 } 40 #content .middle{ 41 float: left; 42 width: 100%; 43 background: pink; 44 /*padding: 0 200px;*/ 45 } 46 #content .left{ 47 position: relative; 48 left: -200px; 49 margin-left: -100%; 50 float: left; 51 width: 200px; 52 background: yellow; 53 } 54 #content .right{ 55 position: relative; 56 right: -200px; 57 margin-left: -200px; 58 float: left; 59 width: 200px; 60 background: yellow; 61 } 62 63 64 65 .clearfix{ 66 *zoom: 1; 67 } 68 .clearfix:after{ 69 content: ""; 70 display: block; 71 clear: both; 72 } 73 </style> 74 </head> 75 <body> 76 <div id="header">header</div> 77 <div id="content" class="clearfix"> 78 <div class="middle"> 79 <h4>middle</h4> 80 <h4>middle</h4> 81 <h4>middle</h4> 82 <h4>middle</h4> 83 <h4>middle</h4> 84 <h4>middle</h4> 85 <h4>middle</h4> 86 <h4>middle</h4> 87 </div> 88 <div class="left">left</div> 89 <div class="right">right</div> 90 </div> 91 <div id="footer">footer</div> 92 </body> 93 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--两组实现的对比: 7 1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。 8 2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。 9 3.两种布局方式的不同之处在于如何处理中间主列的位置： 10 圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 11 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 12 --> 13 <style type="text/css"> 14 *{ 15 margin: 0; 16 padding: 0; 17 } 18 body{ 19 min-width: 600px; 20 } 21 22 23 /*头部 脚部样式*/ 24 #header,#footer{ 25 border: 1px solid; 26 background: gray; 27 text-align: center; 28 } 29 30 /*三列的伪等高布局*/ 31 #content .middle,#content .left,#content .right{ 32 /*padding-bottom:10000px ; 33 margin-bottom: -10000px;*/ 34 height: 50px; 35 line-height: 50px; 36 float: left; 37 } 38 39 /*双飞翼布局*/ 40 #content{ 41 overflow: hidden; 42 } 43 #content .middle{ 44 width: 100%; 45 background: deeppink; 46 } 47 #content .middle .m_inner{ 48 padding: 0 200px; 49 } 50 #content .left,#content .right{ 51 background: pink; 52 width: 200px; 53 text-align: center; 54 } 55 #content .left{ 56 margin-left: -100%; 57 } 58 #content .right{ 59 margin-left: -200px; 60 } 61 62 </style> 63 </head> 64 <body> 65 <div id="header"> 66 <h4>header</h4> 67 </div> 68 <div id="content"> 69 <div class="middle"> 70 <div class="m_inner"> 71 middle 72 </div> 73 </div> 74 <div class="left">left</div> 75 <div class="right">right</div> 76 </div> 77 <div id="footer"> 78 <h4>footer</h4> 79 </div> 80 </body> 81 </html>
2 . 定位(不建议) : 三列布局:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!-- 7 1.两边固定 当中自适应 8 2.当中列要完整显示 9 --> 10 <style type="text/css"> 11 12 *{ 13 margin: 0; 14 padding: 0; 15 } 16 body{ 17 /*2*left+right*/ 18 min-width: 600px; 19 } 20 div{ 21 height: 100px; 22 } 23 #left,#right{ 24 width: 200px; 25 background: pink; 26 } 27 #middle{ 28 background: deeppink; 29 padding: 0 200px; 30 } 31 #left{ 32 position: absolute; 33 left: 0; 34 top: 0; 35 } 36 #right{ 37 position: absolute; 38 right: 0; 39 top: 0; 40 } 41 </style> 42 </head> 43 <body style="position: relative;"> 44 <div id="left">left</div> 45 <div id="middle">middle</div> 46 <div id="right">right</div> 47 </body> 48 </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ overflow: hidden; height: 100%; } body{ overflow: auto; height: 100%; } #test{ position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: pink; } </style> </head> <body> <div id="test"> </div> <div style="height: 1000px;"> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> csjkahcjk <br /> </div> </body> </html>
1. 定位参照于谁块来定位
没有定位 :包含块
相对 : 元素本来的位置
绝对 :包含块
如果最近的祖先元素中存在定位元素，则这个定位元素就是包含块
如果没有，包含块为初始包含块
固定 : 视口
2. 什么是初始包含块
是一个视窗大小的矩形，不等于视窗
3. left top right bottom width height
默认值为auto
margin padding
默认值 0
boder-width
如果不存在border-style
4. 百分比参照于谁
width margin padding:包含块的width
height:包含块的height
left:包含块的width
top :包含块的height
5.浮动
浮动提升半层
6.三列布局
两边固定，当中自适应
中间列要完整的显示
中间列要优先加载
定位
浮动
圣杯
双飞翼
7.margin为负值（margin不影响元素的位置）
负值:将元素的边界往里收
正值:将元素的边界往外扩
8.伪等高布局
9.fixed
怎么使用绝对定位来模拟固定定位
1.禁止系统滚动条
2.将滚动条加给body
3.让body的尺寸变为视口的尺寸
2. 粘贴布局 : stickyfooter
经典的"粘连"footer布局
我们有一块内容<main>.
当<main>的高度足够长的时候,<footer>应该紧跟在<main>元素的后面.
当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够在屏幕的底部
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> 6 <title></title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 html,body{ 13 height: 100%; 14 } 15 #wrap{ 16 min-height: 100%; 17 background: pink; 18 text-align: center; 19 overflow: hidden; 20 } 21 #wrap .main{ 22 padding-bottom:50px ; 23 } 24 #footer{ 25 height: 50px; 26 line-height: 50px; 27 background: deeppink; 28 text-align: center; 29 margin-top: -50px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="wrap" > 35 <div class="main"> 36 main <br /> 37 main <br /> 38 main <br /> 39 </div> 40 </div> 41 <div id="footer"> 42 footer 43 </div> 44 </body> 45 </html>
两列布局 :
实现两列布局
溢出隐藏 : 实现溢出隐藏(缺一不可)
display:block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 #wrap{ 13 width: 300px; 14 border: 1px solid; 15 margin: 0 auto; 16 } 17 18 #left{ 19 float: left; 20 width: 80px; 21 height: 80px; 22 background: url(img/xfz.png) no-repeat; 23 background-position: -50px -50px; 24 } 25 26 #des{ 27 padding-left:10px ; 28 29 display:block; //以下四行代码实现溢出隐藏(缺一不可) 30 white-space: nowrap; 31 text-overflow: ellipsis; 32 overflow: hidden; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="wrap"> 38 <div id="left"></div> 39 <div id="des"> 40 此产品贱卖 买一送三 此产品贱卖 买一送三此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 41 此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 42 此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 43 此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 44 此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 45 此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 46 此产品贱卖 买一送三 此产品贱卖 买一送三<br /> 47 </div> 48 </div> 49 </body> 50 </html>
三 . BFC
BFC是什么: BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box
解决margin重叠问题
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #up, #down{ 12 width: 200px; 13 height: 200px; 14 background: pink; 15 margin: 50px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="up">up</div> 21 <div style="overflow: hidden;"> 22 <div id="down">down</div> 23 </div> 24 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #wrap{ 12 width: 300px; 13 height: 300px; 14 background: deeppink; 15 margin: 50px; 16 } 17 #inner{ 18 width: 150px; 19 height: 150px; 20 background: pink; 21 margin: 50px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="wrap"> 27 <div id="inner"> 28 29 </div> 30 </div> 31 </body> 32 </html>
四. 垂直水平居中
1. 已知高度的水平居中 :
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
2. 未知高度的水平居中 : transform: translate3d(-50%,-50%,0);
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--已知高度的元素水平垂直居中方案--> 7 8 <!-- 9 绝对定位盒子的特性 10 高宽有内容撑开 11 水平方向上： left + right + width + padding + margin = 包含块padding区域的尺寸 12 0 0 100 0 0 400 13 垂直方向上： top + bottom + height + padding + margin = 包含块padding区域的尺寸 14 0 0 100 0 0 600 15 --> 16 <style type="text/css"> 17 *{ 18 margin: 0; 19 padding: 0; 20 } 21 #wrap{ 22 position: relative; 23 width: 400px; 24 height: 600px; 25 background: pink; 26 margin: 0 auto; 27 } 28 29 #inner{ 30 position: absolute; 31 left: 0; 32 right: 0; 33 top: 0; 34 bottom: 0; 35 margin: auto; 36 width: 100px; 37 height: 100px; 38 background: deeppink; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="wrap"> 44 <div id="inner"> 45 test<br /> 46 test<br /> 47 test<br /> 48 test<br /> 49 </div> 50 </div> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--未知高度的元素水平垂直居中方案--> 7 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 #wrap{ 14 position: relative; 15 width: 400px; 16 height: 600px; 17 background: pink; 18 margin: 0 auto; 19 } 20 21 #inner{ 22 position: absolute; 23 left: 50%; 24 top: 50%; 25 transform: translate3d(-50%,-50%,0); 26 background: deeppink; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="wrap"> 32 <div id="inner"> 33 testtesttesttesttesttesttest<br /> 34 testtesttesttesttesttesttest<br /> 35 testtesttesttesttesttesttest<br /> 36 testtesttesttesttesttesttest<br /> 37 testtesttesttesttesttesttest<br /> 38 testtesttesttesttesttesttest<br /> 39 </div> 40 </div> 41 </body> 42 </html>
浙公网安备 33010602011771号