大家好，今天来为大家解答h5css3新特性这个问题的一些问题点，包括开发常用css3也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
一、H5与C3的新交互特性有哪些
这次给大家带来H5与C3的新交互特性有哪些，怎么使用H5与C3的新交互特性？使用H5与C3的新交互特性的注意事项有哪些，下面就是实战案例，一起来看一下。
HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言，我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。这时候问题出来了，为什么我们要单独使用CSS呢，HTML不是一样可以控制Web页面的显示效果么？为了回答这个问题，我举个简单的例子：
一旦形容的事情过多，想要把事情描述清楚的时候，我们不得不重复大量的信息？页面语言也是一样，在这种情况下显得杂乱无章，非常难以理出头绪。通过将控制显示效果的语言集成到CSS里，我们不但可以保证页面语言主体部分的简洁，而且可以非常方便的复用各种语言集合。
HTML5和CSS3是HTML和CSS的最新版本，它们目前均未确定标准，但是已经公布的新特征已经让我们心动不已。
HTML4中的内容标签级别相同，无法区分各部分内容。而 HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。
现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。
HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。
在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。
HTML5提供了地理信息的应用接口 Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息；同时用户也可以选择是否关闭这个功能。
HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。
我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。
CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。
CSS3新供的多栏布局选择器无需 HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。
圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。
当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。
此外，CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。
利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也可以被搜索引擎检索到。
相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
二、CSS 核心样式、H5 + C3 新特性
设置文字是否加粗显示。有两种类型：单词类型、数字类型
| normal|默认值，定义批准的字体
| bold|定义粗体字符，b strong标签的默认值
数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400==normal 700==bold
|normal|设置正规的字体，大多是标签的默认值
| italic|设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示
| oblique|设置斜体的文字，只是将文字倾斜显示，与字体无关
设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
| px像素值|设置的行高的具体像素值
|百分比数值|设置的本身字号像素值的百分比
2.字号/行高、字体重点是字号和行高之间使用/
3.加粗和斜体两个值之间可以互换位置、字号、行高、字体不能更改位置。
| left|居中对齐，大部分标签的默认值
设置文本整体是否有线条的修饰效果
| none|没有修饰，大部分标签的默认值
| line-through|中划线，删除线<del>标签的默认值
| underline|下划线，<a>标签的默认值
| em单位|首行缩进几个中文字符的位置
|百分比|表示缩进文字所在标签的父级标签width属性值的百分比
盒子可以实体化的区域 width+ height+ padding+ border
盒子实际占位的位置 width+ height+ padding+ border+ margin
设置可以添加元素内容的区域的宽度
| auto|默认值，浏览器可计算出实际的宽度
|%|定义参考父元素宽度width的百分比宽度
内边距padding：设置的是元素的边框内部到宽高区域之间的距离。
外边距margin：设置的是盒子与盒子之间的距离。
四值法上右下左 padding: 10px 20px 30px 40px;
设置的是内边距外面的边界区域作为盒子的实体化的最外层
| dashed|定义虚线在大多数浏览器中呈现为实线
| dotted|定义点状边框，在大多数浏览器中呈现为实线
| double|定义为双线，双线的边框的宽度等于 border-width的值
| groove|定义3D凹槽边框，其效果取决于border-color的值
| ridge|定义3D垄装边框，其效果区域于border-color的值
| inset|定义3D内容凹陷效果，其效果取决于border-color的值
| outset|定义3D内容凸出效果，其效果取决于border-coloe的值
1.大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
2.<ul>和<li>两种列表有默认的列表前缀，清除list-style属性
3.<a>标签的默认样式，顺带设置页面中常用的a的公共样式：color和text-decorstion
4.清除默认加粗效果:设置font-weight
父元素的width>=所有子元素width+ padding+ border+ margin
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部
同级元素塌陷：大的margin吃掉小的
标准文档流：指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容位置也会随着发生变化
2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3.自动换行，元素内一行内容写满元素的width时会自动进行换行。[图片上传失败...(image-5327c1-1604048626452)]
块级元素：大部分容器级标签包括p标签都是块级元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行内元素：大部分的文本及标签比如 a,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
行内块元素：(img，button,input，textarea,select), img等
display属性更改的显示模式并没有改变标准流本质性质
| block|表示元素要以块级元素模式加载，具备块级特点
| inline|表示元素要以行内元素模式加载，具备行内特点
|inline-block|表示标签及行内块模式加载，具备行内块特点
| none|表示标签及内容直接隐藏，让出原有标准流的位置
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位
1.浮动(float)：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
浮动的问题二：父元素没有高度，会影响后面元素的标准流位置，如果福哦的那个的子元素足够高，有可能影响到后面浮动的贴边。
[图片上传失败...(image-7923f-1604048626452)]
清除浮动一：给标准流的父元素强制给一个合适的高度height
解决：浮动元素影响后面元素标准流位置和贴边。
问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。
总结如果父元素高度是固定的，建议使用height属性解决
如果父元素告诉需要自适应，建议使用overflow属性解决浮动问题
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。
-背景图片 background-image属性 url(图片路径)
| repeat|重复，默认属性值，表示会使用背景重复加载填满整个盒子背景区域
| no-repeat|不重复，不论背景图是否大于盒子范围，都只加载依次图片
| repeat-x|水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
| repeat-y|垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
-背景定位 background-position主要用于设置不重复的图片在背景区域的加载开始位置
单词表示法水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
像素表示法水平垂直 border以内的
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
-背景附着 background-attachment
| scroll|滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
| fixed|固定的，背景图的定位的参考点从盒子border，以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走
background属性可以将五个单一属性的值进行合写。属性值：可以有 1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
-背景缩放background-size设置<img>的尺寸
| px值| 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载
|百分比|同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
| cover|自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
| contain|自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域
相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置
-绝对定位 absolute脱离标准文档流
[图片上传失败...(image-974217-1604048626452)]
<audio>音频标签 ogg mpeg wav
| autoplay| autoplay|如果出现该属性，则音频在就绪后马上播放
| controls| controls|如果出现该属性，则向用户显示控件，比如播放按钮
| loop| loop|如果出现该属性，则每当音频结束时重新开始播放。
| preload| preload|如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
| src| url|要播放的音频的 URL。
<video>视频标签 ogg mp4 webm
[图片上传失败...(image-361a85-1604048626452)]
|autoplay| autoplay|视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
| controls| controls|向用户显示播放控件
| loop| loop|放完是否继续播放该视频，循环播放
| preload| auto|（预先加载视频）
none（不应加载视频）规定是否预加载视频(如果有了autoplay就忽略该属性）
| width| pixels(像素)|设置播放器宽度
| height| pixels(像素)|设置播放器高度
| poster| Imgurl|加载等待的画面图片
type="email"限制用户输入必须为Email类型
type="url"限制用户输入必须为URL类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="color"生成一个颜色选择表单
•<datalist>标签规定了<input>元素可能的选项列表。
•<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入
过程中，会自动响应<option>元素的值。
•绑定的<input>标签必须设置 list属性，属性值等于<datalist>标签的 id属性值。
required required表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocus autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
autocomplete off/ on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
默认已经打开，如 autocomplete=”on“
-需要放在表单内同时加上name属性
multiple multiple可以多选文件提交
子级选择器用于选取带有特定父元素的元素书写语法element1>element2
[图片上传失败...(image-bb266d-1604048626452)]
--相邻兄弟选择器用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
| element1+element2|匹同一个父元素中紧跟在element1后面的一个element2元素
--其他兄弟选择器匹配同一个父元素中在element1后面的所有 element2元素
| elemenet~element2|匹配同一个父元素中elemenet1后面的所有element2元素
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个这个是元素的第几个在元素下选取
E[att="val"]选择具有att属性且属性值等于val的E元素
E[att^="val"]匹配具有att属性、且值以val开头的E元素
E[att$="val"]匹配具有att属性、且值以val结尾的E元素
E[att*="val"]匹配具有att属性、且值中含有val的E元素
content-box标准模式盒子总体大小为 width(height)+ padding+ border
border-box怪异模式盒子总体大小为 width和 height
[图片上传失败...(image-cdef05-1604048626452)]
| h-shadow|必需。水平阴影的位置。允许负值。
| v-shadow|必需。垂直阴影的位置。允许负值。
--transition-property过渡的属性
• all表示所有变化的属性都过渡
•属性名使用具体的属性名，多个属性名中间逗号分隔
--transition-timing-function时间曲线
对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
translate(x,y) x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负
translate(x)只有一个数值，表示水平方向的位移
translate(y)只有一个数值，表示垂直方向的位移
scale(x, y) x,y分别为改变元素的宽度和高度的倍数
scale(n)只有一个值，表示宽度和高度同时缩放n倍
deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0
设置调整元素的水平和垂直方向原点的位置
x定义 X轴的原点在何处。可能的值：left、center、right、像素值、百分比
y定义 Y轴的原点在何处。可能的值：top、center、bottom、像素值、百分比
[图片上传失败...(image-ac107d-1604048626452)]
作用：设置在 z轴的视线焦点的观察位置，从而实现 3D查看效果。
属性值：像素值，数值越大，观察点距离 z轴原点越远，图形效果越完整且接近原始尺寸。注意：透视属性需要设置给 3D变化元素的父级
rotateX(angle)定义沿着 X轴的 3D旋转。
rotateY(angle)定义沿着 Y轴的 3D旋转。
rotateZ(angle)定义沿着 Z轴的 3D旋转。
[图片上传失败...(image-e781c5-1604048626452)]
translateX(x)设置 X轴的位移值。
translateY(y)设置 Y轴的位移值。
translateZ(z)定义3D位移，设置Z轴的位移值。
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。
用于设置被嵌套的子元素在父元素的 3D空间中显示，子元素会保留自己的 3D转换坐标轴。
flat：所有子元素在 2D平面呈现
Internet Explorer 10、Firefox以及 Opera支持 transform属性。
Chrome和 Safari需要前缀-webkit-。
Internet Explorer 9需要前缀-ms-。
三、h5培训心得体会
h5培训的人挺多的，培训机构在找的时候要多看几家有个对比这样才有可能找到最合适的，h5培训学习期间要用心，有不理解的就马上问“学问”嘛，这样能有很快的提升，面试要有信心可能你的势力完全可以胜任工作但是信心不足，就很难拿到offer――华清远见
h5css3新特性和开发常用css3的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！
