菜单 搜索
首页 前端知识 前端 | （ 十三）CSS3简介及基本语法（下）| 伸缩盒模型 | 尚硅谷前端html css零基础教程2023最新

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

2024-06-07 12:06:20 前端知识 前端哥 726 827 我要收藏

学习来源：尚硅谷前端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>
复制

这里是引用

📚BFC

在这里插入图片描述

更加通俗的理解：

  1. BFC是Block Formatting Context （块级格式上下文），可以理解成元素的一个“特异功能”。
  2. 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
  3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。
    在这里插入图片描述
  1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
  2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
  3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11240.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！