王者荣耀-网页缩小的问题处理
为什么会产生这个问题？怎么去解决
可以给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; }
}
