自适应两栏布局
文章目录
-
自适应两栏布局
所谓自适应即是“随屏幕分辨率改变而改变”，而自适应两栏布局即是“一栏固定宽度，一栏不设具体宽度自适应屏幕宽度
-
1、BFC实现两栏布局
BFC(Block formatting context)块级格式化上下文。大白话的意思是：BFC是个封闭大盒子，盒子里的元素无论在里面干什么，都不会影响到盒子外面。 -
BFC的布局规则
一、处于BFC内盒子会垂直方向放置(类似html根元素内放块级元素，html根元素内本身也是BFC) 二、盒子box垂直方向的距离由（margin:距离值）决定。但在同一bfc内部的两个相邻盒子margin值会发生重叠，所谓重叠就是按照哪个盒子设置的最大margin值设置（给子元素设置不同bfc就可解决重叠） 三、每个元素的margin box的左边， 与包含块border box的左边相接触。BFC的区域不会与float box重叠。（例如不在bfc内的两个相邻盒子设置左边设置float:left，而右边盒子不设，两个盒子就会脱离文档流，右边盒子就会跑到左边盒子进行重叠。而触发右边盒子bfc就不会重叠，这也是自适应两栏布局应用） 四、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 五、计算bfc的高度时，浮动元素也参与计算(子元素浮动会脱离文档流，触发bfc能让浮动元素宽高参与计算) -
BFC触发条件
1、根元素html默认就是BFC 2、float属性不为none 3、position为absolute或fixed 4、display为inline-block, table-cell, table-caption, flex, inline-flex 5、overflow不为visible -
BFC的应用
1、自适应两栏布局 2、清除内部浮动 3、防止margin上下重叠 -
BFC具体应用于两栏布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #app{ width: 400px; height: 400px; background-color: #55ff00; /* overflow: hidden; */ } .box1{ /* 一边固定宽度（设置在左边或右边按需求即可） */ width: 100px; height: 100px; float: left; margin-right: 50px; background-color: #55ffff; } .box2{ /* 一边不设宽度（不设默认为父元素100%） */ height: 150px; /* 触发BFC */ overflow: hidden; background-color: #ffff7f; } </style> </head> <body> <div id="app"> <div class="box1"> 盒子一 </div> <div class="box2"> 盒子二 </div> </div> </body> </html> -
2、flex布局实现两栏布局
flex容器:采用flex布局的元素的父元素（display: flex;) flex项目:采用flex布局的元素的子元素（即在父元素盒子里的子元素盒子） 容器默认存在两根轴:水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置(与边框交叉点)称为main start //默认从左到右，相对的，可改 主轴的结束位置(与边框交叉点)称为main end //同上 交叉轴的开始位置(与边框交叉点)称为cross start 交叉轴的结束位置(与边框交叉点)称为cross end 主轴如按默认可假设X轴、交叉轴可假设Y轴。但这些都是相对的，还是得看具体设置） 项目默认沿着主轴排列（主轴是相对的）。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。flexbox布局功能主要具有以下几点：
- 屏幕和浏览器窗口大小发生变化也可以灵活调整布局
- 指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小
- 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
- 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围
- 控制元素在页面上的布局方向
- 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序
flex容器属性
display:flex/inline-flex; //设置为flex布局，而float、clear、vertical-align属性将失效1、flex-direction属性决定主轴的方向（即是flex项目元素盒子的排列方向）:
flex-direction: row（从左到右）| row-reverse（从右到左）| column(从上到下) | column(从下到上)2、flex-wrap属性，定义flex项目子元素是否换行显示
flex-wrap:nowrap; //不换行 默认值：flex项目超出或不超都不换行 flex-wrap:wrap; //换行 flex项目超出就会换行 flex-wrap:wrap-reverse: 换行方向 //主轴水平时，上下反向，主轴垂直时，左右反向3、 flex-flow ：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;
4、justify-content属性 定义了项目在主轴上的对齐方式
justify-content: flex-start 伸缩项目向一行的起始位置靠齐； flex-end 伸缩项目向一行的结束位置靠齐； center 伸缩项目向一行的中间位置靠齐； space-between 伸缩项目会平均的分布在行里； space-around; 伸缩项目会平均的分布在行里，两端保留一半的空间； space-evenly:把剩余的空间进行均分5、align-items属性定义项目在交叉轴上如何对齐
align-items: flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边； flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边； center：伸缩项目的外边距盒 在该行的侧轴上居中放置； baseline：伸缩项目根据伸缩项目的基线对齐； （有内容时，按照文字的基线对齐，没有内容时会按元素的基线对齐） stretch：伸缩项目拉伸填充整个伸缩容器。(默认值) 注：stretch是把它的高度进行拉伸，确保没有高度的情况下，如果有高度会跟高度走，没有高度会进行拉伸，不定议高度是默认值拉伸6、align-content属性定义多根轴线的对齐方式。对于单行子元素，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用 align-content 定义多个伸缩行的对齐方式，往往要与换行同时应用（换行时才用） flex-start：各行向伸缩容器的起点位置堆叠； flex-end：各行向伸缩容器的结束位置堆叠； center：各行向伸缩容器的中间位置堆叠； space-between：各行在伸缩容器中平均分布； space-around：各行在伸缩容器中平均分布，两端保留一半的空间； stretch：各行将伸展以占用额外空间。（默认值)flex项目属性
1、align-self属性
Internet Explorer 和 Safari 浏览器不支持 align-self 属性 说明： align-self 属性规定灵活容器内被选中项目的对齐方式。 注意：align-self 属性可重写灵活容器的 align-items 属性。 属性值 auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 Stretch 元素被拉伸以适应容器。 Center 元素位于容器的中心。 flex-start 元素位于容器的开头。 flex-end 元素位于容器的结尾。2、order
说明： number排序优先级，数字越大越往后排，默认为0，支持负数。3、flex
说明： 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间 详细属性值： 缩写「flex: 1」, 则其计算值为「1 1 0%」 缩写「flex: auto」, 则其计算值为「1 1 auto」 flex: none」, 则其计算值为「0 0 auto」 flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值4、flex-xxx
flex-grow flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 //！！！flex-shrink:解决flex项目缩小问题 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。 flex-basis=width(height)属性 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小 项目的长度 分配多余空间之前，项目占据的主轴空间（Flex元素在主轴方向的初始大小，如果主轴是x轴，相当于width，如果主轴是Y，相当于height） flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 -
flex具体应用于两栏布局
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #app { width: 400px; height: 400px; background-color: #55ff00; /*转换布局方式*/ display: flex; } .box1 { width: 100px; height: 100px; background-color: #55ffff; } .box2 { height: 150px; overflow: hidden; background-color: #ffff7f; /*让其将剩余空间铺满*/ flex: 1; } </style> </head> <body> <div id="app"> <div class="box1"> 盒子一 </div> <div class="box2"> 盒子二 </div> </div> </body> </html> -
3、定位实现两栏布局
前提：承载两栏的父元素要设置定位为相对定位。（子绝对定位父相对定位）
原理：固定宽度的一栏设定具体的top、left(定位而已)，自适应一栏使用外边距跟固定宽度一栏拉开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } body { position: relative; } #left { width: 300px; height: 400px; background: yellow; /* 定位实现两栏布局关键 */ position: absolute; top: 0; left: 0; /* margin-right:300px ; */ } #right { height: 500px; background-color: blue; /* 外边距拉开距离 */ margin-left: 300px; } </style> </head> <body> <div id="left"> </div> <div id="right"> </div> </body> </html>
三栏布局-中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0; margin: 0;
}
body{
overflow: hidden;
}
.left {
width: 100px;
height: 300px;
background: #0000FF;
/* 三栏布局关键 */
float: left;
}
.center {
height: 300px;width: 100px;
background: #ffff00;
/* 三栏布局关键 */
float: right;
}
.right {
height: 500px;
background: #aaff00;
/* 三栏布局关键 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
-
Flex实现三栏布局
实现：左右设定固定宽度，中间使用flex:1 让其自动适应铺满。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ /* Flex实现三栏布局关键 */ display: flex; } .left { width: 100px; height: 300px; background: #0000FF; } .center { height: 500px; background: #ffff00; /* Flex实现三栏布局关键 */ flex: 1; } .right { height: 300px; width: 100px; background: #aaff00; } </style> </head> <body> <div class="left"> </div> <div class="center"> </div> <div class="right"> </div> </body> </html> -
定位实现三栏布局
实现：左边设置绝对定位（top:0;left:0）,中间设置左右边距，右边设置左边设置绝对定位（top:0;right:0)
原理：利用绝对定位让左右元素靠近左右边框，而中间就不设宽度自适应但是得设置外边距和左右元素拉开距离
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ /* 定位实现三栏布局关键 */ position: relative; } .left { width: 100px; height: 300px; background: #0000FF; /* 实现三栏布局关键 */ position: absolute; top: 0; left: 0; } .center { height: 500px; background: #ffff00; /* 实现三栏布局关键 */ margin: 0 100px; } .right { height: 300px; width: 100px; background: #aaff00; /* 实现三栏布局关键 */ top: 0; right: 0; position: absolute; } </style> </head> <body> <div class="left"> </div> <div class="center"> </div> <div class="right"> </div> </body> </html>
扫一扫
2905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
