CSS3的新特性

1.怪异盒模型

box-sizing:border-box

2.渐变

linear-gradient、radial-gradient

3.背景

background-image、background-size、background-origin

4.伪类选择器

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child   选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

p:first-child  选择属于其父元素的第一个子元素的每个 <p> 元素。

p:last-child  选择属于其父元素的最后一个子元素的每个 <p> 元素。

p:nth-of-type(2)  选择属于其父元素第二个的 <p> 元素的每个 <p> 元素。

p:nth-of-last-type(2)选择属于其父元素倒数第二个的 <p> 元素的每个 <p> 元素。

p:not(.hm) 选择除了有hm类名的所有的<p>元素.

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> 定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级

<header>  用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记

<nav>  定义页面的导航链接部分区域

<main>定义页面的主要内容，一个页面只能使用一次。

<article> 定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系

<section>  元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

<aside>  定义与主要内容相关的内容块。通常显示为侧边栏。

<footer>  定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

CSS3的新特性

1.怪异盒模型

box-sizing:border-box

2.渐变

linear-gradient、radial-gradient

3.背景

background-image、background-size、background-origin

4.伪类选择器

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child   选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

p:first-child  选择属于其父元素的第一个子元素的每个 <p> 元素。

p:last-child  选择属于其父元素的最后一个子元素的每个 <p> 元素。

p:nth-of-type(2)  选择属于其父元素第二个的 <p> 元素的每个 <p> 元素。

p:nth-of-last-type(2)选择属于其父元素倒数第二个的 <p> 元素的每个 <p> 元素。

p:not(.hm) 选择除了有hm类名的所有的<p>元素.

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> 定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级

<header>  用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记

<nav>  定义页面的导航链接部分区域

<main>定义页面的主要内容，一个页面只能使用一次。

<article> 定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系

<section>  元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

<aside>  定义与主要内容相关的内容块。通常显示为侧边栏。

<footer>  定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等