H5 新特性
- 语义化标签
headerfootersectionnavasidearticle - 增强型表单
input的多个type - 新增表单元素
datalistkeygenoutput - 新增表单属性
placehoderrequiredminmax - 音频视频
audiovideo - 其他
canvas地理定位拖拽 - 本地存储
localStorage- 数据上限5MB左右（根据浏览器不同会有所区别）
- 无论打开还是关闭标签浏览器数据均保留
sessionStorage- 数据上限5MB左右（根据浏览器不同会有所区别）
- 打开同源页面或刷新页面数据保留
- 关闭浏览器数据清空
- 打开或关闭新的浏览器窗口数据会被删除
cookie- 数据上限4KB左右（根据浏览器不同会有所区别）
- 打开同源页面或刷新页面数据保留
- 关闭浏览器数据清空
- 打开或关闭新的浏览器窗口数据会被保留
- 新事件
onresizeondragonscrollonmousewheelonerroronplayonpause - WebSocket
单个 TCP 连接上进行全双工通讯的协议CSS权重 256进制
| 属性 | 权重 |
|:--------:| -------------|
| !important | 无穷 |
| 行间样式 | 1000 |
| id | 100 |
| class/属性选择器/伪类:hover | 10 |
| 标签选择器/伪元素:after | 1 |
| 通配符 | 0 |CSS 兼容内核
-moz-代表FireFox浏览器私有属性-ms-代表IE浏览器私有属性-webkit-代表safari、chrome浏览器私有属性-o-代表opera浏览器私有属性CSS3 新特性
- 选择器 - 伪类和伪元素
a:link { color: #FF0000} /* 未访问的链接 */ a:visited { color: #00FF00} /* 已访问的链接 */ a:hover { color: #FF00FF} /* 鼠标移动到链接上 */ a:active { color: #0000FF} /* 选定的链接 */ ::before { } /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */ ::after { } /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */ :first-letter /* 选择该元素内容的首字母 */ :first-line /* 选择该元素内容的首行 */ ::selection /* 选择被用户选取的元素部分 */ - 背景和边框
背景：background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）background-origin：规定背景图片的定位区域
对于background-origin属性，有如下属性:
边框：背景图片可以放置于 `content-box`、`padding-box` 或 `border-box` 区域border-radius：圆角box-shadow/text-shadow：阴影border-image：边框图片 - 文本效果
text-shadow向文本添加阴影text-justify规定当 text-align 设置为 “justify” 时所使用的对齐方法text-emphasis向元素的文本应用重点标记以及重点标记的前景色text-outline规定文本的轮廓text-overflow规定当文本溢出包含元素时发生的事情text-wrap规定文本的换行规则word-break规定非中日韩文本的换行规则word-wrap允许对长的不可分割的单词进行分割并换行到下一行text-decoration文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线@font-face自定义字体渐变CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变) - 2D/3D 转换
2D 转换（transform）
| 属性 | 描述|
|--------:| :-------------|
|translate()| 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px); |
|rotate()| 元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg); |
|scale()| 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4); |
|skew()| 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg); |
|matrix()| 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0); |
3D 转换
| 属性 | 描述|
|--------:| :-------------|
|rotateX()| 元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); |
|rotateY()| 元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg); |
|perspective| 规定 3D 元素的透视效果 | 动画、过渡
过渡效果（transition）使页面变化更平滑，以下参数可直接写在 transition 后面
| 属性 | 描述|
|--------:| :-------------|
|transition-property| 执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。 |
|transition-duration| 过渡动画的一个持续时间 |
|transition-timing-function| 在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier |
|transition-delay| 延迟多久后开始动画 |动画（animation）先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面| 属性 | 描述|
|--------:| :-------------|
|animation-name| 定义动画名称 |
|animation-duration| 指定元素播放动画所持续的时间长 |
|animation-timing-function| ease linear ease-in ease-out ease-in-out cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式 |
|animation-delay| 指定元素动画开始时间 |
|animation-iteration-count| infinite number指定元素播放动画的循环次数 |
|animation-direction| normal alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放） |
|animation-play-state| running paused ：控制元素动画的播放状态 |多列布局
| 属性 | 描述|
|--------:| :-------------|
|column-count| 规定元素应该被分隔的列数 |
|column-gap| 规定列之间的间隔 |
|column-rule| 设置列之间的宽度、样式和颜色规则 |用户界面
新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
| 属性 | 描述|
|--------:| :-------------|
|resize| both none both horizontal vertical |
|box-sizing| 属性可设置的值有 content-box、border-box 和 inherit |
|content-box| 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width |
|border-box| 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成 |
|inherit| 规定应从父元素继承 box-sizing 属性的值 |
|outline-offset| 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 |- 清除浮动方法 如何解决margin垂直塌陷问题（触发父节点的bfc）
额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（
不推荐）<div class="box"> <div class="box01">box01</div> <div class="box02">box02</div> <div class="clear">额外标签法</div> </div> .clear{ clear:both; }优点：通俗易懂，方便 缺点：添加无意义标签，语义化差父级添加overflow属性（父元素添加overflow:hidden）（
不推荐）
通过触发BFC方式，实现清除浮动.box{ overflow: hidden; }优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素使用after伪元素清除浮动（
推荐使用）.clearfix:after{ /*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; clear:both; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ }优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.使用before和after双伪元素清除浮动
.clearfix:after, .clearfix:before{ content: ""; display: block; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; }优点：代码更简洁 缺点：用zoom:1触发hasLayout. haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。
当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。
默认触发hasLayout的有如下HTML标签：
html,body,table,tr,th,td,img,hr,input,button,select,textarea,fieldset,frameset,frame,iframe可以触发hasLayout的有如下CSS属性：
display:inline-block height/width:除了auto float:left/right position:absolute writing-mode(IE专有属性，设置文本的垂直显示):tb-rl zoom(IE专有属性，设置或检索对象的缩放比例):除了normalIE7专有的触发hasLayout的CSS属性
min-height/max-height/min-width/max-width:除none overflow\overflow-x\overflow-y:除visible position:fixedbfc解决margin塌陷
.box01 { width: 200px; height: 200px; margin-top: 60px; background-color: #000; /* position: absolute; */ /* overflow: hidden; */ /* display: inline-block; */ /* float: left; */ }
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)