一、前言
1、学习地址
z尚硅谷前端入门html+css零基础教程，零基础前端开发htmzl5+css3视频
2、相关网址
3、关于所有元素水平垂直居中的方案（面试题）
二、HTML5
1、简介
1、W3C官网地址
2、优势
（1）针对Javascript，新增了很多可操作接口
（2）新增了一些语义化标签、全局属性
（3）新增了多媒体标签，可以很好的替代flash
（4）更加侧重语义化，对SEO更友好
（5）可移植性好，可大量应用在可移动在设备上
3、兼容性
支持：Chrome、Safari、Opera、Firefox等主流浏览器，IE9及以上版本
2、新增布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增布局标签</title>
<!--
1、header、footer、nav、article、section、aside、main、hgroup
2、artical里面可以有多个section
3、section强调的是分段或分块，如果将一块内容分成几段的时候，可使用section元素
4、article比section更强调独立性，一块内容如果比较独立比较完整，应该使用article元素
5、语义
-->
</head>
<body>
<!-- 头部 -->
<header>
<h1>尚品汇</h1>
</header>
<hr>
<!-- 主导航 -->
<nav>
<a href="#">首页</a>
<a href="#">订单</a>
<a href="#">购物车</a>
<a href="#">我的</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
<!-- 侧边栏导航 -->
<aside style="float: right;">
<nav>
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
</nav>
</aside>
<!-- 文章 -->
<article>
<h2>《一夜暴富》</h2>
<section>
<h3>第一种方式：做梦</h3>
<p>这么作</p>
</section>
<section>
<h3>第二种方式：彩票</h3>
<p>这么作</p>
</section>
</article>
<hr>
<footer>
<nav>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
</nav>
</footer>
</div>
</body>
</html>3、新增状态标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增状态标签</title>
<!--
1、meter：定义已知范围内的标量测量，称为gauge尺度
2、progress ：显示某个任务完成得进度的指示器，进度条
-->
</head>
<body>
<span>当前手机电量：</span>
<meter max="100" min="0" value="27" low="10" high="20" optimum="90"></meter>
<br>
<span>当前的进度：</span>
<progress max="100" value="30"></progress>
</body>
</html>4、新增列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增列表标签</title>
<!--
1、datalist：用于搜索框的关键字提示
2、details：展示问题和答案，或对专业名词进行解释
3、summary：写在details里，用于指定问题或专有名词
-->
</head>
<body>
<form action="#">
<input type="text" list="mydata">
<button>搜索</button>
</form>
<datalist id="mydata">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>
<br><br><br><br>
<br><br><br><br>
<hr>
<details>
<summary>如何一夜暴富</summary>
<p>学前端</p>
<p>学习</p>
</details>
</body>
</html>5、新增文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增文本标签</title>
<!--
1、ruby：包裹需要注音的文字
1、rt：写注音，rt 写在ruby的里面
3、mark：标记 （W3C 建议mark用于标记搜索结果中的关键字）
-->
</head>
<body>
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
<hr>
<div>
<ruby>
<span>魑</span>
<rt>chī </rt>
</ruby>
<ruby>
<span>魅</span>
<rt>mèi</rt>
</ruby>
</div>
<hr>
<p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Corrupti, repudiandae.</p>
</body>
</html>6、新增表单控件属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增表单控件标签</title>
<!--
1、placeholder:提示文字，用于文字输入类的表单控件
2、required：必填项，除了按钮意外的表单控件
3、autofocus：自动获取焦点，所有表单控件
4、autocomplete：自动完成，识别在输入框中的输入历史记录,有on 和 off 两个值，只能在文字输入类的表单控件上
（密码输入框和多行输入框不可用）
5、pattern="正则表达式",限制输入类型，且前提不能为空，适用于文本输入类表单控件
（多行输入不可以，且空的输入框不会验证，往往与required配合）
-->
</head>
<body>
<form action="#">
<!-- 必填项 -->
账号：<input
type="text"
name="account"
placeholder="请输入账号"
required autofocus
autocomplete="on"
pattern="\w(6)"
>
<br>
密码: <input type="password" name="pwd" placeholder="请输入密码">
<br>
性别：
<!-- 男或女必须选择一个 -->
<input type="radio" value="male" name="gender" required>男
<input type="radio" value="female" name="gender">女
<br>
爱好：
<!-- 跳舞为必选 -->
<input type="checkbox" value="singing" name="hobby">唱歌
<input type="checkbox" value="dancing" name="hobby" required>跳舞
<input type="checkbox" value="watching" name="hobby">看电视
<br>
其他：<textarea name="other" required></textarea>
<br>
<button>提交</button>
</form>
</body>
</html>7、input新增type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input新增type属性</title>
<!--
1、email：提交表单时可以进行校验
2、url：网址
3、number：数值
4、search：语义化，没有校验
5、tel:不作用在pc的浏览器上
6、range：有交互效果，最小值是0，最大100
7、color、date、month、week、time、datetime-local
注意：若form表单中增加novalidate值，表单中所有的输入项都不进行校验
-->
</head>
<body>
<form action="#" novalidate>
<!-- 邮箱： <input type="email" name="email"> -->
<!-- url： <input type="url" required name="url"> -->
<!-- 数值： <input type="number" required name="number" step="2" max="80" min="20"> -->
<!-- 搜索： <input type="search" name="keyword"> -->
<!-- 电话： <input type="tel" required name="phone"> -->
<!-- 范围： <input type="range" name="range" max="80" min="20" value="26"> -->
<!-- 颜色： <input type="color" name="color"> -->
日期选择： <input type="date" required name="date">
<br>
<button>提交</button>
</form>
</body>
</html>8、新增视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增视频标签</title>
<!--
1、视频标签video,
属性：controls 播放视频，
muted：视频默认静音效果
autoplay:视频自动播放，前提是视频处于静音状态，即和muted一起使用
loop：循环播放
poster:视频封面，前提先不自动播放，默认选择视频的第一桢
preload:视频预加载,三个常用值
（1）auto：由浏览器自动协调
（2）none：不进行任何预加载
（3）metadata：仅预先获取视频的元数据
-->
<style>
video {
width: 300px;
}
</style>
</head>
<body>
<video src="./鞠婧祎.mp4" controls muted loop poster="./鞠婧祎封面.png" preload='metadata'></video>
</body>
</html>9、新增音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增音频标签</title>
<!--
1、音频标签audio,
属性：controls、muted、autoplay、loop、preload
-->
<style>
audios {
width: 300px;
}
</style>
</head>
<body>
<audio src="" controls muted autoplay preload="metadata"></audio>
</body>
</html>10、新增全局属性（了解）
11、兼容性处理
<title>兼容性处理</title>
<!-- 添加元信息 让IE浏览器处于一个最优的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核区渲染网页 -->
<meta name="render" content="webkit">
<!-- 引入一个谷歌推出的html5shiv.js文件让低版本浏览器认识H5的语义化标签
lt：小于，lte：小于等于，gt：大于，gte：大于等于，!：逻辑非
-->
<!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->三、CSS3
1、简介
（1）解决实际面临的问题
（2）按照模块化的方式去发展
（3）新特性：选择器、视觉效果、背景效果、全新的布局方案（弹性盒子）、web字体、2D和3D变换、动画与过度效果
（3）CSS3私有前缀：-webkit-
W3C标准所提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商根据浏览器的内核，使用私有前缀来测试CSS特性，在浏览器正式支持该CSS特性后，就不需要有私有前缀
（4）查询css3兼容性的网站 https://caniuse.com/
（5）常见浏览器私有前缀：
Chrome、Safari、Adge浏览器：-webkit-
Firefox浏览器:-moz-
注意：常用的主流浏览器，支持CSS3新特性，所以在编码时，不过于关注
2、新增长度单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增长度单位</title>
<!--
1、vw 视口宽度的百分比 移动端用的多
2、vh 视口高度的百分比
3、vmax 视口高或宽的百分比，取决于高或宽哪个比较大
4、vmin 视口高或宽的百分比，取决于高或宽哪个比较小
-->
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: deepskyblue;
}
.box2 {
/* 视口宽度的50% */
width: 50vw;
height: 20vh;
background-color: green;
}
.box2 {
/* 视口宽或高的50% */
width: 50vmax;
height: 20vmin;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">像素</div>
<div class="box2">vw和vh</div>
<div class="box3">vmax</div>
</body>
</html>3、新增盒子属性
（1）box-sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新盒子属性</title>
<!--
1、box-sizing有值content-box(内容区大小不变)、border-box（内容区变小）
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
border: 5px solid black;
padding: 5px;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: gray;
border: 5px solid black;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>（2）resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新盒子属性</title>
<!--
resize,值：horizontal（水平方向调值，前提：写上属性overflow: hidden（值任意按需求来）; ）
vertical（垂直方向）、both（水平垂直）、none（默认不能调）
-->
<style>
.box1 {
width: 400px;
height: 400px;
background-color: orange;
resize: vertical;
overflow: scroll;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>（3）box-shadow
两个值 三个值 三个值
四个值 五个值 六个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新盒子属性</title>
<!--
box-shadow
1、写两值：含义：第一个值表示水平位置，第二个表示垂直位置
2、写三值：含义：第一个值表示水平位置，第二个表示垂直位置，第三表示阴影颜色
3、写三值：含义：第一个值表示水平位置，第二个表示垂直位置，第三表示阴影模糊程度
4、写四值(常用)：含义：第一个值表示水平位置，第二个表示垂直位置，第三表示阴影模糊程度，第四表阴影颜色
5、写五值：含义：第一个值表示水平位置，第二个表示垂直位置，
第三表示阴影模糊程度，第四表阴影颜色,第五表示阴影的外延
5、写六值：含义：第一个值表示水平位置，第二个表示垂直位置，
第三表示阴影模糊程度，第四表阴影颜色,第五表示阴影的外延，第六表内阴影
-->
<style>
.box1 {
width: 400px;
height: 400px;
background-color: orange;
margin: 0 auto;
margin-top: 100px;
font-size: 40px;
/* 写两值 */
/* box-shadow: 10px 10px; */
/* 三个值 */
/* box-shadow: 10px 10px blue; */
/* 三个值 */
/* box-shadow: 10px 10px 10px; */
/* 四个值 */
/* box-shadow: 10px 10px 10px blue; */
/* 五个值 */
/* box-shadow: 10px 10px 20px 10px blue; */
/* 六个值 */
/* box-shadow: 10px 10px 20px 10px blue inset; */
position: relative;
top: 0;
left: 0;
transition: 0.4 linear all;
}
.box1:hover {
box-shadow: 0px 0px 20px black;
top: -1px;
left: 0;
}
</style>
</head>
<body>
<div class="box1">你好呀</div>
</body>
</html>（4）opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新盒子属性</title>
<!--
opacity：不透明度，值得范围0（完全透明）~1（完全不透明）
注意：与rgba的区别
1、opacity是属性，设置的是整个元素（包括元素里的内容）的不透明度
2、rgba是颜色的设置方式，用于设置颜色，仅是调整颜色的透明度
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
font-size: 40px;
opacity: 0.1;
}
.box2 {
position: relative;
}
h1 {
position: absolute;
top: 0;
left: 0;
background-color: black;
color: white;
width: 200px;
line-height: 60px;
text-align: center;
opacity: 0.5;
/* width: 100%; */
}
</style>
</head>
<body>
<div class="box1">你好呀</div>
<div class="box2">
<img width="200px" src="../images/鞠婧祎9.10.jpg" alt="">
<h1>鞠婧祎</h1>
</div>
</body>
</html>4、新增背景属性
（1）background-origin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增背景属性_background-origin</title>
<!--
1、默认值：border-box：padding的左上角
2、content-box：内容区的左上角
3、border-box:border的左上角
-->
<style>
.box1 {
width: 400px;
height: 400px;
background-color: skyblue;
margin: 0 auto;
font-size: 40px;
padding: 50px;
border: 50px dashed rgba(255, 0, 0, 0.7);
background-image: url('../images/鞠婧祎9.10.jpg');
background-repeat: no-repeat;
background-origin:border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
（2）background-clip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增背景属性_background-clip</title>
<!--
(裁剪或剪切背景图)
1、默认值 border-box:边框以外的背景图和背景色不可见
2、padding-box：padding以外的背景图和背景色不呈现
3、content-box：超出内容的背景不呈现
4、能和background-origin 一起使用
5、text：前提文字是透明颜色
-->
<style>
.box1 {
width: 400px;
height: 400px;
background-color: skyblue;
margin: 0 auto;
font-size: 40px;
font-weight: bold;
color: transparent;
padding: 50px;
border: 50px dashed rgba(255, 0, 0, 0.7);
background-image: url('../images/鞠婧祎9.10.jpg');
background-repeat: no-repeat;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div class="box1">你好呀</div>
</body>
</html>（3）background-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增背景属性_background-background-size</title>
<!--
1、
-->
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
background-image: url('../images/鞠婧祎9.10.jpg');
/* background-size: 400px 400px; 不能是负值*/
/* background-size: 100% 100%; 不允许负值*/
/* background-size: contain; 将图片等比例缩放，将完整的背景图包含在容器中，可能容器部分区域没有背景图片*/
background-size: cover;/* 将图片等比例缩放，知道完全覆盖容器，背景图片可能显示不完整，相对较好的选择 */
/* background-size: auto;默认 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>（4） background复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background复合属性</title>
<!-- 了解
background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式;
-->
<style>
.box1 {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 40px;
padding: 50px;
border: 50px dashed rgba(255, 0, 0, 0.7);
background: skyblue url('../images/鞠婧祎9.10.jpg') no-repeat 10px 10px / 300px 300px border-box content-box;
}
</style>
</head>
<body>
<div class="box1">你好呀</div>
</body>
</html>（5）多背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多背景图</title>
<style>
.box1 {
width: 400px;
height: 400px;
border: 1px solid black;
/* 注意：不能使用background-imge */
background: url('../images/鞠婧祎9.10.jpg') no-repeat left top,
url('../images/鞠婧祎9.10.jpg') no-repeat right top,
url('../images/鞠婧祎9.10.jpg') no-repeat left bottom,
url('../images/鞠婧祎9.10.jpg') no-repeat right bottom;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>5、新增边框属性
（1）边框圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角</title>
<!--
border-radius
1、
-->
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
margin: 0 auto;
/* 常用 */
/* border-radius: 200px;宽或高的一半得到正圆 */
/* border-radius: 50%; */
/* 单独设置，了解 */
/* border-top-left-radius: 90px;
border-bottom-left-radius: 90px; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>（2）边框外轮廓（了解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角</title>
<!--
border-radius
1、
-->
<style>
div {
width: 400px;
height: 400px;
background-color: gray;
border: 2px solid black;
margin: 0 auto;
/* outline-width: 20px;
outline-color: orange;
outline-style: solid; */
outline-offset: 10px;
outline: 10px solid orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>6、新增文本属性
（1）文本阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影</title>
<!--
text-shadow
-->
<style>
h1 {
font-size: 80px;
text-align: center;
color: white;
/* text-shadow: 3px 3px; */
/* text-shadow: 3px 3px red; */
/* text-shadow: 3px 3px 10px red; */
text-shadow: 0px 0px 15px black;
}
</style>
</head>
<body>
<h1>你好呀</h1>
</body>
</html>
（2）文本换行
默认是normal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本换行</title>
<!--
white-space: pre;按原文显示
white-space: pre-wrap;在pre的基础上能够换行
white-space: pre-line;换行、始末空格忽略，中间空格保留
white-space: nowrap;不换行，经常出现
-->
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
闪回路转不见君
学上空留马兴出
闪回路转不见君 闪回路转不见君闪回路转不见君闪回路转不见君闪回路转不见君闪回路转不见君
学上空留马兴出
闪回路转不见君
学上空留马兴出
闪回路转不见君
学上空留马兴出
</div>
</body>
</html>（3）文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本溢出</title>
<!--
首先white-space: nowrap;
其次text-overflow: clip;超出部分截掉
text-overflow: ellipsis;超出部分变成三个点
再则overflow: hidden;不能是visible值
-->
<style>
ul {
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
list-style: none;
padding-left: 0;
}
li {
margin-top: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<ul>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
</ul>
</body>
</html>（4）文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本修饰</title>
<!--
text-decoration: underline dashed blue;复合属性
-->
<style>
h1 {
font-size: 100px;
/* text-decoration: none; */
/* text-decoration-line: underline; */
/* text-decoration-style: dashed; */
/* text-decoration-color: blue; */
text-decoration: underline dashed blue;
}
</style>
</head>
<body>
<h1>学前端</h1>
</body>
</html>（5）文本描边（了解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本描边</title>
<!--
-->
<style>
h1 {
font-size: 100px;
/* -webkit-text-stroke-color: red;
-webkit-text-stroke-width: 3px; */
-webkit-text-stroke: red 3px;
color: transparent;
}
</style>
</head>
<body>
<h1>学前端</h1>
</body>
</html>7、新增渐变
（1）线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<!--
以下几种当时可以配合使用
background-image: linear-gradient(red,yellow,green);从上到下
background-image: linear-gradient(to right,red,yellow,green);从左往右
background-image: linear-gradient(20deg,red,yellow,green);角度
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
-->
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 10px;
font-size: 20px;
}
.box1 {
background-image: linear-gradient(red,yellow,green);
}
.box2 {
/* 从左下角到右上角 */
background-image: linear-gradient(to right top,red,yellow,green);
}
.box3 {
background-image: linear-gradient(20deg,red,yellow,green);
}
.box4 {
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
}
.box5 {
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">你好</div>
</body>
</html>（2）径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<!--
background-image: radial-gradient(red,yellow,green);默认情况
background-image: radial-gradient(at right top,red,yellow,green);通过关键词调整圆心
background-image: radial-gradient(at 100px 50px,red,yellow,green);通过像素值调整圆心的位置
background-image: radial-gradient(circle, red,yellow,green);通过关键字调整为正圆
background-image: radial-gradient(100px 100px,red,yellow,green);通过像素值调整为正圆
background-image: radial-gradient(red 50px,yellow 100px,green 150px);调整渐变的区域
-->
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 10px;
font-size: 20px;
}
.box1 {
background-image: radial-gradient(red,yellow,green);
}
.box2 {
background-image: radial-gradient(at right top,red,yellow,green);
}
.box3 {
background-image: radial-gradient(at 100px 50px,red,yellow,green);
}
.box4 {
background-image: radial-gradient(circle, red,yellow,green);
}
.box5 {
background-image: radial-gradient(100px 100px,red,yellow,green);
}
.box6 {
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
}
.box7 {
background-image: radial-gradient(100px 50px at 150px 150px,red 50px,yellow 100px,green 150px);
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box box1">默认情况</div>
<div class="box box2">通过关键词调整圆心</div>
<div class="box box3">通过像素值调整圆心的位置</div>
<div class="box box4">通过关键字调整为正圆</div>
<div class="box box5">通过像素值调整为正圆</div>
<div class="box box6">调整渐变的区域</div>
<div class="box box7">可以混合使用</div>
</body>
</html>（3）重复渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重复渐变</title>
<!--
1、配合线性渐变或重复渐变使用
2、在没有发生渐变的区域，重新开始渐变，就是重复渐变
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);发生重复线性渐变
background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);重复径向渐变
-->
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 10px;
font-size: 20px;
}
.box3 {
background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);
}
.box4 {
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
}
</style>
</head>
<body>
<div class="box box3">重复径向渐变</div>
<div class="box box4">重复线性渐变</div>
</body>
</html>
8、web字体
@font-face {
font-family: "自定义字体名字";
src: url('字体地址');
}9、字体图标
优势：
相比图片更加清晰
灵活性高，更方便改变大小、颜色、风格
兼容性好
10、2D变换
（1）位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位移</title>
<!--
1、 transform: translateX(50px);/translateY(-50px)
2、 translateY(50%)位移的百分比参考自身
3、 不脱离文档流
4、 水平和垂直位移： transform: translate(50px,50px);
5、 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
6、 位移对行内元素无效
7、 位移配合定位，可实现元素的垂直水平居中
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
-->
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* transform: translateX(50px) translateY(50%); */
transform: translate(50px,50px);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>（2）缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<!--
1、文字也跟着缩放，可以写比0小即负值但少用
2、transform: scaleX(0.5);/transform: scaleY(1.5);
3、同时代表两个方向transform: scale(1.5);
4、不能应用在行内元素上
5、借助缩放，可实现小于12px的文字
-->
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* transform: scaleX(0.5) scaleY(1.5); */
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>（3）旋转
1、正直顺时针转，反之
2、transform: rotateZ(30deg);/rotate(-30deg)（4）扭曲 （了解）
1、transform: skewX(30deg);/skewY(-30deg);
2、可以给负值
3、/* transform: skewX(30deg) skewY(30deg); */
transform: skew(30deg,30deg);（5）多重变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多重变换</title>
<!--
1、多重变换时，建议最后选择
-->
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 先位移后缩放 */
/* transform: translate(100px,100px) scale(0.5); */
/* 先缩放后位移 */
/* transform: scale(0.5) translate(100px,100px); */
/* 先位移后旋转 */
transform: translate(100px,100px) rotate(30deg);
/* 先旋转后位移，坐标系发生变化 */
/* transform: rotate(30deg) translate(100px,100px); */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>（6）变换原点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换原点</title>
<!--
1、transform-origin: left top;/right bottom
-->
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 通过关键词调整变换原点 */
transform-origin: right bottom;
/* 通过像素值调整变换原点 */
/* transform-origin: 50px 50px; */
/* 通过百分比调整变换原点 */
/* transform-origin: 25% 25%; */
/* 取一个值仅代表x y轴默认取50% */
/* transform-origin: left; */
/* transform-origin: 50px; */
/* transform-origin: top; */
/* 变换原点位置的改变对 旋转 有影响 */
transform: rotate(30deg);
/* 变换原点位置的改变对 缩放 有影响 */
/* transform: scale(0.6); */
/* 变换原点位置的改变对 位移 没有影响 */
/* transform: translate(100px,100px); */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>11、3D变换
（1）3D空间与景深
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D空间与景深</title>
<!--
1、给父元素开启3D空间 transform-style: preserve-3d;
2、给父元素设置景深（有了透视效果） perspective: 500px;不能为负数
-->
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深，默认值时none */
perspective: 500px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>（2）透视点位置
1、观察者位置，默认的透视点在元素的中心
2、给父元素设置透视点的位置 perspective-origin: 100px 100px;（3）位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位移</title>
<!--
1、transform: translateZ(50px);只能写像素值
2、transform: translate3d(100px,100px,50px);三个值都不能省略且z轴只能写像素值
-->
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 开启3D空间 */
transform-style: preserve-3d;
/* 设置景深，默认值时none */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 100px 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.728);
transform: translate3d(100px,100px,50px);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>（4）旋转
<!--
1、transform: rotateX(45deg)/rotateY(-45deg);顺时针
2、 transform: rotate3d(1,1,1,30deg);少用
-->（5）缩放
<!--
1、transform: scaleZ(4) rotateY(45deg);
2、transform: scale3d(1.5,1.5,4) rotateY(45deg);三个值都写
-->（6）多重变换
.inner {
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.728);
/* 变换原点 */
/* transform-origin: left; */
/* transform-origin: 0px; */
/* transform-origin: 202px 180px;
transform: rotateY(45deg); */
/* 多重变换 旋转放在最后 */
transform: translateZ(100px) scaleZ(3) rotateY(45deg);
}
（7）背部可见性
transform: rotateY(189deg);
/* 背部不可见 */
backface-visibility: hidden;12、过渡
（1）基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<!--
1、设置需要过渡效果的属性 transition-property: height,width;
2、设置过渡的时间 transition-duration: 1s,5s;
3、属性的值和数值相关，如背景色、透明度、旋转、长度值、z-index、阴影、2D变换属性、3D变换属性
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
/* 设置需要过渡效果的属性 */
/* transition-property: width,height; */
/* 让所有能过度的属性，都过度 */
transition-property: all;
/* 设置过渡的时间 */
/* transition-duration: 1s,5s; */
/* 统一设置过度时间 */
transition-duration: 1s;
}
.box1:hover {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>（2）高级使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级使用</title>
<!--
1、过渡延迟 transition-delay: 2s;
2、修改过渡类型 transition-timing-function: ease;
默认平滑过渡 慢-快-慢 ease
匀速 linear
先慢后快 ease-in
先快后慢 ease-out
慢-快-慢 ease-in-out
不考虑过渡时间，直接就是终点 step-start
等过渡时间到了之后直接到过渡终点 step-end;
分步进行过渡 steps(20)\steps(20,start)\steps(20,end)
贝塞尔曲线，可做橡皮筋效果 cubic-bezier(.79,.15,.83,.67)
-->
<style>
.outer {
width: 1300px;
height: 900px;
border: 1px solid black;
}
.outer:hover {
width: 1300px;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
/* 让所有能过度的属性，都过度 */
transition-property: all;
/* 统一设置过度时间 */
transition-duration: 1s;
/* 过渡延迟 */
/* transition-delay: 2s; */
transition-timing-function: cubic-bezier(.79,.15,.83,.67);
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
</div>
</body>
</html>（3）复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合属性</title>
<!--
transition: 3s all 0.5s linear;
如果设置一个时间，表示duration；如果设置两个时间，第一是duration，第二是delay，其他值没有顺序要求
-->
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
transition: 3s all 0.5s linear;
}
.outer:hover .inner {
width: 1000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>（4）案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.outer {
width: 400px;
height: 553px;
position: relative;
overflow: hidden;
}
.mask {
width: 400px;
height: 553px;
line-height: 553px;
background-color: black;
color: white;
position: absolute;
top: 0;
left: 0;
text-align: center;
font-size: 100px;
opacity: 0;
transition: 1s linear;
cursor: pointer;
}
img {
width: 400px;
transition: 0.5s linear;
}
.outer:hover .mask {
opacity: 0.5;
transform: scale(1.6) rotate(20deg);
}
.outer:hover img {
transform: scale(1.6) rotate(20deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="mask">鞠婧祎</div>
<img src="../images/鞠婧祎9.20.jpg" alt="">
</div>
</body>
</html>13、动画
（1）基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<!--
1、定义一个动画（定义一组关键桢）——第一种方式 @keyframes wangyoudong
定义一个动画（定义一组关键桢）-第二种方式 @keyframes wangyoudong2
2、应用动画到元素 animation-name: wangyoudong;
3、动画持续的时间 animation-duration: 3s;
4、动画延迟时间 animation-delay: 0.2s;
-->
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定义一个动画（定义一组关键桢）-第一种方式 */
@keyframes wangyoudong {
/* 第一帧 */
from {
}
/* 最后一帧 */
to {
transform: translate(900px);
background-color: red;
}
}
/* 定义一个动画（定义一组关键桢）-第二种方式 */
@keyframes wangyoudong2 {
/* 第一帧 */
0% {
}
29% {
background-color: red;
}
/* 最后一帧 */
100% {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素 */
animation-name: wangyoudong2;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.2s;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
（2）其他属性
调整动画方式 animation-timing-function: linear;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他属性</title>
<!--
1、调整动画方式 animation-timing-function: linear;
2、动画播放的次数 animation-iteration-count: infinite/3...;
3、修改动画的方向100%->0% animation-direction: reverse/alternate/alternate-reverse;
4、动画以外的状态（不发生动画的时候在哪里）animation-fill-mode: forwards;
5、动画播放的状态 animation-play-state: paused;
-->
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定义一个动画（定义一组关键桢）-第一种方式 */
@keyframes qianduan {
from {
}
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 应用动画到元素 */
animation-name: qianduan;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.2s;
/* 其他属性************start*************** */
/* 调整动画方式 */
animation-timing-function: steps(20);
/* 动画播放的次数 */
animation-iteration-count: infinite;
/* 修改动画的方向100%->0% */
animation-direction: alternate;
/* 动画以外的状态（不发生动画的时候在哪里） */
animation-fill-mode: forwards;
}
.outer:hover .inner {
/* 动画播放的状态 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>（3）复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他属性</title>
<!--
1、animation: qianduan 3s 0.5s linear 2 alternate-reverse forwards;
2、只设置一个时间表示duration，设置两个时间分别表示：duration和delay，其他属性没有数量和顺序要求
3、animation-play-state 一般单独使用
-->
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
@keyframes qianduan {
from {
}
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
animation: qianduan 3s 0.5s linear 2 alternate-reverse forwards;
}
.outer:hover .inner {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>（4）动画与过渡的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画与过渡的区别</title>
<!--
1、动画不需要任何触发条件，过渡需要有触发条件
2、动画从开始到结束的整个过程可以通过关键帧进行精细的设置，过渡则不行其只关注始末
-->
<style>
.outer {
width: 1000px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
}
/* 用过渡实现inner1跑到右边 */
.inner1 {
background-color: orange;
transition: 3s;
}
.outer:hover .inner1 {
transform: translate(900px);
}
/* 用动画实现inner2跑到右边 */
@keyframes qianduan {
0% {}
50% {
background-color: red;
border-radius: 50%;
box-shadow: 0px 0px 20px black;
}
100% {
transform: translate(900px);
}
}
.inner2 {
background-color: green;
animation: qianduan 3s linear forwards;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">过渡</div>
<div class="inner inner2">动画</div>
</div>
</body>
</html>（5）动画案例_自行车手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画案例_自行车手</title>
<!--注意
1、图片选择
2、位置和步数的选择
-->
<style>
div {
width: 130px;
height: 130px;
background-image: url('../images/bike.png');
margin: 0 auto;
margin-top: 100px;
animation: bike 1s steps(31) infinite;
}
@keyframes bike {
from{}
to{
background-position: 0px -4030px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>14、多列布局
（1）多列布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多列布局案例</title>
<!--
作用：专门用于实现类似于报纸的布局
1、直接指定列数 column-count: 5;
2、指定每一列的宽度，会自动计算列数 column-width: 220px;
3、复合属性，能够同时指定列宽和列数（不推荐）columns: 6 220px;
4、调整列的间距 column-gap: 20px;
5、每一列的边框宽度、样式、颜色 、边框相关的符合属性
-->
<style>
.outer {
width: 1000px;
margin: 0 auto;
margin-top: 100px;
/* 直接指定列数 */
/* column-count: 5; */
/* 指定每一列的宽度，会自动计算列数 */
/* column-width: 220px; */
/* 复合属性，能够同时指定列宽和列数（不推荐） */
columns: 4;
/* 调整列的间距 */
column-gap: 20px;
/* 每一列的边框宽度、样式、颜色 */
/* column-rule-width: 2px;
column-rule-style: dashed;
column-rule-color: red; */
/* 边框相关的符合属性 */
column-rule: 1px dashed red;
}
h1 {
/* 标题跨所有列 （none不跨列）*/
column-span: all;
text-align: center;
font-size: 50px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="outer">
<h1>《学前端》</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus nam eius similique officia maiores quisquam animi repellendus iusto veritatis dolorum, delectus, fugit quia laboriosam ab repellat voluptate nobis, voluptatibus quae. Accusamus repellendus sequi recusandae dignissimos eius suscipit iusto provident quidem sint error exercitationem doloremque quibusdam dolores earum, perferendis vero dolorem nisi in laudantium? Velit, quidem? Quia eius nulla assumenda cum, quae fugiat animi, molestias tempora facilis natus adipisci eveniet quidem quisquam nesciunt praesentium, pariatur numquam. Fugit maiores quidem quia officia quisquam mollitia error corporis adipisci id odio! Adipisci, consequuntur. Totam, esse laborum! Ab quis illo, temporibus accusantium pariatur odio provident?</p>
<img src="../images/鞠婧祎9.10.jpg" alt="">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur accusantium accusamus eius. Similique, rerum architecto nulla tempore atque quia impedit.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate alias numquam omnis officia totam praesentium tempora molestiae, et, reiciendis iste esse quam quas deleniti, quo fugit eos ut rem ullam.</p>
</div>
</body>
</html>（2）多列布局图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多列布局图片</title>
<!--
-->
<style>
.outer {
column-count: 5;
}
img {
/* 图片所在列的100% */
width: 100%;
transition: 0.2s linear;
}
img:hover {
box-shadow: 0px 0px 20px black;
transform: scale(1.02);
}
</style>
</head>
<body>
<div class="outer">
<img src="../images/img1.jpg" alt="">
<img src="../images/img2.jpg" alt="">
<img src="../images/img3.jpg" alt="">
<img src="../images/img4.jpg" alt="">
<img src="../images/img5.jpg" alt="">
<img src="../images/img6.jpg" alt="">
<img src="../images/img7.jpg" alt="">
<img src="../images/img8.jpg" alt="">
<img src="../images/img9.jpg" alt="">
<img src="../images/img10.jpg" alt="">
<img src="../images/img11.jpg" alt="">
<img src="../images/img12.jpg" alt="">
<img src="../images/img13.jpg" alt="">
<img src="../images/img14.jpg" alt="">
<img src="../images/img1.jpg" alt="">
<img src="../images/img2.jpg" alt="">
<img src="../images/img3.jpg" alt="">
<img src="../images/img4.jpg" alt="">
<img src="../images/img5.jpg" alt="">
<img src="../images/img6.jpg" alt="">
<img src="../images/img7.jpg" alt="">
<img src="../images/img8.jpg" alt="">
<img src="../images/img9.jpg" alt="">
<img src="../images/img10.jpg" alt="">
<img src="../images/img11.jpg" alt="">
<img src="../images/img12.jpg" alt="">
<img src="../images/img13.jpg" alt="">
<img src="../images/img14.jpg" alt="">
<img src="../images/img1.jpg" alt="">
<img src="../images/img2.jpg" alt="">
<img src="../images/img3.jpg" alt="">
<img src="../images/img4.jpg" alt="">
<img src="../images/img5.jpg" alt="">
<img src="../images/img6.jpg" alt="">
<img src="../images/img7.jpg" alt="">
<img src="../images/img8.jpg" alt="">
<img src="../images/img9.jpg" alt="">
<img src="../images/img10.jpg" alt="">
<img src="../images/img11.jpg" alt="">
<img src="../images/img12.jpg" alt="">
<img src="../images/img13.jpg" alt="">
<img src="../images/img14.jpg" alt="">
</div>
</body>
</html>15、伸缩盒模型
（1）简介
<!--
1、可以轻松控制元素分布方式、元素对齐方式、元素视觉顺序
2、flex弹性盒子布局模型
3、除了部分IE浏览器、其他浏览器均已支持
4、伸缩盒模型的出现，逐渐演变出来一套布局方案————flex布局
5、flex布局目前在移动端应用比较广泛
-->（2）伸缩容器_伸缩项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩容器_伸缩项目</title>
<!--
1、将该元素变为了伸缩容器（开启了flex布局）display: flex;
2、只有直接的子元素才能变为伸缩容器
3、无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会块状化
4、一个元素可以同时是伸缩容器、伸缩项目
5、伸缩容器所有子元素自动成为了伸缩项目
-->
<style>
.outer {
width: 1000px;
height: 600px;
background-color: #888;
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
}
.inner3 {
display: flex;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner inner3">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</div>
</body>
</html>（3）主轴方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主轴方向</title>
<!--
1、调整主轴方向，从左到右，默认 flex-direction: row;
2、调整主轴方向，从右到左 flex-direction: row-reverse;
3 调整主轴方向，垂直从上到下 flex-direction: column;
4 调整主轴方向，垂直从下到上 flex-direction: column-reverse;
-->
<style>
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向，从左到右，默认 */
/* flex-direction: row; */
/* 调整主轴方向，从右到左 */
/* flex-direction: row-reverse; */
/* 调整主轴方向，垂直从上到下 */
/* flex-direction: column; */
/* 调整主轴方向，垂直从下到上 */
flex-direction: column-reverse;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner inner3">3</div>
</div>
</body>
</html>（4）主轴换行方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主轴换行方式</title>
<!--
1、主轴换行方式 flex-wrap: wrap(换行)/wrap-reverse(反向换行);默认是nowrap(不换行)
-->
<style>
.outer {
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向，从左到右，默认 */
flex-direction: row;
/* 主轴换行方式 */
flex-wrap: wrap-reverse;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</div>
</body>
</html>（5）主轴对齐方式
/* 主轴的对齐方式,主轴的起始位置 */
/* justify-content: flex-start; */
/* 主轴的对齐方式,主轴的结束位置 */
justify-content: flex-end;
/* 主轴的对齐方式,中间对齐 */
/* justify-content: center; */
/* 主轴的对齐方式,项目均匀的分布在一行中,项目与项目之间的距离,是项目距边缘的2倍 */
/* justify-content: space-around; */
/* 主轴的对齐方式,项目均匀的分布在一行中,项目与项目之间的距离是相等的,项目距边缘没有距离 */
/* justify-content: space-between; */
/* 主轴的对齐方式,项目均匀的分布在一行中 */
/* justify-content: space-evenly; */（6）侧轴对齐
一行
/* 侧轴对齐方式,侧轴的起始位置对齐 */
/* align-items: flex-start; */
/* 侧轴对齐方式,侧轴的结束位置对齐 */
align-items: flex-end;
/* 侧轴对齐方式,侧轴的中间位置对齐 */
/* align-items: center; */
/* 侧轴对齐方式,侧轴的基线位置对齐 */
/* align-items: baseline; */
/* 侧轴对齐方式: 拉伸到整个父容器(前提:伸缩项目不能给高度),默认 */
/* align-items: stretch; */多行
/* 侧轴对齐方式(多行) 侧轴的起始位置对齐 */
/* align-content: flex-start; */
/* 侧轴对齐方式(多行) 侧轴的结束位置对齐 */
/* align-content: flex-end; */
/* 侧轴对齐方式(多行) 侧轴的中间位置对齐 */
/* align-content: center; */
/* 侧轴对齐方式(多行) 伸缩项目之间的距离是相等的,且是边缘距离的2倍*/
/* align-content: space-around; */
/* 侧轴对齐方式(多行) 伸缩项目之间的距离是相等的,且边缘没有距离*/
/* align-content: space-between; */
/* 侧轴对齐方式(多行) 伸缩项目之间的距离是相等的*/
/* align-content: space-evenly; */
/* 侧轴对齐方式(多行) 拉伸*/
align-content: stretch;（7）元素的水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的水平垂直居中</title>
<!--
1\给父容器开启flex布局 display: flex;
方案一(在父元素中):
2\inner水平居中 justify-content: center;
3\inner侧轴居中 align-items: center;
方案二(在子元素中):
margin: 0 auto;
-->
<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>（8）项目在主轴的基准长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧轴对齐</title>
<!--
1、设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是众向的则高失效
flex-basis: 300px;默认值是auto
-->
<style>
.outer {
width: 1000px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向，从左到右，默认 */
flex-direction: column;
/* 主轴换行方式 */
flex-wrap: wrap;
/* 主轴的对齐方式,主轴的起始位置 */
justify-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
}
.inner2 {
flex-basis: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
</html>（9）伸缩项目——伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩项目——伸 </title>
<!--
1、flex-grow: 1;默认值是 0（纵使主轴空间有剩余，也不拉伸）
2、规则：
若所有的伸缩项目的flex-grow的值都为1，则它们将等分剩余空间（若有空间）
若三个伸缩项目的flex-grow的值分别为1、2、3，则分别分到：1/6、2/6、3/6
-->
<style>
.outer {
width: 1000px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向，从左到右，默认 */
flex-direction: row;
/* 主轴换行方式 */
flex-wrap: wrap;
/* 主轴的对齐方式,主轴的起始位置 */
justify-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
flex-grow: 1;
}
/* .inner1 {
flex-grow: 1;
} */
.inner2 {
width: 300px;
/* flex-grow: 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>（10）伸缩项目——缩
1、flex-shrink: 2;默认值是1
（11）flex复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex复合属性</title>
<!--
1、可以拉伸、压缩、不设置基准长度，可简写为：flex:auto;
2、可以拉伸、压缩、设置基准长度0,可简写为flex: 1;
3、拉伸、压缩、不设置基准长度,可简写为flex: none;
-->
<style>
.outer {
width: 600px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向，从左到右，默认 */
flex-direction: row;
/* 主轴换行方式 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式,主轴的起始位置 */
justify-content: flex-start;
/* 侧重的对齐方式 */
align-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
/* 可以拉伸 */
/* flex-grow: 1; */
/* 可以压缩 */
/* flex-shrink: 1; */
/* 基准长度 */
/* flex-basis: 100px; */
/* 可以拉伸、压缩、不设置基准长度，可简写为：flex:auto;*/
/* flex: 1 1 auto; */
/* 可以拉伸、压缩、设置基准长度0,可简写为flex: 1; */
/* flex: 1 1 0; */
/* 不可以拉伸、压缩、不设置基准长度,可简写为flex: none; */
/* flex: 0 0 auto; */
/* 不可以拉伸、可以压缩、不设置基准长度,可简写为flex: 0 auto; */
flex: 0 1 auto;
}
</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>（12）项目排序与单独对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目排序与单独对齐</title>
<!--
1、order: -1;排序：默认值为0，数值越小、排序越靠前
2、align-self: flex-end; 可以单独调整某个伸缩项目的对齐方式，
默认值为auto，表示继承父元素的align-items属性
-->
<style>
.outer {
width: 600px;
height: 700px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关的属性 */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向，从左到右，默认 */
flex-direction: row;
/* 主轴换行方式 */
/* flex-wrap: wrap; */
/* 主轴的对齐方式,主轴的起始位置 */
justify-content: flex-start;
/* 侧重的对齐方式 */
align-content: flex-start;
}
.inner {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: skyblue;
box-sizing: border-box;
flex: 1 1 0;
}
/* .inner2 {
order: -1;
} */
.inner2 {
align-self: flex-end;
}
</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>（13）案例练习 （自己完成版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
/* 重置样式 */
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
}
ul{
list-style: none;
}
.header {
height: 70px;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
}
.shangguigu {
margin-top: 10px;
}
.school {
display: inline-block;
}
.school li{
color: white;
border: 1px solid white;
border-radius: 8px;
padding: 10px;
margin-right: 20px;
transform: translateX(1352px);
float: left;
margin-bottom: 5px;
}
.main {
width: 1898px;
height: 865px;
background-image: url('../images/bg.jpg');
border: 1px;
}
.nav-main {
width: 1000px;
height: 300px;
margin: 0 auto;
transform: translateY(300px);
border: 1px;
}
.nav-main li {
width: 180px;
height: 300px;
color: white;
float: left;
margin-right: 20px;
}
.nav-main .email {
background-color: #595CA8;
}
.nav-main img{
margin-left: 45px;
transform: translateY(80px);
}
.nav-main a{
line-height: 300px;
margin-left: 60px;
cursor: pointer;
}
.nav-main .cloud {
background-color: #FF9D2E;
}
.nav-main .phone {
background-color: #01A6DE;
}
.nav-main .wechat {
background-color: #015E91;
}
.nav-main .online {
background-color: #1DC128;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<img class="shangguigu" src="../images/logo.png" alt="尚硅谷">
<ul class="school">
<li>国内校区</li>
<li>缅甸校区</li>
<li>非洲校区</li>
<li>美国校区</li>
</ul>
</div>
<div class="main">
<ul class="nav-main">
<li class="email">
<img src="../images/item1.png" alt="邮箱符号">
<a>我的邮箱</a>
</li>
<li class="cloud">
<img src="../images/item2.png" alt="邮箱符号">
<a>云服务</a>
</li>
<li class="phone">
<img src="../images/item3.png" alt="邮箱符号">
<a>手机课堂</a>
</li>
<li class="wechat">
<img src="../images/item4.png" alt="邮箱符号">
<a>微信服务</a>
</li>
<li class="online">
<img src="../images/item5.png" alt="邮箱符号">
<a>在线客服</a>
</li>
</ul>
</div>
</body>
</html>（14）案例练习（视频版）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
/* 重置样式 */
* {
font-family: Arial, Helvetica, sans-serif;
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;
border-radius: 8px;
padding: 10px;
margin-right: 20px;
}
.header-nav li:last-child a {
margin-right: 0;
}
.page-content {
display: flex;
/* 视口高度的100%-70px */
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>16、响应式布局—媒体查询
（1）媒体类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体类型</title>
<!--
1、只有在打印机或打印预览才应用的样式
@media print {
h1 {
background: transparent;
}
}
2、只有在屏幕上才应用的样式
3、一直都应用的样式
-->
<style>
h1 {
width: 600px;
height: 400px;
line-height: 400px;
background-image: linear-gradient(30deg,red,yellow,green);
margin: 0 auto;
font-size: 100px;
text-align: center;
color: white;
text-shadow: 0 0 10px black;
}
/* 只有在打印机或打印预览才应用的样式 */
@media print {
h1 {
background: transparent;
}
}
/* 只有在屏幕上才应用的样式 */
@media screen {
h1 {
font-family: Arial, Helvetica, sans-serif;
}
}
/* 一直都应用的样式,检测所有设备 */
@media all {
h1 {
font-family: Arial, Helvetica, sans-serif;
}
}
</style>
</head>
<body>
<h1>你好呀</h1>
</body>
</html>（2）媒体特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体特性</title>
<!--
1、
-->
<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: deeppink;
}
}
/* 检测到视口的高度为800px时，应用如下样式*/
/* @media (height:800px) {
h1 {
background-color: yellow;
}
} */
/* 检测到设备的宽度为1920px时，应用如下样式 */
/* @media (device-width:1920) {
h1 {
background-image: linear-gradient(red,yellow,blue);
}
} */
</style>
</head>
<body>
<h1>你好呀</h1>
</body>
</html>（3）运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
<!--
1、
-->
<style>
* {
margin: 0;
padding: 0;
}
h1 {
height: 200px;
background-color: gray;
text-align: center;
line-height: 200px;
font-size: 100px;
}
/* 且运算符 */
/* @media (min-width:700px) and (max-width:800px) {
h1 {
background-color: orange;
}
} */
/* @media screen and (min-width:700px) and (max-width:800px) {
h1 {
background-color: orange;
}
} */
/* 或运算符 */
/* @media screen and (max-width:700px) or (min-width:800px) {
h1 {
background-color: orange;
}
} */
/* 否定运算符 */
/* @media not screen {
h1 {
background-color: orange;
}
} */
/* 肯定运算符：可以处理一些IE的兼容性问题 */
@media only screen and (width:800px) {
h1 {
background-color: orange;
}
}
</style>
</head>
<body>
<h1>你好呀</h1>
</body>
</html>17、响应式布局—常用阈值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用阈值</title>
<!--
1、
-->
<style>
* {
margin: 0;
padding: 0;
}
h1 {
height: 200px;
background-color: gray;
text-align: center;
line-height: 200px;
font-size: 100px;
}
/* 超小屏幕 */
@media screen and (max-width:768px) {
h1 {
background-color: orange;
}
}
/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px) {
h1 {
background-color: green;
}
}
/* 大屏幕 */
@media screen and (min-width:992ox) and (max-width:1200px) {
h1 {
background-color: deepskyblue;
}
}
/* 超大屏幕 */
@media screen and (min-width:1200px) {
h1 {
background-color: purple;
}
}
</style>
</head>
<body>
<h1>你好呀</h1>
</body>
</html>
18、BFC（面试常见）
Block Formatting Context
（1）开启BFC解决margin塌陷问题
margin塌陷问题
解决：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<!--
1\BFC是块级格式上下文
2\元素开启BFC后,其子元素不会产生margin塌陷问题
3\元素开启BFC后,自己不会被其他浮动元素所覆盖
4\元素开启BFC后,当其子元素浮动,元素自身高度也不会塌陷
-->
<style>
* {
margin: 0;
padding: 0;
}
/* outer的父元素 */
/* body {
display: flex;
} */
.outer {
width: 400px;
background-color: #888;
/* 浮动 */
/* float: left; */
/* 绝对定位 */
/* position: absolute; */
/* 行内块元素 */
/* display: inline-block; */
/* 表格 */
/* display: table; */
/* overflow值不为hidden */
/* overflow: hidden; */
/* 伸缩项目,则父元素开启flex布局成为伸缩容器 */
/* 多列容器 */
/* column-count: 1; */
display: flow-root;
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
.inner3 {
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
</html>（2）避免元素被浮动元素覆盖
开启浮动前
开启浮动后
解决后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<!--
1\BFC是块级格式上下文
2\元素开启BFC后,其子元素不会产生margin塌陷问题
3\元素开启BFC后,自己不会被其他浮动元素所覆盖
4\元素开启BFC后,当其子元素浮动,元素自身高度也不会塌陷
-->
<style>
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: orange;
float: left;
}
.box2 {
background-color: green;
/* 浮动 */
/* float: left; */
/* 绝对定位 */
/* position: absolute; */
/* 行内块元素 */
/* display: inline-block; */
/* 表格 */
/* display: table; */
/* overflow值不为hidden */
/* overflow: hidden; */
/* 伸缩项目,则父元素开启flex布局成为伸缩容器 */
/* 多列容器 */
/* column-count: 1; */
display: flow-root;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>（3）元素的子元素浮动，自身高度不会塌陷
所有子元素开启浮动前 开启浮动后，父元素高度塌陷
解决后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<!--
1\BFC是块级格式上下文
2\元素开启BFC后,其子元素不会产生margin塌陷问题
3\元素开启BFC后,自己不会被其他浮动元素所覆盖
4\元素开启BFC后,当其子元素浮动,元素自身高度也不会塌陷
-->
<style>
.outer {
width: 400px;
background-color: #888;
/* 浮动 */
/* float: left; */
/* 绝对定位 */
/* position: absolute; */
/* 行内块元素 */
/* display: inline-block; */
/* 表格 */
/* display: table; */
/* overflow值不为hidden */
/* overflow: hidden; */
/* 伸缩项目,则父元素开启flex布局成为伸缩容器 */
/* 多列容器 */
/* column-count: 1; */
display: flow-root;
}
.inner {
width: 100px;
height: 100px;
float: left;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</div>
</body>
</html>
扫一扫
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
