常见的H5C3面试题
CSS3的新特性
1.怪异盒模型
box-sizing:border-box
2.渐变
linear-gradient、radial-gradient
3.背景
background-image、background-size、background-origin
4.伪类选择器
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
p:first-child 选择属于其父元素的第一个子元素的每个
元素。
p:last-child 选择属于其父元素的最后一个子元素的每个
元素。
p:nth-of-type(2) 选择属于其父元素第二个的
元素的每个
元素。
p:nth-of-last-type(2)选择属于其父元素倒数第二个的
元素的每个
元素。
p:not(.hm) 选择除了有hm类名的所有的
元素.
5.边框
border-radius、border-image
6.阴影
box-shadow、text-shadow
7.2D/3D转换
transform：translaterotate scale skew
8.过渡
transition
9.动画
animation
10.弹性盒子
flex
11.媒体查询
@media
流式布局的缺点
如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
原因是宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
Flex布局的缺点
浏览器兼容性比较差，只能兼容到ie9及以上
手机端的支持也不理想
响应式布局的优缺点
优点
1: 在分辨率不同，设备环境进行一些不同的设计，对于小企业而言，开发维护和运营上，相对多个版本成本会降低很多。
2: 兼容性好，跨平台，移动设备尺寸参差不齐，版本定制通常只适用于固定规格的设备，但不适用分辨率变化较大的设备，响应式布局能够较好的解决这个问题。
缺点
1: 移动端和PC端页面加载的内容是一样的，代码多了，会出现隐藏无用的元素，加载时间加长导致文件增大，影响加载速度，流量消耗也相对比较大。
2: 局限性，响应式局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。
3: 一定程度上改变了网站原有的布局结构。
C3动画的八大参数
1. animation-name 动画名称
2. animation-duration 动画时间
3. animation-iteration-count 动画次数
4. animation-timing-function 动画效果, 动画速度
5. animation-delay 动画延迟
6. animation-direction 动画方向 (设置是否反向运动)
7. animation-fill-mode 动画时间之外的状态
8. animation-play-state 动画执行状态
什么是标签语义化? 标签语义化有什么优势? 你知道的常见语义化标签有哪些?
标签语义化,就是让标签有自己的含义。从而使代码的结构更清晰。
优势
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）
常见的语义化标签
~
定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级
定义页面的导航链接部分区域
定义页面的主要内容，一个页面只能使用一次。
定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系
元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。
定义与主要内容相关的内容块。通常显示为侧边栏。
定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等