当前位置： 首页 > article >正文

21.[前端开发]Day21-HTML5新增内容-CSS函数-BFC-媒体查询

article 2025/2/9 12:25:58

王者荣耀-网页缩小的问题处理

为什么会产生这个问题？怎么去解决

可以给body设置最小宽度

1 HTML5新增元素

HTML5语义化元素

HTML5其他新增元素

2 Video、Audio元素

HTML5新增元素 - video

video支持的视频格式

video的兼容性写法

HTML5新增元素 - audio

audio支持的音频格式

3 input、全局属性data - *

input元素的扩展内容

按住ctrl可以多选：苹果，香蕉，句子。。。

初学者学习不推荐直接用CSS的官方文档：因为术语很专业，划分很仔细。

那么什么时候使用W3C的文档呢？当你觉得MDN文档说的不对，或者其他地方说的不好。。

新增全局属性 data-*

4 white-space/text-overflow

CSS属性 - white-space

CSS属性 - text-overflow


5 理解浏览器前缀

浏览器前缀


6 CSS常见的函数扩展

CSS中的函数

CSS函数 - var

CSS函数 -calc

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: orange;
    }

    .item {
      height: 50px;
      display: inline-block;
    }

    .item1 {
      /* width的百分比相对于包含块(父元素) */
      width: calc(100% - 100px);
      background-color: #f00;
    }

    .item2 {
      width: 100px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="item item1"></div>
    <div class="item item2"></div>
  </div>

</body>
</html>

CSS函数 - blur

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* img {
      filter: blur(5px);
    } */

    .box {
      display: inline-block;
      position: relative;
      /* filter: blur(5px); */
    }

    .cover {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(255,255,255,0.2);
      backdrop-filter: blur(10px);
    }
  </style>
</head>
<body>
  
  <!-- filter -->
  <!-- <img src="../images/kobe01.jpg" alt=""> -->

  <div class="box">
    <img src="../images/kobe01.jpg" alt="">
    <div class="cover"></div>
  </div>



</body>
</html>

CSS函数 – gradient

linear-gradient的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;

      /* background-color: orange; */
      /* background-image: linear-gradient(red, blue); */
      /* 改变方向 */
      /* background-image: linear-gradient(to right, red, blue); */
      /* background-image: linear-gradient(to right top, red, blue); */
      /* background-image: linear-gradient(-45deg, red, blue); */
      /* background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%); */


      /* radial-gradient */
      /* background-image: radial-gradient(red, blue); */
      background-image: radial-gradient(at 0% 50%, red, blue);
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>


7 深入理解BFC

FC – Formatting Context

BFC – Block Formatting Context

BFC有什么作用呢？

BFC的作用一：解决折叠问题（权威）

BFC的作用二：解决浮动高度塌陷（权威）

媒体查询

 方式一：当屏幕宽度小于等于 800 像素时，将 ./css/body_bgc.css 样式表中的样式应用到当前页面

方式二：

1.

2.

媒体查询 - 媒体类型（Media types）

媒体查询 – 媒体特性（Media features）

媒体查询 – 逻辑操作符（logical operators）

常见的移动端设备

Day21 练习

一. 完成所有的代码练习

二. 说说你对BFC的理解（面试题）

  • block format context(块级格式化上下文)

    • 是页面的一块渲染区域 并且有一套渲染规则,决定了子元素如何定位 以及与其他元素之间的排列 布局之间的关系

    • BFC是一个独立的布局环境 相当于是一个容器 在其中按照一定的规则对块级元素进行摆放 ,并且不会影响其他的布局环境中的盒子,如果一个元素触发BFC则BFC中的元素布局不受外界的影响

  • 块级元素在标准流中的布局是属于BFC的

  • 创建BFC的条件:

    • 根元素: body/:root

    • float left/right

    • position absolute/fixed

    • overflow: 除visible

    • display: inline-block/table-cell/table-caption ,flex/grid...

  • 特点

    • 垂直方向 自上而下排布

    • 垂直方向的间距由margin决定

    • 同一个BFC中 盒子之间的margin会折叠

    • BFC中 每个元素的左边缘紧挨着包含快的左边缘

    • 计算 BFC 的高度时，需要计算浮动元素的高度

    • BFC内部不会影响外部元素

    • BFC区域不会与浮动的元素发生重叠

  • 作用

    • 解决margin折叠的问题

    • 解决高度塌陷的问题

      • 前提 :浮动的父级BFC高度为auto

    • 创建两栏布局

      • 左边浮动 右边overflow:hidden

三. 整理<王者荣耀>用到的CSS知识点

  • 定位: absolute relative fixed

    • 定位实现左右或者垂直居中

    • 给盒子一个高度或宽度 l0r0/t0b0 设置margin在对应方向的auto

    • 对z-index的设置决定部分定位元素的层叠

  • flex布局

    • 运用justify-content align-items来决定axis与cross axis上的元素的位置

    • 以及让单个 flex item 不拉伸 设置flex-shrink的值 单纯设置 flex-grow避免flex-basis的影响

  • 动画以及transition

    • 设置帧动画

    • @keyframes来进行透明度的动画

    • 设置animation: name duration timing-function delay 等等

    • display对动画无效 可以在disblock的时候设置透明度的动画

    • 对height设置的transition 可以给父元素设置对应的padding-bottom以及box-sizing:border-box使得文字不动

总结：内容回顾

一. HTML5新增的内容

1.1. 语义化元素

  • header

  • nav

  • section

  • article

  • aside

  • footer

display: block

1.2. video/audio

  • 基本使用 src

  • 其他属性

    • controls

    • width/height

    • autoplay

    • muted

    • preload

  • 支持的格式

    • 浏览器支持的视频格式

  • 适配性写法

<video>
    <source src>
    <p>提示</p>
</video>

1.3. input新增特性

  • 新增的属性

  • type新增的类型

    • color

    • date

    • time

    • ...

1.4. 全局属性 data-*

// js代码目前了解

二. white-space/text-overflow(了解)

  • 其他值

三. 常见的CSS函数补充

3.1. var

  • 自定义属性: --main-color

  • var()

3.2. calc

  • 计算

3.3. blur

  • filter:

  • backdrop-filter:

3.4. gradient

  • image子类型

  • background-image

  • 两个函数:

    • linear-gradient

    • radial-gradient

四. 浏览器前缀

  • W3C制定标准

  • 浏览器厂商

    • -ms-

  • 开发者

    • 自动化打包工具帮助我们完成;

五. BFC

5.1. FC概念

  • BFC: block formatting context

  • IFC: inline formatting context

5.3. BFC官方文档解读

  • 从顶部在垂直方向一个挨着另外一个摆放

  • 他们的之间间距是通过margin设置, 在同一个BFC中, 如果相邻两个之间有margin会折叠

5.4. BFC的应用 - 消除折叠效果

  • 给某一个元素放到另外一个BFC中

5.5. BFC的应用-浮动高度塌陷

  • height为auto, 计算方法

    • inline

    • block

    • 绝对定位元素(absolutely positioned box) ignore

    • 浮动元素

      • 会增加BFC的高度以包裹(include)浮动元素的下边缘

六. 媒体查询

6.1. 媒体查询三种使用方法

  • @import

  • link

  • @media

6.2. 媒体查询的概念

  • 媒体类型

  • 媒体特性

    • 表达式, 必须有括号

  • 逻辑操作符(operators)

    • and

6.3. 案例练习

/* 
320~375之间 font-size: 15px;
375~414之间 font-size: 18px;
414~480之间 font-size: 21px;
大于480px font-size: 24px
*/
/* @media (min-width: 320px) and (max-width: 375px) {
.box { font-size: 15px; }
}
@media (min-width: 375px) and (max-width: 414px) {
.box { font-size: 18px; }
}
@media (min-width: 414px) and (max-width: 480px) {
.box { font-size: 21px; }
}
@media (min-width: 480px) {
.box { font-size: 24px; }
} */
​
/* CSS层叠性 */
@media (min-width: 320px) {
    .box { font-size: 15px; }
}
@media (min-width: 375px) {
    .box { font-size: 18px; }
}
@media (min-width: 414px) {
    .box { font-size: 21px; }
}
@media (min-width: 480px) {
    .box { font-size: 24px; }
}


http://www.kler.cn/a/537836.html

相关文章：

  • 现在中国三大运营商各自使用的哪些band频段
  • 【Pandas】pandas Series sum
  • C语言的灵魂——指针(3)
  • unity碰撞的监测和监听
  • 如何在Windows中配置MySQL？
  • 【C语言】球球大作战游戏
  • ＜ 评论 ＞ 阿里云 与 腾讯云 国内的轻量应用服务器（VPS）产品对比
  • 【韩顺平linux】部分上课笔记整理
  • 星网锐捷 DMB-BS LED屏信息发布系统taskexport接口处存在敏感信息泄露
  • 机器学习专业毕业设计选题灵感集锦：选题建议
  • C++STL（四）——vector模拟
  • Web自动化测试：如何生成高质量的测试报告
  • Element UI 表单源码原理
  • （六）C++的函数模板与类模板
  • 使用 Nginx 搭建代理服务器（正向代理 HTTPS 网站）指南
  • LVSNAT服务搭建
  • 2024最新版Java学习路线图--Java语言进阶重点知识
  • 【Ubuntu】安装和使用Ollama的报错处理集合
  • AGP8 混淆打包，反射实例化启动闪退
  • 识别市场动态：ADX趋势指标如何提升你的交易决策？
  • 核显是什么
  • 自动驾驶---E2E架构演进
  • 罗德与施瓦茨OSP220,OSP230开放式开关/射频开关/继电器测试
  • HTML之table表格学习
  • dijkstra算法类型题解
  • Vmware网络模式