学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频

系列笔记：

【HTML4】（一）前端简介
【HTML4】（二）各种各样的常用标签
【HTML4】（三）表单及HTML4收尾
【CSS2】（四）CSS基础及CSS选择器
【CSS2】（五）CSS三大特性及常用属性
【CSS2】（六）CSS盒子模型
【CSS2】（七）浮动
【CSS2】（八）定位与布局
【实操】（九）尚品汇实操练习
【HTML5】（十）HTML5简介及相关新增属性
【CSS3】（十一）CSS3简介及基本语法（上）| 相关新增属性
【CSS3】（十二）CSS3简介及基本语法（中）| 变换、过渡与动画
【CSS3】（十三）CSS3简介及基本语法（下）| 伸缩盒模型

文章目录

📚伸缩盒模型
- 🐇伸缩盒模型简介
- 🐇伸缩容器、伸缩项目
- 🐇主轴方向
- 🐇主轴换行方式
- 🐇flex-flow
- 🐇主轴对齐方式
- 🐇侧轴对齐方式
- 🐇flex实现水平垂直居中
- 🐇伸缩性
- 🐇flex复合属性
- 🐇项目排序和单独对齐（了解）
- 🐇案例
📚相应式布局
📚BFC

⭐️前文回顾：前端 | （十二）CSS3简介及基本语法（中）| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p178-p183，本文对应p183-p200
⭐️补充网站：W3school，MDN

📚伸缩盒模型

🐇伸缩盒模型简介

在这里插入图片描述

🐇伸缩容器、伸缩项目

在这里插入图片描述

主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。

🐇主轴方向

在这里插入图片描述

🐇主轴换行方式

在这里插入图片描述

🐇flex-flow

在这里插入图片描述

🐇主轴对齐方式

在这里插入图片描述

🐇侧轴对齐方式

一行的情况：
多行的情况：

在这里插入图片描述

🐇flex实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

