内联元素从左向右 块级元素从上向下 各占一行
这是标准盒子模型,可以看到width的长度等于content的宽度;而当将box-sizing的属性值设置成border-box时,盒子模型的width=border+padding+content的总和。对于不同的模型的宽度是不同的。宽度默认的属性值是auto,这个属性值会使得内部元素的长度自动填充满父元素的width。
边栏浮动,主栏留出相应的margin
<body> <div class="left">定宽</div> <div class="right">自适应</div> </body> <style> .left{ width: 200px; height: 600px; background: red; float: left; display: table; text-align: center; line-height: 600px; color: #fff; } .right{ margin-left: 210px; height: 600px; background: yellow; text-align: center; line-height: 600px; } </style>左侧栏宽度固定并绝对定位在最左侧,右侧主栏设置一个margin-left为边栏的宽度
<body> <div id = "main"></div> <div id = "aside"></div> </body> <style> #aside{ position:absolute; left:0; width:200px; } #main{ margin-left:200px; } </style>左右侧栏分别用绝对定位固定在左侧和右侧,中间栏用margin-left和margin-right空出左右位置
左侧栏和右侧栏向左和向右浮动,中间栏放在最后利用左右边距margin空出左右位置
思想:
1.就是先预留左右区域,让三个div在中间的一块区域,2.让他们都float起来,然后设置中间的div的width:100%,其他两个div会变到下一行3.设置margin-left:-100%,让左栏浮到上面,右栏就会占据原理左栏的位置,设置margin-left:为负的右栏的宽,这样中间栏左右就被覆盖4.再设置position:relative 让覆盖的部分出现 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现三栏水平布局之圣杯布局</title> <style> .wrap { padding: 0 300px 0 200px; } .left, .right, .main { min-height: 200px; float: left; /* 设置最小高度 */ } .left { background-color: green; width: 200px; margin-left: -100%; position: relative; left: -200px; } .right { background-color: red; width: 300px; margin-left: -300px; position: relative; right: -300px; } .main { background-color: blue; width: 100%; } </style> </head> <body> <div class="wrap"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>思想:与圣杯布局类似,就是多加了一个div,在左右把中间覆盖时,中间里的那个div设置margin来显示我们的内容,感觉比圣杯好
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现三栏布局之双飞翼布局</title> <style> .left, .right, .main { float: left; min-height: 130px; } .left { background-color: red; width: 200px; margin-left: -100% } .main { background-color: blue; width: 100%; } .right { background-color: green; width: 300px; margin-left: -300px; } .content { margin: 0 300px 0 200px; } </style> </head> <body> <div class="container"> <div class="main"> <div class="content">content</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>这个最好,简单易懂
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局实现两边宽度固定中间自适应的三列布局</title> <style> .wrap { display: flex; } .main { flex-grow: 1; /* 自动适应 */ background-color: red; } .left { flex-basis: 200px; background-color: green; order: -1; /* 默认为0 值越小 越靠前 不然按从上到下解析 */ } .right { flex-basis: 300px; /* flex-basis 为基准值,当其为0%时,有width也没用,这是总宽度就取决于flex-grow 所占据的值 */ background-color: hotpink; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>1.float的原始意义: 使文字环绕在图片周围,仅此而已。实现原理: float属性可以使图片(img)脱离文档流,但是它还占据正常文档流的文本空间,浮动后的图片可以浮在其他元素之上,但是图片不会遮挡文字,文字环绕在图片的周围。
2、float的2个属性①包裹性:添加了float属性的元素会自动加上一个“块级框”,即可以设置元素的宽高。 就float的包裹性而言,其实和display: inline-block;属性的效果是一样的。会在水平方向上排列,并且可以设置元素的宽高。唯一的区别就是:float是有方向性的,display: inline-block;是没有方向性的。②破坏性:float属性破坏元素的inline-box模型,使之没有line-height值(文字环绕图片、父级元素的高度塌陷 问题)