HTML5与CSS3现代Web开发常用知识
布局小技巧
行内元素，行内快元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理：行内，行内块在父元素中的对齐
例如：text-align,line-height,text-indent等
水平垂直居中
让子元素在父元素中国水平居中：
- 若元素为块元素，给父元素加上：margin: 0 auto;
- 若子元素为行内块元素，行内元素，给父元素加上text-align:center
让子元素子在父元素中垂直居中：
若子元素为块元素，给子元素加上：margin-top值为：（父元素content - 子元素盒子总高）/2
若子元素为行内元素，行内块元素：
- 让父元素的height=line-height。每个子元素加上：vertical-align:middle;
- 补充：若想绝对垂直居中，父元素的font-size设置为0
元素之间的空白问题
产生原因：行内块，行内元素，彼此中之间的换行会被浏览器解析成为一个空白字符
解决方案：
- 去掉代码中的换行和空格（不推荐
- 给父元素设置font-size：0.再给需要显示的文字元素单独设置字体大小（推荐
行内快的空白问题
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有距离的
解决方案：
- 给行内快元素设置vertical。值不为baseline(默认值)。，设置为middle,bottom,top即可
- 若父元素只有一个img，设置为display:block
- 给父元素设置为font-size:0;文字单独设置大小即可
浮动
特点
元素浮动后的特点
标准文档流（文档流）：元素默认的一种排列方式
- 脱离文档流
- 不管浮动前是什么元素，浮动后：默认的宽和高都是被内容撑开的（尽可能的小），可以设置宽高
- 不会独占一行，可以与其他的元素共用一行
- 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的padding和margin
- 不会像行内快一样被当做文本处理（没有行内快的空白问题）
影响
- 对兄弟元素的影响：后面的的兄弟元素，会占据浮动元素之间的位置，在浮动元素下面，对前面的兄弟无影响
- 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素
清除浮动
解决浮动产生的影响
解决方案：
- 给父元素制定高度
- 给父元素也设置浮动，带来其他影响
- 给父元素设置overflow：hidden
- 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear：both (right,left)
- 给浮动的父亲元素，设置伪元素，通过伪元素清除浮动，类似方案4
.father::after{
content:'';
display:block;
clear:both;
}布局中的一个原则：在设置浮动的时候，兄弟要么全部浮动要么全部不浮动
浮动布局练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
.leftfix {
float: left;
}
.rightfix {
float: right;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.container {
width: 960px;
margin: 0 auto;
/* background-color: #ccc; */
}
.logo,
.banner1,
.banner2 {
height: 80px;
background-color: #ccc;
line-height: 80px;
}
.logo {
width: 200px;
}
.banner1 {
width: 540px;
margin: 0 10px;
}
.banner2 {
width: 200px;
}
.menu {
height: 30px;
background-color: #ccc;
margin-top: 10px;
}
.content {
margin-top: 10px;
}
.item1,
.item2 {
width: 368px;
height: 198px;
border: 1px black solid;
line-height: 198px;
margin-right: 10px;
}
.item3,
.item4,
.item5,
.item6 {
width: 178px;
height: 198px;
border: 1px black solid;
margin-right: 10px;
line-height: 198px;
}
.bottom {
margin-top: 10px;
}
.item7,
.item8,
.item9 {
width: 198px;
height: 128px;
border: 1px black solid;
line-height: 128px;
}
.item8{
margin: 10px 0;
}
.footer{
height: 60px;
background-color: #ccc;
margin-top: 10px;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="page-header clearfix">
<div class="logo rightfix">logo</div>
<div class="banner1 rightfix">banner1</div>
<div class="banner2 rightfix">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容 -->
<div class="content clearfix">
<!-- 左侧 -->
<div class="left leftfix">
<!-- 上 -->
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<!-- 下 -->
<div class="bottom clearfix">
<div class="item3 leftfix">栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 右侧 -->
<div class="right rightfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
页脚
</div>
</div>
</body>
</html>定位
相对定位
相对于自己原来的位置进行定位
position: relative;特点
相对定位的特点： 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。 默认规则是：
- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
相对定位的元素，也能继续浮动，但不推荐这样做。
相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
绝对定位
position: absolute;相对于自己包含块进行定位
什么是包含快：
对于没有脱离文档流的元素，包含快就是父元素；
对于脱离文档流的元素，包含快是第一 个拥有定位属性的祖先元素，（如果所有祖先都没有定位，那包含块即整个页面）
特点
- 脱离文档流，会对后面的兄弟元素，父元素产生影响
- left和right不能同时设置，top和bottom不能一起设置
- 绝对定位时，浮动不能同时设置，否则浮动失效，以定位为主
- 可以使用margin调整位置（不推荐
- 无论什么元素，设置了绝对定位了，都会变成定位元素
定位元素 定义：默认宽高都被内容所撑开，且自由设置宽高
固定定位
position: fixed;参考它的视口进行定位
视口：对于PC浏览器，视口就是显示网页的窗口
特点
- 脱离文档流，会对后面的兄弟元素，父元素产生影响
- left和right不能同时设置，top和bottom不能一起设置
- 固定定位时，浮动不能同时设置，否则浮动失效，以固定定位为主
- 可以使用margin调整位置（不推荐
- 无论什么元素，设置了固定定位了，都会变成定位元素
粘性定位
position: sticky;参考点：离它最近的一个拥有滚动机制的祖先元素，即便这个祖先不是最近的真是可滚动祖先
使用left，right，bottom，top设置粘性生效位置
不会脱离文档流，他是一种专门用于窗口滚动时的新的定位方式
最常用是top值
粘性定位和浮动可以同时设置，不推荐
可以使用margin调整位置不推荐
粘性定位和相对定位基本一致，不同的是粘性定位可以在元素达到某个位置时将其固定
层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
- 可以通过 css 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位的元素设置 z-index 才有效。
- 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。
特殊应用
使用定位水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.output{
width: 800px;
height: 400px;
background-color: #525252;
position: relative;
}
.innner{
width: 400px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="output">
<div class="innner">
</div>
</div>
</body>
</html> /* .innner{
width: 400px;
height: 100px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -50px;
}
// 方案二 不推荐特殊应用只在绝对定位和固定定位的元素，不包括相对定位的元素
让定位元素的宽充满包含快
- 块宽想与包含块一致，可以给定位元素同时设置left和right为0
- 高度想与包含块一致，top和bottom设置为0
注意：该定位元素必须设置宽高
布局
版心
排版的中心
在pc网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心，一般版新的宽度是960-1200像素之间，并且版心可以是一个，也可以是多个
布局常用类名
| 位置 | |
|---|---|
| 顶部导航条 | topbar |
| 页头 | header,page-header |
| 导航 | nav,navigator,navbar |
| 搜索框 | search，search-box |
| 横幅，广告 ，宣传图 | banner |
| 主要内容 | content，main |
| 侧边栏 | aside,sidebar |
| 页脚 | footer,page-footer |
重置默认样式
引入CSS重置样式（各大厂代码分析）CSS重置代码
Normalize.css
Normalize.css时一种最新的方案，它在清除默认样式的基础上，保留了一些有价值的默认样式
相对于reset.css，Normalize有如下优点：
- 保护了有价值的默认样式，而不是完全去掉它们
- 为大部分HTML元素提供了一般化的样式
- 新增了HTML5元素的设置
- 对并集选择器的使用比较谨慎，有效避免调试工具混乱
总结：更加温柔，更具实际开发情况选择
官网地址：http://necolas.github.io/normalize.css/
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> // 图标Vs code强制折叠（CSS）
用于折叠大段代码
/* #region文字 */
h1 {
color: red;
}
/* #endregion文字 */实战
如果出现margin塌陷问题，在其父元素使用overflow:hidden;即可**
选择基数子元素：nth-child(2n-1)
偶数:nth-child(2n)
行内块元素也可以使用text-align：center；居中
HTML5
新增语义化标签
新增布局标签
| 标签名 | 语义 | 单/双标签 |
|---|---|---|
| header | 整个页面或者部分区域的头部 | 双 |
| footer | 整个页面的或者区域的底部 | 双 |
| nav | 导航 | 双 |
| article | 文章，帖子，杂志，新闻，博客，评论 | 双 |
| section | 页面中的某段文字，或者文章中某段文字（里面文字通常会包含标题） | 双 |
| aside | 侧边栏 | 双 |
| main | 文档的主要内容（WHATWG没有语义，IE不支持）几乎不用 | 双 |
| hgroup | 包裹连续的标题，如文章的主标题和副标题的组合（W3C将其删除） | 双 |
关于article和section：
article里面可以包含多个section
section强调的是分段或分块，如果你想将一块内容分成几段的时候，可以使用section元素
article比section更强调独立性，一块内容如果比较独立完整的，应该使用article元素
meter标签
语义:定于已知范围的标准测量，也被成为gauge（尺度），双标签，例如：
电量，磁盘用量等
属性如下：
| 属性 | 值 | 描述 |
|---|---|---|
| high | 数值 | 规定高值 |
| low | 数值 | 规定低值 |
| max | 数值 | 规定最大值 |
| min | 数值 | 规定最小值 |
| optimum | 数值 | 规定最优值 |
| value | 数值 | 规定当前值 |
progress标签
语义：显示某个任务完成的进度的指示器，一般用于表示进度，双标签，例如：工作完成进度等
属性：
| 属性 | 值 | 描述 |
|---|---|---|
| max | 数值 | 规定的目标值 |
| value | 数值 | 规定当前值 |
新增列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增列表标签</title>
</head>
<body>
<form action="">
<input type="text" list="mydata">
<input type="button" value="Serch">
</form>
<datalist id="mydata">
<option value="H5">H5</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="Vue">Vue</option>
</datalist>
<hr>
<details>
<summary>如何学习H5?</summary>
<p>来到哔哩哔哩学习</p>
</details>
</body>
</html>| 标签名 | 语义 | 单双 |
|---|---|---|
| datalist | 用于搜索框的关键字提示 | 双 |
| details | 用于展示问题的答案，或者对专有名词进行解释 | 双 |
| summary | 写在details中，用于指定问题或者专有名词 | 双 |
新增文本标签
在线汉字转拼音带声调:http://www.aies.cn/pinyin2.htm
<ruby>
<span>中国</span>
<rt>zhōng guó </rt>
</ruby> <p>Lorem ipsum, <mark>Doctor</mark> sit amet.</p>文本注音
| 标签名 | 语义 | 单双 |
|---|---|---|
| ruby | 包裹需要注音的文字 | 双 |
| rt | 写注音，rt标签写在ruby中 | 双 |
文本标记
| 标签名 | 语义 | 单双 |
|---|---|---|
| mark | 标记 | 双 |
注意：W3C建议使用Mark标记搜索结果的关键字。
表单控件属性
| 属性名 | 功能 |
|---|---|
| placeholder | 提示文字（注意：不是默认值，value是默认值，适用于文字输入类控件） |
| required | 表示该输入项必填，适用于除按钮外其他的控件 |
| autofocus | 自动获取焦点，适用于所有控件 |
| pattern | 填写正则表达式，适用于文本输入控件，多行输入不可用 注意：空的输入框不会验证 |
| autocomplete | 自动完成，属性on/off，适用于文字输入控件，密码框，多行输入除外（自动获取历史记录） |
URL解码/编码网址：http://www.wetools.com/url-encode
| 属性名 | 功能 |
|---|---|
| 邮箱类型的输入框，表单提交时候会验证格式，空不验证 | |
| url | URL类型的输入框，自动验证 |
| number | 数字类型输入框，自动验证 |
| search | 搜索类型的输入框 |
| tel | 电话类型的输入框，在移动端时，会自动唤起数字键盘 |
| range | 范围选择框 |
| color | 颜色选择框 |
| date | 日期选择框 |
| month | 月份选择框 |
| week | 周选择框 |
| time | 时间选择框 |
| datetime-local | 日期+时间选择框 |
from标签的新增属性：novalidate 表单提交时候不进行验证
多媒体标签
视频标签
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL地址 | 视频地址 |
| width | 像素值 | 播放器 宽度 |
| height | 像素值 | 播放器 高度 |
| controls | - | 向用户显示视频控件（播放/暂停） |
| muted | - | 视频静音 |
| autoplay | - | 自动播放 |
| poster | URL地址 | 视频封面 |
| preload | auo/metadata/none | 视频预加载，metadata：仅预先获取视频的元数据 |
| loop | - | 循环播放 |
B站 (bilibili) 开源 HTML5 播放器
音频标签
position: fixed;
top: 0 ;bottom:0 ;
left:0 ;
right:0 ;
background-color:black;
// 背景全黑| 属性 | 值 | 描述 |
|---|---|---|
| src | URL地址 | 音频地址 |
| controls | - | 显示控件 |
| autoplay | - | 自动播放 |
| muted | - | 音频静音 |
| loop | - | 循环播放 |
| preload | auto/metadata/none | 预加载 |
全局属性
| 属性名 | 功能 |
|---|---|
| contenteditable | 表示元素是否可以被用户编辑，true/false |
| draggable | 表示元素可以被拖动true/false,配合ondragend=<function(event)>使用 |
| hidden | 隐藏元素 |
| spellcheck | 规定是否对元素进行拼写和语法检查true/false |
| contextmenu | 规定元素的上下文菜单，在鼠标右键单元素时显示（自定义网页右键菜单） |
| data-* | 用于存储页面的私有定制数据，例：data-aa='1' 可以使用JS批量取出数据 |
开源 Web 富文本编辑器地址：https://www.wangeditor.com/demo/
兼容性处理
//
<!--[if lt ie 9]>
<script src=""></script>
<![endif]-->html5shiv.js是一套实现让ie低版本等浏览器支持html5标签的解决方案。
<meta http-equiv="X-UA-Compatible" content="ie=edge">
// 让IE浏览器处于一个最优的渲染模式 <meta name="render" content="webkit">
// 针对一些国产的双核浏览器的的设置，让浏览器优先使用webkit内核渲染网页扩展
lt 小于
lte 小于等于
gt 大于
gte 大于等于
! 非
CSS3
私有前缀意义：
W3C标准提出了某个CSS特性，在被浏览器正式支持之前，浏览器厂商根据浏览器内核使用私有前缀来测试该css特性，在浏览器正式支持该CSS属性后，就不需要私有前缀了
查询CSS3兼容性的网站：https://caniuse.com/
新增长度单位
- rem根元素字体大小的倍数，只与跟元素字体大小有关
- vm视口宽度的百分比
- vh视口高度的百分比
- vmax视口宽高中大的那个的百分比
- vmin视口宽高中小的那个的百分比
新增颜色设置方式
RGBA，HSL，HSLA
box-sizing
怪异盒模型
使用box-sizing属性可以设置盒模型的两种类型
| 可选值 | 含义 |
|---|---|
| content-box | width和height设置的是盒子内容区的大小（默认值） |
| border-box | width和height设置的是盒子总大小（怪异盒模型） |
resize
调整盒子大小
使用resize属性可以控制是否允许用户调节元素大小
| 值 | 含义 |
|---|---|
| none | 不允许用户调整元素大小 |
| both | 用户可以调节宽高 |
| horizontal | 用户可以调节宽度 |
| vertical | 用户可以调节高度 |
box-shadow
盒子阴影
box-shadow：h-shadow v-shadow blur spread color inset;
| 值 | 含义 |
|---|---|
| h-shadow | 水平阴影位置 |
| v-shadow | 垂直阴影位置 |
| blur | 模糊距离 |
| spread | 阴影外延值 |
| color | 阴影颜色 |
| inset | 是否内阴影 |
默认值：none无阴影
opacity
不透明度
opacity属性能为整个元素添加透明效果，值是0到1之间的小数，1完全不透明，0完全透明
opacity与rgba的区别？
opacity是一个属性，设置的是整个元素（包括元素内的内容）的不透明度
rgba是颜色的设置方式，用于设置颜色，它的不透明度，仅仅是是调整颜色
background-origin
背景img的原点
语法：
| 属性 | 含义 |
|---|---|
| padding-box | 从padding区域开始显示背景图像（默认值） |
| border-box | 从border区域开始显示背景图像（整个盒子最左顶点） |
| content-box | 从content区域开始显示背景图像 |
background-clip
背景图向外裁切的区域
| 属性 | 含义 |
|---|---|
| border-box | 从border区域开始向外裁剪背景（默认值） |
| padding-box | 从padding区域开始向外裁剪背景 |
| content-box | 从content区域开始向外裁剪背景 |
| text | 背景img只呈现在文字上 |
注意：若值为text，那么background-clip要加上-webkit-前缀
background-size
背景img尺寸
语法：
| 值 | 含义 |
|---|---|
| background-size:300px 200px; | 用长度指定背景img的大小，不允许负值 |
| background-size:100% 100%; | 用百分百指定背景img的大小 |
| auto | 背景的img的真实大小（默认值） |
| contain | 将背景img等比例缩放，使img的宽高与容器的宽高相等，再将完整的img包含在容器内 |
| cover | 将img等比例缩放，直到完全覆盖容器，img会尽可能的显示在元素上，可能显示不完整（最优选择） |
background复合属性
语法：
background:color url repeat position / size origin clip注意：origin和clip的值如果一样，如果只写一个值，则origin和clip都设置，如果设置了两个值，前面是origin，后是clip
size必须写在position值的后面，并且使用 / 分开
多背景图
CSS3允许元素设置多个背景img
background:url(...) no-repeat left top,
url(...) no-repeat right top,
url(...) no-repeat left bottom,
url(...) no-repeat right bottom;新增边框属性
在CSS3中，使用border-radius属性可以设置盒子为圆角
同时设置四个角的圆角： border-radius: 10px
可以分开设置每个角的圆角，比如：border-top-left-radius，一个值是正圆半径，两个值是椭圆的x半径和y半径
复合写法：border-radius：左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y
边框外轮廓
- outline-width：外轮廓的宽度
- outline-color：外轮廓的颜色
- outline-style：外轮廓的样式（风格）
- none：无轮廓 dotted：点状轮廓
- dashed：虚线轮廓
- solid：实线轮廓
- double：双线轮廓
- outline-offset设置外轮廓与边框的距离，正负值
注意：outline-offset不是outline的子属性，是一个单独的属性
- outline复合属性
outline：50px solid red;
新增文本属性
文本阴影
语法：
text-shadow:h-shadow v-shadow blur color;使用text-shadow属性给文本添加阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必须写，水平阴影的位置，允许负值 |
| v-shadow | 必写，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
默认值：text-shadow：none;没有阴影
文本换行
使用white-space属性设置文本换行方式
| 值 | 含义 |
|---|---|
| normal | 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值 |
| pre | 原样输出，与pre标签效果一样 |
| pre-wrap | 在pre的基础上，超出元素边界的自动换行 |
| pre-line | 在pre的基础上，超出元素边界的自动换行，且只识别文本中的换行，空格会忽略 |
| nowrap | 强制不换行 |
文本溢出
使用text-overflow属性设置文本内容溢出时的呈现模式
| 值 | 含义 |
|---|---|
| clip | 当内联内容溢出时，将溢出部分裁切带掉，（默认值 |
| ellipsis | 当内联内容溢出容器时，将溢出部分替换为 ... |
注意：要使用text-overflow属性生效，块容器必须显式定义overflow为非visible值
white-space为nowrap值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
文本修饰
使用text-decoration属性，让其变成复合属性
text-decoration:text-decoration-line text-decoration-style text-decoration-colortext-decoration-line设置文本装饰线的位置
- none指文本无装饰（默认值
- underline指文字的装饰线是下划线
- overline上划线
- line-through贯穿线
text-decoration-style文本装饰线的形状
- solid实线
- double双线
- dotted点状线条
- dashed虚线
- wavy波浪线
text-decoration-color颜色
略
文本描边
注意：只支持webkit内核浏览器
| 值 | 含义 |
|---|---|
| -webkit-text-stroke-width | 文字描边的宽度值，长度值 |
| -webkit-text-stroke-color | 颜色 |
| -webkit-text-stroke | 复合属性 |
渐变
线性渐变
多个颜色之间的渐变，默认从上到下渐变
background-image:linear-gradient(red,yellow,green);关键词数值线性渐变的方向
background-image:linear-gradient(to top,red,yellow,green);使用角度设置渐变方向
background-image:linear-gradient(30deg,red,yellow,green);调整渐变位置
background-image:linear-gradient(to top,red 50px,yellow 100px,green 150px);径向渐变
background-image:radial-gradient(red,yellow,green);background-image:radial-gradient(at right top ,red ,yellow , green)background-image:radial-gradient(at 100px 40px ,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 ,green 100px, yellow 150px) 渐变位置重复渐变
background-image:repeating-radial-gradient(...)web字体
基本语法
可以通过@font-face指定字体的具体地址，浏览器自动下载该字体，就不用依赖用户电脑端的字体
语法(简写方式 )：
@font-face{
font-family:'自定义字体名字',
src:url('地址')
}语法（高兼容性写法）
@font-face {
font-family: "webfont";
font-display: swap;
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}定制字体
中文的字体文件很大，使用完整的字体文件不现实，通常针对某个文字进行单独定制
可以使用阿里Web字体定制工具：https://www.iconfont.cn/webfont
字体图标
相比img更加清晰
灵活性高，更方便更改大小，颜色，风格等
兼容性好，IE也能支持
字体图标的具体使用方式，每个平台都不一样，最好参考平台的使用指南，
阿里图标官网地址：https://www.iconfont.cn/
2D变换
先给元素添加转换属性transform
位移
属性值
| 值 | 含义 |
|---|---|
| translateX | 设置水平方向位移，需要指定长度值，若为百分比，则参考自身宽度的百分比 |
| translateY | 设置垂直方向位移 |
| translate | 一个值代表水平方向，两个值代表水平和垂直方向。 |
注意点：
- 位移与相对定位类似，都不会脱离文档流，不会影响到其他元素
- 相对定位的百分比参考的是其父元素，位移的百分比参考的是其自身
- 浏览器针对位移有优化，与定位相比，浏览器处理位移效率更高
- 位移行内元素无效
- 位移配合定位，可以实现元素水平垂直居中
.box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}缩放
| 值 | 含义 |
|---|---|
| scale | 同时设置水平方向，垂直方向的缩放比例，一个值代表设置水平垂直缩放，两个值分别代表水平缩放和垂直缩放（1倍，0.5倍...） |
注意：支持 写负数，借助缩放可以实现小于12px的字体
旋转
| 值 | 含义 |
|---|---|
| rotate | 设置选择角度，需要指定一个角度值（deg）,正值顺时针，负值逆时针 |
注意：rotate一个值的时候就是rotateZ
扭曲
指的是元素在二维平面内被拉扯进而变形，实际很少用
| 值 | 含义 |
|---|---|
| skew | 一个值代表水平方向扭曲，值为角度值，两个值为水平垂直 |
多重变换
注意：多重变换时候，建议把选装放最后
transform:translate(-50%,-50%) rotate(45deg)变换原点
元素变换时，默认的原点是元素的中心，使用transform-origin可以修改变换原点
修改原点对位移没有影响，对缩放和旋转有影响
如果提供两个值，即横纵坐标
如果一个值，若是像素值，表示横坐标，纵坐标取50%，若是关键词，则另取一个坐标50%
默认值：
transform-origin(50% 50%)3D变换
开启3D空间
重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间
使用transform-style开启3D空间，可选值：
- flat：让子元素位于此元素的二维平面内（2D）默认值
- preserve-3d：让子元素位于此元素的三维空间内（3D）
设置景深
指定观察者与z=0平面的距离，能让发生3D变换的元素产生透视效果，看起来更立体
使用perspective设置景深，可选值：
- none：不指定透视（默认值
- 长度值：指定观察者距离z=0平面的距离，不允许负值
注意：perspective设置给发生3D变换元素的父元素
透视点位置
所谓透视点位置，就是观察者位置，默认的透视点在元素的中心
使用perspective-origin设置观察者的位置（透视点的位置）例如：
相对坐标轴偏移400px,往下偏移300px,(相当于人蹲下300px，然后向右移动400px看元素)
perspective-origin: 400px 300px;
通常情况下，不需要调整透视点的位置
位移
3D位移是在2D位移的基础上，可以给元素沿z轴位移，具体使用方式：
先给元素添加转换属性：transform
编写transform的具体值：
| 值 | 含义 |
|---|---|
| translateZ | 设置z轴位移，不能写百分比（x,y则可以），需要指定长度值，正值向屏幕外，负值... |
| translate3d | 第一个参数对应X轴，第二个参数对应y轴，第三个参数对应z轴，且一个都不能省略 |
旋转
3D网站three.js https://threejs.org/docs/
3D旋转是在2D的基础上，可以让元素沿x轴和y轴旋转
| 值 | 含义 |
|---|---|
| rotateX | 设置X轴的旋转角度，需要指定一个角度值（deg），面对x轴正方向，正值顺时针，负值逆时针 |
| rotateY | 设置y轴的旋转角度，需要指定一个角度值（deg）面对y轴正方向... |
| rotate3d | 前3个参数分别表示坐标轴x,y,z第四个参数表示旋转角度，参数不允许省略 |
transform:rotate3d(1,1,1,30deg)
// 表示x,y,z分别旋转30度缩放
可以让元素沿着z轴缩放
| 值 | 含义 |
|---|---|
| scaleZ | 设置z轴方向的缩放比例，值为一个数字，大于1表示方法，小于1... |
| scale3d | 第一个参数对应x轴...所有参数不能省略 |
多重变换
多个变换，可以使用一个transform来编写
注意：多重变换，建议最后旋转
背部
背部可见性
backface-visibility:hidden;
过渡
基本使用
过渡可以在不使用flash，JS的情况的下，让元素从一种样式平滑的过渡到另一种样式
transition-property
作用：定义哪个属性需要过渡，只在该属性中定义的属性才会有过渡效果
常用值：
- none不过渡任何属性
- all过渡所有能过渡的属性
- 具体某个属性名，多个使用逗号隔开
transition-duration
作用：设置过渡的持续时间，即从一个样式过渡到另一个样式所耗时长
常用值：
0 没有任何过过渡时间 默认值
s 或者 ms 秒 或 毫秒
列表：
如果想让所有属性都持续一个时间，那就写一个值
如果想让每个属性持续的时间都不一样那就写一个时间列表，每个时间一一对应属性，使用逗号隔开
高级使用
transition-delay
作用：指定开始过渡的延迟时间，单位s或者ms
transition-timing-function
作用：设置过渡的类型
常用值：
| 值 | 含义 |
|---|---|
| ease | 平滑过渡（默认值 |
| linear | 线性过渡 |
| ease-in | 慢-快 |
| ease-out | 快-慢 |
| ease-in-out | 慢-快-慢 |
| step-start | 等同于steps（1，start） |
| step-end | 等同于steps（1，end） |
| step-end | 等同于steps（1，end） |
| step(integer,?) | 接受两个参数的步进函数，第一个参数必须为正整数，指定函数的步数，第二个参数可以是start或end，指定每一步的值发生变化的时间点，默认为end |
| cubic-bezie(number,number,number,number) | 特定的贝塞尔曲线类型 |
在线制作贝塞尔曲线：https://cubic-bezier.com
复合属性
transition:1s 1s linear all;注意时间顺序
动画
定义关键帧
@keyframes identifier {
from {}
to {}
} @keyframes identifier {
0% {}
50% {}
100% {}
}关键字和百分比可以混用
动画属性
| 值 | 含义 |
|---|---|
| animation-name: ; | 给元素指定具体的动画（具体的关键帧） |
| animation-duration: ; | 设置动画所需要的时间 |
| animation-delay: ; | 设置动画的延迟 |
其他属性
| 值 | 属性 | 含义 |
|---|---|---|
| animation-timing-function: ; | ease平滑动画 linear线性动画 ease-in慢-快 ease-out快-慢... | 设置动画的类型 |
| animation-iteration-count: ; | number动画循环的次数 infinite 无限循环 | 指定动画播放的次数 |
| animation-direction: ; | normal 正常方向 reverse反方向运行 alternate 动画先正常运行再反方向运行，并持续交替运行 alternate-reverse动画先反运行再正运行，持续交替运行 | 指定动画的方向 |
| animation-fill-mode: ; | (不发生动画时的位置)forwards设置对象状态为动画结束时的状态 backwards设置对象状态为动画开始时的状态 | 设置动画之外的状态 |
| animation-play-state: ; | running运动 paused暂停 | 设置动画的播放状态 |
复合属性
animation-play-state一般单独使用
多列布局
常用属性：
小技巧：文章插入img时，宽高设置100%即可（设置img宽度为所在那一列宽度的100%）
| 值 | 含义 |
|---|---|
| column-count | 指定列数，值是数字 |
| column-width | 指定列宽，值是长度 |
| columns | 同时指定列宽和列数，复合属性，值没有数量和顺序要求 |
| column-gap | 设置列边距，值是长度 |
| column-rule-style | 设置列与列之间的风格，值与border-style一样 |
| column-rule-width | 设置列与列之间边框的宽度，值是长度 |
| column-rule-color | 设置列与列之间边框的颜色 |
| column-rule | 设置列边框，复合属性 |
| column-span | 指定是否跨列，值是none,all（用于标题） |
多列布局img
img{
width:100%;
}
// 设置img为宽度的100%盒模型
传统布局方案指：基于传统盒模型，主要依靠display属性+position属性+float属性
flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动端
容器与项目
inline-flex属性设置盒子为flex布局并且修改当前元素为行内快元素
伸缩容器
开启了flex的元素，就是伸缩容器
- 给元素设置display：flex或者display：inline-flex
- display：inline-flex可以给多个伸缩容器的父容器也设置为伸缩容器
- 一个元素可以同时是伸缩容器，伸缩项目
伸缩项目
伸缩容器所有的子元素自动成为了伸缩项目
- 仅伸缩容器的子元素成为了伸缩项目，孙子元素，重孙子元素等后代，不是伸缩项目
- 无论原来是哪种元素，（块，行内块，行内）一旦成为了伸缩项目，全部会‘块状化’。
开发小技巧：可以开发者工具内找到computed查看计算后的属性
例如：span在开启flex后，display会成为block
主轴方向
主轴
伸缩项目沿着主轴排列，主轴默认是水平的，默认是方向时从左到右
侧轴
与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是从上到下
主轴方向
属性名flex-direction
| 值 | 含义 |
|---|---|
| row | 主轴方向水平从左到右（默认值 |
| row-reverse | 主轴方向水平从右到左 |
| column | 主轴方向垂直从下到上 |
| column-reverse | 主轴方向垂直从下到上 |
注意：改变了主轴的方向，侧轴方向也随之改变
主轴换行方式
属性名：flex-warp
常用值;
- nowrap默认值，不换行
- warp自动换行，伸缩容器不够自动换行
- warp-reverse反向换行
复合属性
flex-flow(了解)
复合属性，集合了主轴方向和换行方式
flex-flow:row-reverse warp-reverse;主轴对齐方式
属性名：justify-content
| 值 | 含义 |
|---|---|
| flex-start | 主轴起点对齐,左对齐（默认值 |
| flex-end | 主轴终点对齐，右对齐 |
| center | 居中对齐 |
| space-around | 均匀分布，两端距离是中间距离的一半 |
| space-between | 均匀分布，两端对齐（最常用 |
| space-evenly | 均匀分布，两端距离与中间距离一致 |
侧轴对齐
单行
属性名：align-items
| 值 | 含义 |
|---|---|
| flex-start | 侧轴的起点对齐（上对齐） |
| flex-end | 侧轴的终点对齐（低对齐） |
| center | 侧轴的中点对齐（居中） |
| baseline | 伸缩项目第一行文字的基线对齐（伸缩项目文字不一样时） |
| stretch | 如果伸缩项目未设置高度，将占满整个容器的高度(默认值) |
多行
属性名align-content
| 值 | 含义 |
|---|---|
| flex-start | 侧轴起点对齐 |
| flex-end | 侧轴终点对齐 |
| center | 侧轴中点对齐 |
| space-around | 伸缩项目之间距离均匀分布，侧轴两端距离是中间距离的一半 |
| space-between | 侧轴中间均匀分布，两端对齐（最常用 |
| space-evenly | 均匀分布，侧轴两端距离与中间距离一致 |
| stretch | 占满整个侧轴（默认值 |
水平垂直居中
借助flex布局实现元素水平垂直居中
方案一
// 父元素设置即可
display: flex;
justify-content: center;
align-items: center;方案二
// 父元素
display: flex;// 子元素
margin: auto;基准长度
概念：flex-basis设置的是主轴方向上伸缩项目的基准长度，会让宽或者高失效，取决于主轴方向
备注：主轴横向，宽度失效，主轴纵向，高度失效
作用：浏览器根据这个属性的值，计算主轴上是否有多余的空间，默认值是auto（即伸缩项目的宽或高）
伸缩性
伸
flex-grow
概念:flex-grow定义伸缩项目的放大比例，默认为0，即纵使主轴存在剩余空间，也不拉伸（放大）
规则：
若所有伸缩项目的flex-grow值都为1，则它们将等分剩余空间（如果有空间的话）
若三个伸缩项目的flex-grow值分别为1,2,3，则分别分到1/6 2/6 3/6的空间
缩
概念：flex-shrink定义了项目的压缩比例，默认为1，如果空间不足，该项目将会缩小
收缩项目的计算，略微复杂一点，举个栗子：
三个收缩项目，宽度分别为200px 300px 200px ，它们的flex-shrink值分别为1，2，3
若想刚好容纳下三个项目，需要总宽度为700px，但目前容器只有400px，还差300px
所以每个人都要收缩一下才可以放下，具体收缩的值，计算方式：
1.计算分母：(200*1)+(300*2)+(200*3)=1400 2.计算比例： 项目一：(200*1)/1400=比例1 项目二：(300*2)/1400=比例2 项目三：(200*3)/1400=比例3 3.计算最终收缩大小： 项目一：比例1 * 300 项目二：比例2 * 300 项目三：比例3 * 300
flex复合属性
flex是复合属性，复合了flex-grow，flex-shrink，flex-basic三个属性，默认值是0 1 auto。
- 如果写flex:1 1 auto，则简写为flex:auto;
- 如果写flex:1 1 0， 则简写为flex:1;
- 如果写flex:0 0 auto，则简写为flex none;
- 如果写flex:0 1 auto，则简写为flex:0 auto（默认值）
项目排序
order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0
单独对齐
- 通过align-self属性，可以单独调整某个伸缩项目的对齐方式
- 默认值为auto，表示继承父元素的align-items属性
实战
占满全屏：
html,body{
width:100%;
height:100%;
}背景img最优展示（大小和视口不一致的时候）:
background-size: cover;计算：
calc();
例：
calc(100vh-70px);
// 表示内容区域高度为视口高度减去顶部导航区域高度100vh表示视口高度的100%
区域居中：
- 父元素display:flex;
- 子元素margin:auto;
媒体查询
响应式布局
媒体类型
@media screen{
article {
padding: 1rem 3rem;
}
}| 值 | 含义 |
|---|---|
| all | 检测所有设备 |
| screen | 检测电子屏幕，包括电脑屏幕，平板屏幕，手机屏幕。 |
| 检测打印机，打印预览 | |
| ... | ... |
完整列表参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
媒体特性
/* 检测到视口高度 小于等于800px时 */
@media (max-height:800px) {
h1 {
color: red;
}
}
/* 检测到视口高度 大于等于800px时 */
@media (min-height:800px) {
h1 {
color: green;
}
}
/* 检测到用户屏幕的宽度 等于800px时 */
@media (device-width:1920px) {
h1 {
color: red;
}
}| 值 | 含义 |
|---|---|
| width | 检测视口的宽度 |
| max-width | 检测视口的最大宽度（小于等于...执行） |
| min-width | 检测视口的最小宽度（大于等于...执行） |
| height | 检测视口高度 |
| max-height | 检测视口的最大高度 |
| min-height | 检测视口的最小高度 |
| device-width | 检测设备屏幕的宽度 |
| max-device-width | 检测设备屏幕的最大宽度 |
| min-device-width | 检测设备屏幕的最小宽度 |
| orientation | 检测视口的旋转方向（是否横屏）。1.portrait：视口处于纵向，即高度大于等于宽度 2.landscape：视口处于横向，即宽度大于高度。 |
完整列表参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
运算符
/* 电子屏幕并且视口宽度大于700px小于800px（区间700-800） */
@media screen and (min-width:700px) and (max-width:800px) {
h1 {
color: red;
}
}| 值 | 含义 |
|---|---|
| and | 并且 |
| , 或 or | 或者 |
| not | 非（否定） |
| only | 肯定 (用于IE) |
常用阈值
BFC
MDN对BFC的描述：
块格式化上下文 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
通俗易懂版：
- BFC是Block Formatting Context（块级格式上下文），可以理解为元素的一个‘特异功能’
- 该特异功能，在默认的情况下处于关闭状态，当元素满足了某些条件后，该特异功能被激活
- 所谓激活特异功能，专业点说就是：该元素创建了BFC（又称开启了BFC）
开启了BFC能解决什么问题
- 其子元素不会再产生margin塌陷问题
- 自己不会被其他浮动元素所覆盖
- 就算其子元素浮动，元素自身高度也不会塌陷
如何开启BFC
- 跟元素
- 浮动元素
- 绝对定位，固定定位的元素
- 行内块元素
- 表格单元格：table,thead,tbody,tfood,th,td,tr,caption（display:table）
- overflow的值不为visible的块级元素
- 伸缩项目
- 多列容器
- column-span为all的元素（即 使该元素没有包裹在多列容器中）
- display:的值，设置为flow-root （最优选择(IE不支持)）