CSS布局说——两栏布局、三栏布局(圣杯、双飞翼)

it2022-05-06  0

文章目录

1. 文档流2. 定位3.盒模型4.二栏布局1.float + margin2.绝对定位3.flex布局 5.三栏布局1.绝对定位2.浮动定位法3.圣杯布局(两边固定 中间自适应)4.双飞翼布局5.flex 布局 小知识点

1. 文档流

内联元素从左向右 块级元素从上向下 各占一行

2. 定位

position属性,有6大类 static 默认设置,就是相对于文档流位置relative 相对定位,是相对于原来位置移动使用,还在文档流中absolute 绝对布局,是相对于最近那个position不为static为参照点布局,脱离文档流fixed 相对于窗口固定,脱离文档流sticky 它就相当于relative和fixed混合。最初会被当作是relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会被当成fixed定位,相对于视口进行定位。demo地址

3.盒模型

这是标准盒子模型,可以看到width的长度等于content的宽度;而当将box-sizing的属性值设置成border-box时,盒子模型的width=border+padding+content的总和。对于不同的模型的宽度是不同的。宽度默认的属性值是auto,这个属性值会使得内部元素的长度自动填充满父元素的width。

4.二栏布局

1.float + margin

边栏浮动,主栏留出相应的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>

2.绝对定位

左侧栏宽度固定并绝对定位在最左侧,右侧主栏设置一个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>

3.flex布局

<div id="container"> <div id="aside"></div> <div id="main"></div> </div> <style> #container{ display:flex; } #aside{ flex:0 0 200px; } #main{ flex: 1 1; } </style>

5.三栏布局

1.绝对定位

左右侧栏分别用绝对定位固定在左侧和右侧,中间栏用margin-left和margin-right空出左右位置

2.浮动定位法

左侧栏和右侧栏向左和向右浮动,中间栏放在最后利用左右边距margin空出左右位置

3.圣杯布局(两边固定 中间自适应)

思想:

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>

4.双飞翼布局

思想:与圣杯布局类似,就是多加了一个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>

5.flex 布局

这个最好,简单易懂

<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值(文字环绕图片、父级元素的高度塌陷 问题)


最新回复(0)