css3属性手册(css3的特性)
常用重要CSS样式的属性
盒子模型是CSS中一个很重要的概念，页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，一个页面由很多盒子组成，盒子之间会互相影响。只有掌握盒模型以及其中每个属性的用法，才能真正控制好页面元素。
盒子模型主要定义四个区域： 内容(content)、内边距/填充(padding)、边框(border)和外边距(margin) 。
盒子的内容区域存放文本和图片等页面元素，拥有如下属性：
边框基本属性：
通过一个属性设置四个方向边框的宽度、样式、颜色
属性：border
取值：width style color;
只设置某一条边框的宽度、样式、颜色
语法：border-方向（top/right/bottom/left）：width style color;
只设置边框的宽度、样式、颜色中的一种
语法：border-属性（width/style/color）：取值;
只设置某一条边框的宽度、样式、颜色中的一种
语法：border-方向（top/right/bottom/left）-属性（width/style/color）：取值;
属性：border-radius
作用：设置倒角位置处圆的半径，半径越大，弧度越大。
取值：
属性：border-image
语法：
border-image-source ：引入背景图片
取值：
默认值：无图片
url(图片URL地址)
border-image-slice ：切割引入背景图片，把边框背景切成9份
取值：
number：默认单位px
百分比：
fill：保留边框图像的中间部分
border-image-width ：指定边框图片的宽度
border-image-repeat ：指定边框背景图片的排列方式，可定义2个参数，即水平和垂直方向
取值：
Stretch：默认值，拉伸
Repeat：平铺
Round：取整平铺
内容区域和边框（边缘）之间的距离
语法：padding: 值；
单边设置：padding-方向（top/right/bottom/left）:值；
取值：
数值px
百分比
内边距的简写方式：
padding:value;
四个方向内边距的值均为value
padding:value1 value2;
Value1为上下内边距的值，value2为左右内边距的值
padding:value1 value2 value3;
Value1为上内边距的值，value2为左右内边距的值，value3为下内边距的值
padding:value1 value2 value3 value4;
上右下左内边距的值分别为value1， value2， value3， value4
外边距指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。默认不能被其他元素所占据，用于拉伸两个元素间的距离。
语法：margin: 值；
单边设置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸计算模式
属性：box-sizing
取值：
属性：resize
取值：
位于元素边框之外的一条线
属性：
outline：width style color;
属性：box-shadow
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一组值构成的值列表
属性：background-color
取值：颜色值或transparent
注意：背景颜色是从边框位置处开始绘制
属性：background-image
取值：url(背景图像URL)
属性：background-repeat
取值：
属性：background-attchment
取值：
scroll：默认值，滚动
fixed：固定
属性：background-position
取值：
属性：background-size
取值：
属性：background-origin
取值：
属性：background-clip
取值：
CSS3多背景通过为每个背景属性提供多个属性值实现。
font 简写属性语法：
将所有字体属性合写为一行，其中font-family是复合属性中必不可少的属性。
可以不设置其中的某个值，如果省略值地话，就使用属性的默认值。
②文本属性：
（2）CSS3文本阴影属性：
属性：text-shadow
作用：产生阴影和模糊主体
语法：
作用：定义列表的编号样式
属性：list-style-type
作用：用于设置列表项的图像属性
语法：
图像URL地址：图像的相对路径或绝对路径
none：默认值，不指定图像
注意：图片图标与文字之间的距离在不同浏览器中是不一样的，因此，一般情况下不采用这种方式来设置列表的图片样式。
通过设置li的背景图片的方式来设置列表图片基本步骤：
设置list-style-type属性值为none
设置li标记的背景属性backgruond
作用：用于声明列表标志相对于列表项内容的位置
语法：
作用：可以同时设定列表样式类型、列表样式位置、列表样式图片等属性的值。
语法：
注意：
可以不设置其中的某个值，未设置的属性采用默认值
同时指定list-style-image和list-style-type时，list-style-image优先显示，除非list-style-image设置为none，或图片路径错误无法显示
当列表与列表项目同时使用样式时，列表项目的样式优先显示
特点：
可以设置宽度和高度
默认情况下每个块级元素独占一行
作用：
块级元素主要用于页面布局
常用块级元素：
div、p、h1~h6、ol、ul等
特点：
不可以设置宽度和高度，其宽度就是自身文字或图片的宽度
默认情况下多个行内元素会在一行内显示，遇父元素边界时会自动换行
作用：
行内元素主要用于设置文样式
常用行内元素：
a、span、em、b、i、strong、img、input等
作用：控制页面元素脱离原有文档流，实现向左或向右移动，直到该元素外边缘碰到其包含框或另一个浮动框的边缘停止，标准流中的其他盒子将顶到浮动盒子的位置。浮动的元素不占据实际空间。
属性： float
取值：
浮动元素不会相互重叠；
浮动元素不会上下浮动，如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。
作用：规定元素的哪一侧不允许出现其他浮动元素。
取值：
作用：控制页面元素在页面中的位置。
属性：position
取值：static/relative/absolute/fiexed
默认属性值，元素按照标准文档流进行排列，块级元素独占一行， 行内元素位于一行内显示，一行显示不下，自动换行。
特点：
相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-idex属性
偏移属性:
left:数值px;
right:数值px;
top:数值px;
bottom:数值px;
当元素相对定位后会产生Z轴上的堆叠，不设置z-index属性时，默认该元素出现在X轴和Y轴构成的平面上。
特点：
建立了以包含块为基准的定位
绝对定位的元素的位置相对于最近的已定位祖先元素（设定了绝对定位、相对定位或固定定位中的任何一种），如果元素没有已定位的祖先元素，则该元素的位置相对于浏览器窗口。
完全脱离了标准文档流
随即拥有偏移属性和z-idex属性
偏移属性：
left:数值px;
right:数值px;
top:数值px;
bottom:数值px;
绝对定位未设置偏移量的特点：
无论是否存在已经定位的祖先元素，都保持在元素的初始位置
脱离了标准文档流
设定固定定位的元素框的表现类似于将position设置为absolute，不过其包含块是浏览器窗口本身。
在计算机显示中把垂直于屏幕平面的方向称为Z方向，CSS绝对定位容器的z-index属性即对应该方向。
作用：用于控制元素的层叠次序，使得某个元素浮于其他元素之上。
语法：
auto：遵循其父元素的定位
number：整数，可负，值大者叠加在上层
注意：使用z-index属性时，要求该元素的position属性值为absolute、relative或fixed。
作用：用于定义建立布局时元素生成的显示框类型
语法：dispaly:值;
作用：用于定义建立布局时元素生成的显示框类型
语法：visibility:值;
CSS系列篇：CSS3的常见属性
过渡使用 trainsition 属性，让元素的样式变化，不再瞬间完成，而是可以设定时间，在时间段内逐渐完成。
对单独的div元素做分别做设置进行属性说明：
1、设置在3秒内完成颜色的变化
2、可以分别对不同的属性分开做时间长度的设定，记得用逗号隔开
3、延迟delay：想在某个属性开始执行样式变化后的多少秒，才让另一个属性开始进行样式的动态变化，就可以使用延迟。用法就是：
2s 1s width ,意思就是在高度开始发生变化后的1s后，width的宽度才开始展现变化，然后在2s内完成宽度从30px到60px的变化。
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果
3、变化的速度：默认不设定，就是逐渐放慢的，默认值是ease
还可以额外指定设置：
linear:匀速
ease-in：加速
ease-out：减速
上述的三个情况，可以综合写为：
对应的变化就是，div的宽度瞬间变化为60px,然后高度在宽度变化后的1s之后才开始发生变化，在3秒内逐渐加速完成。
重点：
兼容性：各大浏览器基本已经支持无前缀的transition，所以可以直接使用不加前缀；
transition的变化设置，是只对有明确数值设置变化的，对于none,block这类的文字描述无效；
有效性：transition是一次性的，无法重复，除非反复触发。
1、相比于过渡属性transition的设置，动画animation的实现支持更为复杂的动态样式效果。
对单独的div元素做分别做设置进行属性说明：
1、使用animation动画属性，最重要的就是配合有“关键帧”——@keyframes
样式设置如下：
这样的设置，就是将1s分为3帧，每帧显示不同的背景颜色，然后动画效果只显示1次。
注意动画执行完成之后，就恢复元素原来定义的样式设置,如果原来没有这个样式的定义，那也是动画执行完成后恢复没有的状态。
@keyframes的写法比较松泛：
0%等同于from,100%等同于to：
如上面的写法就等同于：
下面的关键帧的写法也是有效的：
当然，（1）也是有延迟效果的设置：设置延迟多少秒后执行动画
（2）每帧之间是平滑过渡的，当然也可以设置为分步过渡，这样就有卡顿的效果：
解释：该动画，在停留1秒后开始执行，执行3次，每次执行时间为2秒，在2秒时间执行完成rainbow定义的关键帧样式，然后分步执行，有卡顿效果。
2、动画持续：动画效果默认只播放一次，加入infinite关键字，可以让动画无限次播放
3、指定动画播放的次数，直接写数值：
4、如果想要让动画结束后，停留在结束状态的样式，而不是默认变为起始状态，就可以添加关键字：
animation-fill-mode属性：
none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
4、如果想要将帧数的设置，反向执行，就可以使用animation-direction属性：
normal：动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放
reverse：动画执行，先从结束帧的样式执行跳回到起始帧的样式。例如：
所有的transform属性设置，都不会改变元素占据的位置，还是保留的
1、旋转rotate
通过rotate设置旋转角度，来旋转元素
以div元素为例:
···
body
div class="transform"/div
/body
···
2、位移translate
设置X轴、Y轴方向的位移值
设置X轴方向的位移值
设置Y轴方向的位移值
3、缩放scale
设置元素水平方向和垂直方向同时缩放
设置元素水平方向缩放
设置元素垂直方向缩放
只设置一个参数，设置元素水平方向和垂直方向，同一比例同时缩放
4、扭曲：skew，设置元素的平面XY轴的扭曲角度
设置元素X轴，Y轴的扭转角度
只设置一个参数，元素X轴，Y轴的扭转角度相同
设置元素X轴的扭转角度
设置元素Y轴的扭转角度
Css3——background属性详解
background ：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。
颜色名称，如： background-color:red ;
十六进制背景色，如： background-color:#f00; ;
rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，
如： background-color:rgb(255,0,0.3); ;
特殊值：transparent，透明色： background-color:transparent ;
background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。
一张图片： background-image: url(img/a.jpg);
多张图片： background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不显示背景图像
background-image: none;
background-repeat 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
常用的4个值：
repeat：水平和垂直方向都重复图像， background-repeat: repeat;
repeat-x：水平方向重复图像
repeat-y：垂直方向重复图像
no-repeat：图像不重复
规定背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动
background-attachment: fixed;
第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。
例如： background-position: right； 代表背景图右侧，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具体像素位置， 如：background-position: 20px 20px;
background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
单张图片的背景大小可以使用以下三种方法中的一种来规定：
当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:
每个值可以是length, 是 percentage, 或者 [auto] 。
示例：
为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。
CSS部分 背景图片分辨率为427*640
分别给box的background-size属性添加不同的属性值，会产生不同的效果。
1、长度 ：可以用px、em、rem等指定背景图片大小，不能为负值。
background-clip 裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。
注：background-clip只是将背景和背景色粗暴的裁剪。
该属性有四个值
border-box
背景延伸至边框外沿（但是在边框下层）。 background-origin: border-box;
background-origin 规定了指定背景图片[ background-image ] 属性的原点位置的背景相对区域.
border-box
背景图片的摆放以border区域为参考
padding-box
背景图片的摆放以padding区域为参考
content-box
背景图片的摆放以content区域为参考
样式：
先看一下background-origin属性。
先看一下background-clip属性。
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。
欢迎大家一起交流，讨论。
css3文本属性有哪些
????/*text-align:?justify;*//*默认left，可设right、center、justify、start、end*/
????/*line-height:?3;*//*设置行高：normal、数字、百分比、px、em*/
????/*text-indent:?20px;*//*设置首行缩进：像素、百分比、em*/
????/*text-decoration:line-through?overline?underline;*//*默认值none在超链接去掉默认下划线时可用到，下划线underline，上划线overline，删除线line-through，闪烁文本blink*/
????/*letter-spacing:?2em;*//*设置字符间距，默认normal，可用像素、em，可设负值*/
????
????/*word-spacing:?2em;*//*类似letter-spacing，可设负值*/
????/*text-transform:?lowercase;*//*none默认；capitalize每个单词以大写字母开头，uppercase转换为大写字母，lowercase转换为小写字母*/
????/*text-shadow:?3px?3px?3px?red,?-6px?-6px?3px?green;*//*四个参数：横向偏移、纵向偏移、模糊度、颜色，可加多个阴影用逗号隔开*/
????/*white-space:?pre;*//*设置元素中空白处理方式：默认normal；pre空白会保留，类似pre标签；nowrap文本不会换行，文本会在同一行上继续，直到遇到br标签为止；pre-wrap保留空白正常换行；pre-line合并空白正常换行*/
????/*direction:?rtl;*//*默认ltr*/
????/*unicode-bidi:?bidi-override;*//*从右向左读文字，一般配合direction使用，默认normal，可设embed*/????
????text-overflow设置是否使用一个省略标记...标示对象内文本溢出：clip默认值，当对象内文本溢出时不显示省略标记，而是将溢出部分裁掉；ellipsis当对象内文本溢出时显示省略号。此属性要和over-flow：hidden属性，white-space:nowrap配合使用。*/
????text-outline规定文本的轮廓；
????text-justify规定当text-align设置为justify时所使用的对齐方式；
????text-align-last设置如何对齐最后一行或紧挨强制换行符之前的行；
????text-emphasis向元素的文本应用重点标记以及重点标记的前景色；
????hanging-punctuation规定标点字符是否位于线框之外；
????punctuation-trim规定是否对标点字符进行修剪；
????tab-size设定一个tab在页面中的显示长度；
????text-wrap规定文本的换行规则。
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-range
2/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
CSS3有哪些好用的属性
CSS3 动画属性（animation）
CSS3 背景属性（background-size）
CSS3 边框属性（border-radius ）
CSS3 flex属性
CSS3 2D/3D 转换属性（transform）
CSS3 过渡属性（transition）
CSS3 文本阴影（text-shadow）
CSS3 盒阴影（box-shadow）
CSS3 媒体查询（@media）
CSS3 倒影（box-reflect）
CSS3 径向渐变（radial-gradient）
CSS3 线性渐变（linear-gradient）
CSS3 蒙版（mask）
CSS3 滤镜