目录
一、标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个
二、浮动
作用:让块元素水平排列
属性名:float
属性值
- left:左对齐
- right:右对齐
特点:
- 浮动后的盒子顶对齐
- 浮动后的盒子具备行内块特点
- 浮动后的盒子脱标,不占用标准流的位置
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.l_c {
width: 100px;
height: 100px;
background-color: paleturquoise;
float: left;
}
.b_c {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
</head>
<body>
<div class="l_c">小猫猫</div>
<div class="b_c">大猫猫</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>Document</title>
<style>
/* 前置 */
* {
margin: 0;
padding: 0;
}
/* 1226*628 */
.product {
width: 1226px;
height: 628px;
background-color: pink;
margin: 100px auto;
}
/* 234*628 */
.left {
width: 234px;
height: 628px;
background-color: skyblue;
float: left;
}
/* 978*628 */
.right {
width: 978px;
height: 628px;
background-color: brown;
float: right;
}
li {
list-style: none;
}
/* 234*300 */
.right li {
width: 234px;
height: 300px;
background-color: orange;
margin-right: 14px;
margin-bottom: 14px;
float: left;
}
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</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>Document</title>
<style>
.top {
/* height: 400px; */
width: 800px;
background-color: pink;
margin: 10px auto;
}
.left {
height: 400px;
width: 200px;
background-color: skyblue;
float: left;
}
.right {
height: 400px;
width: 550px;
background-color: orange;
float: right;
}
.bottom {
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
网页运行结果:
方法一:额外标签法
在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
/* height: 400px; */
width: 800px;
background-color: pink;
margin: 10px auto;
}
.left {
height: 400px;
width: 200px;
background-color: skyblue;
float: left;
}
.right {
height: 400px;
width: 550px;
background-color: orange;
float: right;
}
.bottom {
height: 100px;
background-color: brown;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
网页运行结果:
方法二:单伪元素法
使用方法:
.clearfix::after {
content: "";
display: block;
clear: both;
}
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
/* height: 400px; */
width: 800px;
background-color: pink;
margin: 10px auto;
}
.left {
height: 400px;
width: 200px;
background-color: skyblue;
float: left;
}
.right {
height: 400px;
width: 550px;
background-color: orange;
float: right;
}
.bottom {
height: 100px;
background-color: brown;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
网页运行结果:
方法三:双伪元素法(推荐)
使用方法:
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
/* height: 400px; */
width: 800px;
background-color: pink;
margin: 10px auto;
}
.left {
height: 400px;
width: 200px;
background-color: skyblue;
float: left;
}
.right {
height: 400px;
width: 550px;
background-color: orange;
float: right;
}
.bottom {
height: 100px;
background-color: brown;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
网页运行结果:
方法四:overflow
父元素添加 CSS 属性 overflow: hidden
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
/* height: 400px; */
width: 800px;
background-color: pink;
margin: 10px auto;
overflow: hidden;
}
.left {
height: 400px;
width: 200px;
background-color: skyblue;
float: left;
}
.right {
height: 400px;
width: 550px;
background-color: orange;
float: right;
}
.bottom {
height: 100px;
background-color: brown;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
网页运行结果:
拓展:浮动本质作用是实现图文混排效果
三、Flex 布局
1. Flex – 认识
- Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
- Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活
float效果图:(没有height,导致浮标)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* height: 300px; */
border: 1px solid black;
}
.box div {
float: left;
margin: 50px;
height: 200px;
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
flex 效果图:(智能识别,不会浮标)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* height: 300px; */
display: flex;
justify-content: space-between;
border: 1px solid black;
}
.box div {
height: 200px;
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
2. Flex – 组成
设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向
- 侧轴 / 交叉轴:默认在垂直方
自动挤压:
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
display: flex;
border: 1px solid black;
}
.box div {
height: 200px;
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<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>Document</title>
<style>
.box {
height: 300px;
display: flex;
border: 1px solid black;
}
.box div {
/* height: 200px; */
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
网页运行效果:
3. 主轴对齐方式
属性名:justify-content
属性值 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子延主轴居中排列 |
space-between | 弹性盒子延主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子延主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子延主轴均匀排列,弹性盒子与容器之间间距相等 |
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
height: 300px;
border: 1px solid black;
}
.box div {
height: 200px;
width: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
网页运行结果:
4. 侧轴对齐方式
属性名
- align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
- align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
属性值 | 效果 |
---|---|
stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸) |
center | 弹性盒子延侧轴居中排列 |
flex-start | 弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
/* align-items: stretch; */
/* align-items: center; */
/* align-items: flex-start; */
align-items: flex-end;
height: 300px;
border: 1px solid black;
}
.box div {
height: 200px;
width: 400px;
background-color: pink;
}
.box div:nth-child(2) {
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
网页运行结果:
5. 修改主轴方向
主轴默认在水平方向,侧轴默认在垂直方向
属性名:flex-direction
属性值 | 效果 |
---|---|
row | 水平方向,从左向右(默认) |
column | 垂直方向,从上向下 |
row-reverse | 水平方向,从右向左 |
column-reverse | 垂直方向,从下向上 |
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
height: 300px;
background-color: pink;
}
img {
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div class="box">
<img src="./aowu.jpg">
<span>AC犬</span>
</div>
</body>
</html>
网页运行结果:
6. 弹性伸缩比
作用:控制弹性盒子的主轴方向的尺寸
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 300px;
border: 1px solid black;
}
.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>
网页运行结果:
7. 弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示
属性名:flex-wrap
属性值
- wrap:换行
- nowrap:不换行(默认)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 300px;
width: 600px;
background-color: pink;
border: 1px solid black;
}
.box div {
height: 100px;
width: 130px;
background-color: orange;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>小犬犬</div>
<div>大犬犬</div>
<div>犬犬国王</div>
<div>测试犬</div>
<div>代码犬</div>
<div>笨笨犬</div>
<div>可爱犬</div>
<div>帅犬犬</div>
<div>文豪野犬</div>
<div>打嗝犬</div>
<div>好犬犬</div>
<div>坏犬犬</div>
</div>
</body>
</html>
网页运行结果:
8. 行对齐方式
属性名:align-content
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* align-content: flex-start; */
/* align-content: end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
align-content: space-evenly;
height: 300px;
width: 600px;
background-color: pink;
border: 1px solid black;
}
.box div {
height: 100px;
width: 130px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div>小犬犬</div>
<div>大犬犬</div>
<div>犬犬国王</div>
<div>测试犬</div>
<div>代码犬</div>
<div>笨笨犬</div>
<div>可爱犬</div>
<div>帅犬犬</div>
</div>
</body>
</html>
网页运行结果:
四、综合案例
标签结构:div > ul > li * 4 • ul
样式
- flex 布局
- 弹性换行 flex-wrap: wrap
- 主轴对齐方式:space-between
- 行对齐方式:space-betwee
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清楚标签内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.animal {
margin: 50px auto;
width: 1200px;
height: 418px;
border: 1px solid #ddd;
border-radius: 10px;
}
.animal ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
padding: 90px 40px 90px 60px;
height: 418px;
}
.animal li {
display: flex;
width: 500px;
height: 88px;
/* background-color: pink; */
}
img {
width: 80px;
height: 80px;
}
.pic {
margin-right: 15px;
}
h4 {
line-height: 40px;
font-size: 20px;
font-weight: 700;
color: #333;
}
p {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="animal">
<ul>
<li>
<div class="pic">
<img src="./dog.png">
</div>
<div>
<h4>犬犬</h4>
<p>是人类最早驯养的家畜之一,最早由灰狼、胡狼、豺等驯化而来</p>
</div>
</li>
<li>
<div class="pic">
<img src="./cat.png">
</div>
<div>
<h4>猫猫</h4>
<p>猫不喜群居,有领地观念,一旦遭到入侵便会发起攻击,且有极高的攀爬本领</p>
</div>
</li>
<li>
<div class="pic">
<img src="./shu.png">
</div>
<div>
<h4>鼠鼠</h4>
<p>仓鼠为杂食性动物,食性广泛,有储存食物的习性</p>
</div>
</li>
<li>
<div class="pic">
<img src="./bird.png">
</div>
<div>
<h4>鸟</h4>
<p>鸟分布于世界各地,大多数在白天活动,少数鸟在黄昏或者夜间活动</p>
</div>
</li>
</ul>
</div>
</body>
</html>
网页运行效果: