css3

1，CSS3与CSS的区别有哪些

一、指代不同1、CSS3：是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。2、CSS：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。二、内容不同1、CSS3：主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。2、CSS：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。三、特点不同1、CSS3：新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。2、CSS： 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。参考资料来源：百度百科-CSS参考资料来源：百度百科-CSS3

2，css和css3 有什么区别？？

都是网页样式code，不同的在于css3比css多了一些样式设置而已。
css3是向前兼容的，也就是说，css中有效的code在css3也有效。
以上是纯code方面来看，而对于具体的显示效果，还要看浏览器对其的支持情况。
举2个简单的例子：
一、一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。
二、一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。
css3和css，在编写code的时候，除了对一些css3中新出现的属性设置，其它完全一样。

3，css3 新增选择器有哪些？

一、css3之前的选择器ID选择器，#类选择器，.包含选择器(E F)伪类选择器（:link,visited,hover,active,focus,first-child）伪元素选择器（::first-line,first-letter,before,after）通配选择器(.)属性选择器(foo[name='martin'])子包含选择器(E>F)相邻兄弟选择器(E+F)二、css3新增选择器新增属性选择器：E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串新增结构伪类选择器：E:root 匹配文档所在的根元素E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:empty另外，使用前要考虑浏览器版本，新增css3选择器存在兼容性问题。平时多多练习，多动手。

4，html 5 的CSS3新增的伪类选择器还包括哪些？

:first-of-type p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 元素的每个 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 元素。
:disabled input:disabled 选择每个禁用的 元素
:checked input:checked 选择每个被选中的 元素。
:not(selector) :not(p) 选择非 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。

5，CSS3 弹性布局

flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。

弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。

弹性容器设置属性 display:flex;

一、容器属性

flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap;

⑴ flex-direction 子元素排列方向

flex-direction: row; 从左到右

flex-direction: row-reverse; 从右到左

flex-direction: column; 从上到下

flex-direction: column-reverse; 从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap; 不换行

flex-wrap:wrap; 换行

flex-wrap: wrap-reverse; 反转 wrap 排列，行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start;

justify-content: space-between;

3 align-items 子元素在交叉轴上对齐方式

align-items: center; 垂直方向居中

align-items:flex-start; 垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end; 垂直方向的底部/交叉轴的终点对齐

align-items: baseline; 项目的第一行的文字的基线对齐

align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

二、子元素属性（写在子元素下）

align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

align-items: center;

align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: stretch;

order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0;，可以为负值。

flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。

flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。

flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。

flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。

flex-shrink: 1; 默认值，即如果空间不足，缩小。

flex-shrink: 0; 不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。

如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。

链接：https://juejin.cn/post/7038088241437736991

6，css3有哪些新特性 包含哪些模块

1、CSS3圆角表格圆角表格，对应属性：border-radius。
2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。
3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。

边框（Borders）
border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果
border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象
border-radius:能产生类似圆角矩形的效果
背景（Backgrounds）
background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content
border:控制背景起始于左上角的边框
padding:控制背景起始于左上角的留白
content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding
border:会覆盖住背景
padding:不会覆盖背景
background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定
multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。
文字效果（Text effects）
text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text -overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。
颜色（Color）
HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）
HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）
opacity:直接控制不透明度，用0到1之间的数来表示
RGBA colors:和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。
实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。
经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。
用户界面（User-interface）
resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局
选择器（Selectors）
CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。
Attribute selectors:在属性中可以加入通配符，包括^,$,*
[att^=val]:表示开始字符是val的att属性 CSS3选择器[att$=val]:表示结束字符是val的att属性
[att*=val]:表示包含至少有一个val的att属性
其它模块：
（Other modules）
media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。
multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值
column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距

7，CSS3都有哪些新特性呢？

第 1 选择器 第 2 RGBA和透明度 第 3 多栏布局 第 4 多背景图 第 5 Word Wrap 第 6 文字阴影 第 7 @font-face属性 第 8 圆角(边框半径) 第 9 边框图片 第 10 盒阴影 第 11 盒子大小 第 12 媒体查询 第 13 语音扩展资料:工作原理CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符[29]。新增特性中transform的原理较为特殊，虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形，但是变形中的矩阵函数都可以使用matrix()函数来代替。新增特性CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。参考资料:百度百科-css3

8，html5新增了哪些标签？css3新增了哪些属性

h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。- h5新增的标签新增元素说明video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 progress 进度条 menu 菜单 embed 嵌入的外部资源 menuitem 用户可点击的菜单项 menu 菜单 template section nav aside article footer header - css3 css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面选择器框模型背景和边框 border-radius、box-shadow、border-image、 background-size：规定背景图片的尺寸 background-origin：规定背景图片的定位区域 background-clip：规定背景的绘制区域文本效果（常用） text-shadow：设置文字阴影 word-wrap：强制换行 word-break css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range2/3D转换 transform：向元素应用2/3D转换 transition：过渡动画@keyframes规则： animation、animation-name、animation-duration等用户界面（常用） box-sizing、resize css3新增伪类 ：nth-child() ：nth-last-child() ：only-child ：last-child ：nth-of-type() ：only-of-type() ：empty ：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。 ：enabled ：disabled ：checked ：not

