目录
2.9弹性盒子模型（flex box）
定义
弹性盒子是CSS3的一种新的布局模式 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空
2.9.1 CSS3弹性盒内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
<!--温馨提示--> 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
<style>
.container{
width: 500px;
height: 500px;
background-color: pink;
display: flex;
}
.box1{
height: 100px;
width: 100px;
background-color: hotpink;
}
.box2{
height: 100px;
width: 100px;
background-color: green;
}
.box3{
height: 100px;
width: 100px;
background-color:blue;
}
</style>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
2.9.2 父元素上的属性
2.9.2.1 display属性
display: flex;开启弹性盒
display: flex;属性设置后子元素默认水平排列
2.9.2.2 flex-direction属性
定义：flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
-
row: 横向从左到右排列(左对齐)，默认的排列方式 -
row-reverse: 反转横向排列(右对齐，从后往前排，最后一项排在最前面 -
column:纵向排列 -
column-reverse: 反转纵向排列，从后往前排，最后一项排在最上面
.container{
width: 500px;
height: 500px;
background-color: pink;
display: flex;
flex-direction: column-reverse;
}
2.9.2.3 justify-content属性
定义：内容对齐 (justify-content) 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐
justify-content: flex-start | center | flex-end;
-
flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行 的 -
main-start边线，而后续弹性项依次平齐摆放flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 -
center弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)
.container{
display: flex;
flex-direction: column;
justify-content: center;
}
2.9.2.4 align-content 属性
align-content设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式
align-items:flex-start | center | flex-end;
-
flex-stat弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界 -
flex-end弹性盒子元素的侧轴 (纵轴)起始位置的边界紧靠住该行的侧轴结束边界 -
center弹性盒子元素在该行的侧轴(纵轴) 上居中放置。 (如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)
2.9.3 子元素上的属性
2.9.3.1 flex
flex根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间默认为0，即如果存在剩余空间，也不放大 如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%
.container{
width: 500px;
height: 500px;
background-color: pink;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items:center;
}
.box1{
height: 100px;
width: 100px;
background-color: hotpink;
flex:3;
}
.box2{
height: 100px;
width: 100px;
background-color: green;
flex:1;
}
.box3{
height: 100px;
width: 100px;
background-color:blue;
flex:1;
}
2.10文档流
文档流是文档中可显示对象在排列时所占用的位置/空间例如:块元素自上而下摆放，内联元素，从左到右摆放
标准流里面的限制非常多，导致很多页面效果无法实现
-
高矮不齐，底边对齐
-
空白折叠现象
-
无论多少个空格、换行、tab，都会折叠为一个空格
-
如果我们想让img标签之间没有空隙，必须紧密连接
-
文档流产生的问题
高低不齐，底边对齐
<body> <b>挂柯南，挂课难</b> <img src="./../img/img1.png" alt=""> </body>
空格折叠现象
<img src="./../img/img1.png" alt=""> <p>1 这里有3个空格</p>
元素间隙
<img src="./../img/img1.png" alt=""> <img src="./img2.png" alt="">
脱离文档流
使一个元素脱离标准文档流有三种方式
-
浮动
-
绝对定位
-
固定定位
2.11浮动
定义：float属性定义元素在哪个方向浮动，任何元素都可以浮动
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
<!--浮动的原理-->
-
浮动以后使元素脱离了文档流
-
浮动只有左右浮动，没有上下浮动
2.11.1 元素向左浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
<style>
div{
background-color: black;
}
img{
width: 300px;
height: 300px;
float: left;
}
</style>
<div> <img src="./img2.png" alt=""> <img src="./img2.png" alt=""> </div>
2.11.2元素向右浮动
<style>
div{
background-color: black;
}
img{
width: 300px;
height: 300px;
float: right;
}
</style>
2.11.3所有元素向左浮动
<style> div{ width:200px; height: 200px; float: left; } .box1{ background-color: mediumpurple; } .box2{ background-color: hotpink; } .box3{ background-color:pink; } li{ float: left; margin: 0 50px; } </style>
<body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <ui> <li><a href="https://www.baidu.com/">列表1</a> </li> <li><a href="https://www.baidu.com/">列表2</a> </li> <li><a href="https://www.baidu.com/">列表3</a></li> </ui> </body>
2.11.4 当容器不足时
当容器不足以横向摆放内容时候，会在下一行摆放
<style>
.container{
width: 700px;
height: 700px;
background-color: palevioletred;
}
div{
width:300px;
height: 300px;
float: left;
}
.box1{
background-color: mediumpurple;
}
.box2{
background-color: hotpink;
}
.box3{
background-color:pink;
}
</style>
<body> <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body>
2.12清除浮动
浮动的副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动
-
浮动元素会造成父元素高度塌陷
-
后继元素会受到影响
<style>
.container{
width: 700px;
background-color: mediumpurple;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 5px;
float: left;
}
.text{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="text"></div> </body>
2.12.1清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用解决方案有很多种
-
父元素设置高度
-
受影响的元素增加
clear属性 -
overflow清除浮动 -
伪对象方式
2.12.2 父元素设置高度
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小
<style>
.container{
width: 700px;
height: 700px;
background-color: mediumpurple;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 5px;
float: left;
}
.text{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="text"></div> </body>
<!--//如果text放入container里，则无法实现消除浮动-->
2.12.3 clear消除浮动
clear属性指定段落的左侧或右侧不允许浮动的元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
一般情况下，用 clear: both 来消除浮动
2.12.4 overflow消除浮动
如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清除浮动这种情况下，父布局不能设置高度
父级标签的样式里面加: overflow:hidden:
<style>
.container{
width: 700px;
background-color: mediumpurple;
overflow:hidden ;
clear: both;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 5px;
float: left;
}
.text{
width: 200px;
height: 200px;
background-color: red;
clear: both;
}
</style>
<body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="text"></div> </div> </body>
2.12.5 伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理为父标签添加伪类after ,设置空的内容，并且使用 clear:both ;这种情况下，父布局不能设置高度
<style>
.container::after{
width: 700px;
background-color: mediumpurple;
}
.container::after{
content: "";
display: block;
clear: both;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 5px;
float: left;
}
.text{
width: 200px;
height: 200px;
background-color: red;
}
</style>
2.13 定位
position属性指定元素的定位类型
| 值 | 描述 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：left,top,right,bottom
2.13.1 相对定位
<div class="box"></div>
<style>
.box{
width: 600px;
height: 600px;
background-color: palevioletred;
position:relative;
left: 60px;
top: 60px;
right: 60px;
bottom: 60px;
}
</style>
2.13.2绝对定位
<body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
<style>
.box1{
width: 200px;
height: 200px;
background-color: palevioletred;
position: absolute;
left: 100px;
top: 150px;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
}
.box3{
width: 200px;
height: 200px;
background-color: mediumpurple;
position: absolute;
left: 50px;
top: 100px;
}
</style>
会出现压盖，即为脱离文档流
2.13.3 固定定位
<body> <div class="box1"></div> <div class="box2"></div> </body>
<style>
.box1{
width: 100px;
height: 100px;
background-color: palevioletred;
position: fixed;
right: 50px;
bottom: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<!--温馨提示--> 设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
<div class="container"> <div class="box1"></div> </div>
<style>
.container{
width: 200px;
height: 200px;
background-color: mediumpurple;
position: relative;
margin-left:100px ;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50px;
top: 50px;
}
</style>
2.13.4 堆叠顺序
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面
<body> <div class="box1"></div> <div class="box2"></div> </body>
<style>
.box1{
width: 200px;
height: 200px;
background-color: palevioletred;
position: absolute;
left: 100px;
top: 150px;
z-index: 50;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
z-index: 100;
}
</style>
扫一扫
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