.outer {width: 400px;height: 400px;background-color: #888;display: flex;justify-content: center;align-items: center;
}
.inner {width: 100px;height: 100px;background-color: orange;
}

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {width: 400px;height: 400px;background-color: #888;display: flex;
}
.inner {width: 100px;height: 100px;background-color: orange;margin: auto;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>元素水平垂直居中</title><style>.outer {width: 400px;height: 400px;background-color: #888;display: flex;/* 方案一 *//* justify-content: center; *//* align-items: center; */}.inner {width: 100px;height: 100px;background-color: orange;/* 方案二 */margin: auto;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

在这里插入图片描述

🐇伸缩性

在这里插入图片描述

.inner {/* 设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的高失效 */flex-basis: 300px;
}

伸

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伸缩项目_伸</title><style>.outer {width: 1000px;height: 900px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction: row;/* 主轴换行方式，换行 */flex-wrap: wrap;/* 主轴的对齐方式，主轴的起始位置 */justify-content: flex-start;}.inner {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;box-sizing: border-box;flex-grow: 0;}/* 瓜分比例：1/6 */.inner1 {flex-grow: 1;}/* 1/3 */.inner2 {flex-grow: 2;width: 300px;}/* 1/2 */.inner3 {flex-grow: 3;}</style>
</head>
<body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body>
</html>

在这里插入图片描述

缩

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伸缩项目_缩</title><style>.outer {width: 400px;height: 900px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction: row;/* 主轴换行方式，换行 *//* 想缩就别说这玩意，不然直接就换行处理了 *//* flex-wrap: wrap; *//* 主轴的对齐方式，主轴的起始位置 */justify-content: flex-start;/* 侧轴的对齐方式 */align-content: flex-start;}.inner {width: 200px;height: 200px;background-color: skyblue;/* border: 1px solid black; *//* box-sizing: border-box; */flex-grow: 1;}.inner1 {flex-shrink: 1;}.inner2 {flex-shrink: 2;width: 300px;}.inner3 {flex-shrink: 3;}</style>
</head>
<body><div class="outer"><div class="inner inner1"><!-- 缩的下限就是保证内容的呈现 --><div style="width: 50px;height:50px;background-color: green;">1</div></div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body>
</html>

在这里插入图片描述

带上边框，浏览器计算的时候会有一些误差。实际应用shrink默认就是1，就不写了。简化！

🐇flex复合属性

在这里插入图片描述

🐇项目排序和单独对齐（了解）

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。
通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
默认值为 auto ，表示继承父元素的align-items属性。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>项目排序与单独对齐</title><style>.outer {width: 600px;height: 900px;background-color: #888;margin: 0 auto;/* 伸缩盒模型相关属性-start *//* 将该元素变为了伸缩容器（开启了flex布局） */display: flex;/* 调整主轴方向，水平从左到右，默认 */flex-direction: row;/* 主轴换行方式，换行 *//* flex-wrap: wrap; *//* 主轴的对齐方式，主轴的起始位置 */justify-content: flex-start;/* 侧轴的对齐方式 */align-content: flex-start;}.inner {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;box-sizing: border-box;/* 可以拉伸 可以压缩 设置基准长度为0，可简写为：flex:1 */flex: 1 1 0;}.inner1 {order: 3;}.inner2 {order: 2;}.inner3 {order: 1;}.inner2 {align-self: center;}</style>
</head>
<body><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div></div>
</body>
</html>

在这里插入图片描述

🐇案例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>尚硅谷官网</title><style>* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }a { text-decoration: none; }ul { list-style: none; }html,body {width: 100%;height: 100%;}body {/* 背景铺满 */background-image: url('../images/bg.jpg');/* 背景图不重复 */background-repeat: no-repeat;/* 当图片和背景不适配时的最优解 */background-size: cover;}.page-header {height: 70px;/* 需要设置透明度 */background-color: rgba(0, 0, 0, 0.7);/* 设置伸缩盒子 */display: flex;/* 主轴两边定格 */justify-content: space-between;/* 侧轴对齐方式 */align-items: center;padding: 0 20px;}.header-nav {display: flex;}.header-nav li a {color: white;font-size: 20px;border: 1px solid white;/* 圆角8px */border-radius: 8px;padding: 10px;margin-right: 20px;}.header-nav li:last-child a {margin-right: 0;}.page-content {display: flex;/* calc进行数值计算 */height: calc(100vh - 70px);}.content-nav {width: 1000px;height: 300px;/* 垂直居中 */margin: auto;display: flex;/* 主轴对齐方式：均分 */justify-content: space-evenly;/* 侧轴 */align-items: center;}.content-nav .item {width: 180px;height: 200px;background-color: orange;display: flex;/* 转换主轴 */flex-direction: column;/* 侧轴 */align-items: center;/* 主轴均分 */justify-content: space-evenly;transition: 0.2s linear;cursor: pointer;}.content-nav .item:hover {/* 边框阴影 */box-shadow: 0px 0px 20px black;}.content-nav .item span {font-size: 20px;color: white;}.content-nav .item:nth-child(1) {background-color:#595CA8;}.content-nav .item:nth-child(2) {background-color:#FF9D2E;}.content-nav .item:nth-child(3) {background-color:#01A6DE;}.content-nav .item:nth-child(4) {background-color:#015E91;}.content-nav .item:nth-child(5) {background-color:#1DC128;}</style>
</head>
<body><!-- 头部 --><header class="page-header"><a href="#"><img src="../images/logo.png" alt="logo"></a><ul class="header-nav"><li><a href="#">国内校区</a></li><li><a href="#">澳洲校区</a></li><li><a href="#">英国校区</a></li><li><a href="#">美国校区</a></li></ul></header><!-- 内容区 --><div class="page-content"><div class="content-nav"><div class="item"><img src="../images/item1.png" alt=""><span>我的邮箱</span></div><div class="item"><img src="../images/item2.png" alt=""><span>云服务</span></div><div class="item"><img src="../images/item3.png" alt=""><span>手机课堂</span></div><div class="item"><img src="../images/item4.png" alt=""><span>微信服务</span></div><div class="item"><img src="../images/item5.png" alt=""><span>在线客服</span></div></div></div>
</body>
</html>

在这里插入图片描述

📚相应式布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_媒体查询_媒体类型</title><style>h1 {width: 600px;height: 400px;line-height: 400px;background-image: linear-gradient(30deg,red,yellow,green);margin: 0 auto;text-align: center;font-size: 100px;color: white;text-shadow: 0 0 10px black;}/* 只有在打印机或打印预览才应用的样式 */@media print {h1 {background: transparent;}}/* 只有在屏幕上才应用的样式 */@media screen {h1 {font-family: "翩翩体-简";}}/* 一直都应用的样式 */@media all {h1 {color: red;}}</style>
</head>
<body><h1>新年快乐</h1>
</body>
</html>

在这里插入图片描述

打印视图

在这里插入图片描述
完整列表参考

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>媒体查询_媒体特性</title><style>* {margin: 0;padding: 0;}h1 {height: 200px;background-color: gray;text-align: center;line-height: 200px;font-size: 100px;}/* 检测到视口的宽度为800px时，应用如下样式 */@media (width:800px) {h1 {background-color: green;}}/* 检测到视口的宽度小于等于700px时，应用如下样式 */@media (max-width:700px) {h1 {background-color: orange;}}/* 检测到视口的宽度大于等于900px时，应用如下样式 */@media (min-width:900px) {h1 {background-color: deepskyblue;}}</style>
</head>
<body><h1>你好啊</h1>
</body>
</html>