9，CSS3新增了一个什么属性，用于定义服务器字体？

CSS3 @font-face 规则在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。实例: @font-face{font-family: myFirstFont;src: url('/example/css3/Sansation_Light.ttf') ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}

10，css3有哪些新特性？包含哪些模块？

第 1 选择器第 2 RGBA和透明度第 3 多栏布局第 4 多背景图第 5 Word Wrap第 6 文字阴影第 7 @font-face属性第 8 圆角(边框半径)第 9 边框图片第 10 盒阴影第 11 盒子大小第 12 媒体查询第 13 语音1、CSS3圆角表格圆角表格，对应属性：border-radius。2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。边框（Borders）border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果；border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象；border-radius:能产生类似圆角矩形的效果。背景（Backgrounds）background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content。border:控制背景起始于左上角的边框；padding:控制背景起始于左上角的留白；content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding。border:会覆盖住背景；padding:不会覆盖背景；background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。文字效果（Text effects）text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。text -overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。颜色（Color）HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）opacity:直接控制不透明度，用0到1之间的数来表示。实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。用户界面（User-interface）resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。选择器（Selectors）CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。其它模块：（Other modules）media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值。column-width:指定每列宽度; column-count:指定列数; column-gap:指定每列之间的间距; column-rule-color:控制列间的颜色; column-rule-style:控制列间的样式; column-rule-width:控制列间的宽度; column-space-distribution:平均分配列间距。

11，h5和css3有哪些新特性

H5的新特性：1. 用于绘画 canvas 元素。2. 用于媒介回放的 video 和 audio 元素。3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。4. 语意化更好的内容元素，比如 article、footer、header、nav、section。5. 表单控件，calendar、date、time、email、url、search。css3的新特征:选择器。2.和透明度。3. 多栏布局。4. 多背景图。5.Word Wrap。6. 文字阴影。7.@font-face属性。8.圆角(边框半径)。9.边框图片。10.盒阴影。11. 盒子大小。12. 媒体查询。13.语音。

精华总结

雨露，是万物生长的灵丹妙药，它能让万物欣欣向荣，给人带来希望和欢乐。起名，是给孩子取名最重要的一步，因为名字，在某种程度上就是一种文化。一个好的名字，可以让孩子从小拥有一个好的起点。那么，旸字取名呢，有着什么样的寓意及含义？

1、旸是五行金之字，五行属水，寓意孩子聪明机智，有大智慧，富有爱心。

根据五行属性来取名，金能克水，就像是金被水淹没了，所以会出现水变少，阳气不充足的情况。而旸字五行属水，表示有希望的样子，寓意孩子聪明机智，有大智慧，富有爱心，有爱心之义，对人非常友好，人缘非常好。由于在起名时需要注意五行八字，所以名字要避开太多不利因素。例如孩子取名为旸这个名字时，可选择五行属金且与水相冲或水火相济或金水相济等字面寓意相搭。

2、旸字是木之金之字，五行属木，为金之态，寓意孩子金木水火土五行协调，和谐发展。

雨露的滋润，日出而作，日落而息，都让人感到无比满足。旸，字音shèng,寓意着孩子有一颗包容和感恩之心。这与“日出而作、日落而息”有异曲同工之妙……旸给人带来欢乐、吉祥的同时，也寓意着孩子金木水火土协调发展……

3、旸是一种很有灵性的字，可形容孩子生机勃勃，乐观向上。

【旸】有光明、温暖、明朗的意思，可用作名字。【阳凯是太阳之意。【阳阳阳】阳代表明亮，阳代表光明及温暖。用阳代表光明的事物，表示孩子生机勃勃，乐观向上。【阳欣可表示欣欣向荣之意。【阳和】可表示温暖的意思。

4、旸字取名，寓意孩子乐观向上，对生活充满希望。

旸字寓意孩子乐观向上，对生活充满希望，乐观积极的生活态度，有助于提高孩子的自信心。另外旸字取名还有着积极向上、乐观开朗、吉祥幸福、生活美满、幸福美满等美好祝愿，其寓意吉祥。而且旸在中国汉字里是非常多见的一个字，我们可以将这个字用在名字中来表达。旸字取名代表着孩子未来很美好而充满希望。如果将其用于起名中，则代表着孩子未来会有很多希望。同时也象征着孩子将来会有所成就。

5、旸作为名字有吉祥富贵之意。

旸这个名字，在很早的时候就被赋予了吉祥富贵的寓意，因为它在名字中的意思很多。所以有很高的吉祥富贵之意。这个名字将孩子命名为【旸】具有美好的寓意。