左侧固定,右侧自适应的布局
2018-06-24 02:26:41来源:未知 阅读 ()
1.左侧盒子: 通过子绝父相定位,宽度固定; 右侧盒子: 宽度100%,再设置margin-left为左侧盒子的宽度大小
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 .cont{ 15 position: relative; 16 } 17 .left { 18 width: 100px; 19 height: 600px; 20 position: absolute; 21 left:0; 22 top:0; 23 background: blue; 24 } 25 26 .right { 27 margin-left: 100px; 28 height: 400px; 29 background: pink; 30 } 31 </style> 32 </head> 33 34 <body> 35 <div class="cont clearfix"> 36 <div class="left"></div> 37 <div class="right"></div> 38 </div> 39 </body> 40 41 </html>
2.左侧盒子: 左浮动; 右侧盒子: 左浮动,再通过calc计算宽度
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .clearfix{overflow:hidden;_zoom:1;} 14 .left{ 15 width:100px; 16 height:200px; 17 background:pink; 18 float: left; 19 } 20 .right{ 21 width:calc(100% - 100px); 22 height:300px; 23 background:blue; 24 float: left; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="cont clearfix"> 30 <div class="left"></div> 31 <div class="right"></div> 32 </div> 33 </body> 34 </html>
3.左侧盒子: float: left; 右侧盒子: margin-left
理解: 浮动会使得元素脱离文档流,后面元素进行布局时,前面的浮动元素就像不存在一样
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .clearfix{ 14 overflow:hidden; 15 _zoom:1; 16 } 17 .left{ 18 width:100px; 19 height:200px; 20 float: left; 21 background:blue; 22 } 23 .right{ 24 margin-left:100px; 25 height:400px; 26 background:pink; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="cont clearfix"> 32 <div class="left"></div> 33 <div class="right"></div> 34 </div> 35 </body> 36 </html>
4.包含左右盒子的大盒子: display: table; 宽度为100%; 左侧和右侧盒子: display: table-cell
理解: 表格中的单元格的特性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .cont{ 14 display: table; 15 width:100%; 16 } 17 .left,.right{ 18 display:table-cell; 19 } 20 .left{ 21 width:100px; 22 height:200px; 23 background:pink; 24 } 25 .right{ 26 height:300px; 27 background:blue; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="cont"> 33 <div class="left"></div> 34 <div class="right"></div> 35 </div> 36 </body> 37 </html>
5.左侧 右侧: 定位
理解: position:absolute;的流体性 一个盒子设置为: position:absolute; left:0; right:0; top:0; bottom:0; 会出现全屏的效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .left{ 11 position: absolute; 12 left:0; 13 top:0; 14 bottom:0; 15 width:200px; 16 background:blue; 17 } 18 .right{ 19 position:absolute; 20 left:200px; 21 right:0; 22 top:0; 23 bottom:0; 24 background:red; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div class="left"></div> 31 <div class="right"></div> 32 </body> 33 34 </html>
6.flex布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 *{ 11 margin:0; 12 padding:0; 13 } 14 .cont{ 15 display: flex; 16 } 17 .left { 18 flex-basis: 200px;/*属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小 它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。*/ 19 height:200px; 20 background: blue; 21 } 22 23 .right { 24 flex-grow:1;/*属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)*/ 25 height:300px; 26 background: red; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div class="cont"> 33 <div class="left"></div> 34 <div class="right"></div> 35 </div> 36 </body> 37 38 </html>
7. BFC
(1)BFC触发的条件:
- 根元素
- 浮动元素
- 绝对定位元素、固定定位元素
- display属性为inline-block,table-caption,table-cell
- overflow:hidden;
(2)BFC的五大特性:
- 在一个bfc内部,盒子会在垂直方向上一个接一个的排列
- 在一个bfc内部,相邻的margin-top和margin-bottom会叠加
- 在一个bfc内部,每一个元素的左外边界会紧贴着包含盒子的左边,即使存在浮动也是如此
- 在一个bfc内部,如果存在内部元素是一个新的bfc,并且存在内部元素是浮动元素,则该bfc的区域不会与float元素的区域重叠
- bfc就是页面上的一个隔离的盒子,该盒子内部的子元素不会影响到外面的元素
(3)BFC的用途:
- 创建bfc避免垂直外边距叠加
- 清除浮动
- 自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .clearfix{overflow:hidden;_zoom:1;} 10 .left{ 11 width:200px; 12 height:300px; 13 background:pink; 14 float: left; 15 } 16 .right{ 17 overflow: hidden; 18 background:blue; 19 height:500px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="cont clearfix"> 25 <div class="left"></div> 26 <div class="right"></div> 27 </div> 28 </body> 29 </html>
8.左右盒子为inline-block + 右侧calc
理解:
- vertical-align避免基线对齐造成空白
- font-size:0;避免空白字符的存在,使得整个宽大于100%,造成右边的div掉下来
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .cont{ 14 font-size: 0; 15 } 16 .left,.right{ 17 display:inline-block; 18 vertical-align: top; 19 } 20 .left{ 21 width:100px; 22 height:200px; 23 background:pink; 24 } 25 .right{ 26 width:calc(100% - 100px); 27 height:300px; 28 background:blue; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="cont"> 34 <div class="left"></div> 35 <div class="right"></div> 36 </div> 37 </body> 38 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 纯CSS实现带返回顶部右侧悬浮菜单 2020-03-07
- 如何实现两列固定与一列自适应 2020-03-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash