前端 | （ 十三）CSS3简介及基本语法（下）| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新

啦啦右一2023-07-25 19:20

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

系列笔记：

文章目录

⭐️前文回顾：前端 | （ 十二）CSS3简介及基本语法（中）| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

⭐️前文对应p178-p183，本文对应p183-p200

⭐️补充网站：W3school，MDN

📚伸缩盒模型

🐇伸缩盒模型简介

🐇伸缩容器、伸缩项目

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

🐇主轴方向

🐇主轴换行方式

🐇flex-flow

🐇主轴对齐方式


🐇侧轴对齐方式

  • 一行的情况：

  • 多行的情况：


🐇flex实现水平垂直居中

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

css 复制代码 
.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

css 复制代码 
.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
	margin: auto;
}
html 复制代码 
<!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>

🐇伸缩性

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

伸

html 复制代码 
<!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>

缩

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属性。
html 复制代码 
<!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>

🐇案例

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>

📚相应式布局

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>

打印视图


完整列表参考

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>

📚BFC

更加通俗的理解：

  1. BFC是Block Formatting Context （块级格式上下文），可以理解成元素的一个"特异功能"。
  2. 该 "特异功能"，在默认的情况下处于关闭状态；当元素满足了某些条件后，该"特异功能"被激活。
  3. 所谓激活"特异功能"，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。
  1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
  2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
  3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
相关推荐
@大迁世界2 分钟前
TypeScript 的本质并非类型，而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路10 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug14 分钟前
后端开发者视角的前端开发面试题清单（50道）
前端
Amumu1213816 分钟前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中37 分钟前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路41 分钟前
GDAL 实现矢量合并
前端
hxjhnct43 分钟前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子1 小时前
从入门到实践：前端 Monorepo 工程化实战（4）
前端
菩提小狗1 小时前
Sqlmap双击运行脚本，双击直接打开。
前端·笔记·安全·web安全
前端工作日常1 小时前
我学习到的AG-UI的概念
前端
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定072025-04-03 Latex学习1——本地配置Latex + VScode环境08自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)09【踩坑笔记】50系显卡适配的 PyTorch 安装10Opencode CLI 安装成功,但是启动失败