CSS属性列表

以下为最近总结的CSS属性列表，这里做下笔记

 CSS属性组目录列表：

 1 .  动画；2 .  背景；3 .  边框和轮廓；4 . Box盒子属性；5 . 可伸缩框；6 . 字体；7 . 表格属性；

 8 . 文本属性；9 . 2D/3D 转换属性transform； 10 . 过渡属性transition；

11 . 用户界面属性（User-interface）；

下面具体介绍下各个属性

 （1 . 动画）

【简介】

   动画是使元素从一种样式逐渐变化为另一种样式的效果，并且可以改变任意多的样式任意多的次数

   一般使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

   0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器

【兼容】

   IE10、Firefox 以及 Opera 均支持动画属性，而Chrome 和 Safari 需要前缀 -webkit-

 【主要内容】

  1. CSS3的@keyframes 规则； 2. animation 属性及它所配置的6个动画属性

      ①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；

      ④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向

【详解】

（2 . CSS背景属性）

 ①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动；

  常见用法：设置固定的背景图像，使图像不会随着页面的其他部分滚动

 ②background-clip背景修剪------规定背景的绘制区域；

 ③background-origin背景来源------规定 background-position 属性相对于什么位置来定位；

  属性值：与背景修剪属性值相同，border-box边界框；padding-box填充盒；content-box内容盒

 ④background-size背景尺寸------规定背景图像的尺寸；

（3 . 边框和轮廓）

 ①outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

 【兼容】IE8及其他主流浏览器均支持

  注意：轮廓线不会占据空间，也不一定是矩形，outline 简写属性在一个声明中设置所有的轮廓属性

  可以按顺序设置如下属性：outline-color，outline-style，outline-width

<style type="text/css">
p {
  border:1px solid red;
  outline:6px dotted #00ff00;
}
</style>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 
才支持 outline 属性。</p>

 【拓展：轮廓偏移outline-offset 】

   outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

  兼容：除了IE外，其他主流浏览器均兼容

  案例：在边框边缘之外 15 像素处的绘制轮廓

div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

②圆角属性

 border-top-left-radius------定义边框左上角的圆角；border-top-right-radius------定义边框右上角的圆角；

 border-bottom-left-radius------定义边框左下角圆角；border-bottom-right-radius------定义边框右下角圆角

 ③阴影属性

 box-shadow------向方框添加一个或多个阴影

 语法：box-shadow: h-shadow v-shadow blur spread color inset;

 【兼容】IE9+及其他主流浏览器均支持

 【IE兼容方案】①引入.htc文件；②使用IE的Shadow滤镜。

 注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0

 （4 . Box盒子属性）

 ①overflow-x  水平滚动；

 ②overflow-y  垂直滚动；

 ③overflow-style  规定溢出元素的首选滚动方法（目前无浏览器支持）；

 ④rotation  围绕由rotation-point属性定义的点对元素进行旋转（目前无浏览器支持）；

 ⑤rotation-point  定义距离上左边框边缘的偏移点（目前无浏览器支持）；

 （5 . 可伸缩框Flexible Box）

 ①box-align  规定如何对齐框的子元素

 （6 . 字体属性）

 ①font-size-adjust -------为元素规定 aspect 值，为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height

     字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读

     举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读

 ②font-weight--------设置显示元素的文本中所用的字体加粗

      数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗

      属性值：normal---默认值，定义标准的字符；bold---定义粗体字符；bolder---定义更粗的字符；lighter---定义更细的字符；100--900定义由粗到细的字符

 （7 . 表格属性）

 目录：

 ①border-collapse合并边框；②border-spacing边框间距；③caption-side标题端；④empty-cells空白单元格

 ⑤table-layout表格布局；

  以下为详解：

 ①border-collapse属性设置表格的边框是否被合并为一个单一的边框；

 属性值：

 separate（分离）默认值，边框会被分开。且不会忽略 border-spacing 和 empty-cells 属性

 collapse（塌方）边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性

 ②border-spacing设置相邻单元格的边框间距离（仅用于“边框分离”模式）；

 属性值：在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔

  除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承

 ③caption-side规定表格标题的位置；

<style type="text/css">
caption{
    caption-side:bottom
}
</style>
<table border="1">
<caption>这是一个标题</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

 ④empty-cells 规定是否显示表格中的空单元格上的边框和背景（仅用于“分离边框”模式）

  属性值：

  hide---不在空单元格周围绘制边框；show---默认值，在空单元格周围绘制边框

 ⑤table-layout 设置用于表格的布局算法（固定表格布局，自动表格布局）

 属性值：automatic默认，列宽度由单元格内容设定；fixed列宽由表格宽度和列宽度设定。

 固定表格布局：

 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关

 自动表格布局：

 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容