标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准流</title>
<style>
/* 特点:顶对齐,具备行内块模式的显示的特点 */
/* 浮动盒子会脱标。*/
.one{
width: 100px;
height: 100px;
background-color: aqua;
/* 添加浮动脱离文档流 */
float: left;
}
.twe{
width: 200px;
height: 200px;
background-color:sandybrown;
float: left;
}
</style>
</head>
<body>
<div class="one">div1</div>
<div class="twe">div2</div>
</body>
</html>
浮动
作用:让块元素水平排列。
属性名:float 属性值
• left:左对齐
• right:右对齐
特点:
• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标,不占用标准流的位置
Flex 布局
Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
flex-组成
flex-布局
主轴对其方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 布局-主轴对齐方式</title>
<style>
.box{
display: flex;
/* 默认设置 */
/* justify-content: flex-start; */
/* 页面从后端显示 */
/* justify-content: flex-end; */
/* 居中 */
/* justify-content: center; */
/* 父级剩余的尺寸分配成间距 */
/* 弹性盒子之间的间距相等 */
/* justify-content: space-between; */
/* 间距出现在弹性盒子两侧 */
/* 视觉效果:弹性盒子之间的间距是两端的2倍 */
/* justify-content: space-around; */
/* 各个间距都相等 */
justify-content: space-evenly;
height: 300px;
border: 1px solid #000000;
}
.box div{
width: 200px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
侧轴对其方式![](https://i-blog.csdnimg.cn/direct/b64bd80beed9445b8188b6a37fbfe57b.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局-侧轴对其方式</title>
<style>
.box{
display: flex;
/* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
/* align-items: stretch; */
/* 弹性盒子侧轴居中显示 */
/* align-items: center; */
/* 弹性盒子侧轴从开始端显示 */
/* align-items: flex-start; */
align-items: flex-end;
height: 300px;
border: 1px solid #000000;
}
.box div:nth-child(2){
align-self: center;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</body>
</html>
修改主轴方向![](https://i-blog.csdnimg.cn/direct/6f96375972bf4f3abfd556215b7fb51a.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 布局-修改主轴的方向</title>
<style>
.box{
display: flex;
/* 修改主轴的方向 垂直方向:侧轴自动变换到水平方向 */
flex-direction: column;
/* 主轴在垂直,视觉效果:垂直居中 */
justify-content: center;
/* 侧轴在水平,视觉效果:水平居中 */
align-items: center;
width: 150px;
height: 120px;
background-color: pink;
}
img{
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/1.png" alt="">
<span>标题</span>
</div>
</body>
</html>
弹性伸缩比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局-弹性伸缩比</title>
<style>
.box{
display: flex;
flex-direction: column;
height: 300px;
border: 1px solid #000000;
}
.box div{
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
.box div:nth-child(2){
flex: 1;
}
.box div:nth-child(3){
flex: 2;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
弹性盒子换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性换行</title>
<style>
.box{
display: flex;
/* 换行 */
flex-wrap: wrap;
justify-content: space-between;
height: 300px;
border: 1px #000000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
行对齐方式![](https://i-blog.csdnimg.cn/direct/f107651b258e401cae6591e6ea723c9d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 布局-行对齐方式</title>
<style>
.box{
display: flex;
/* 换行 */
flex-wrap: wrap;
justify-content: space-between;
/* 调整行对其方式,对单行弹性盒子不生效*/
/* align-content: flex-start; */
/* align-content: flex-end; */
align-content: space-between;
/* align-content: center; */
/* align-content: space-around; */
/* 没有代码提示 */
/* align-content: space-evenly; */
height: 400px;
border: 1px #000000;
}
.box div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>