|
|
CSS position 属性定义和用法position 属性规定元素的定位类型。 说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 | 默认值： | static |
|---|
| 继承性： | no |
|---|
| 版本： | CSS2 |
|---|
| JavaScript 语法： | object.style.position="absolute" |
|---|
可能的值| 值 | 描述 |
|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | | fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | | relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 | | static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 | | inherit | 规定应该从父元素继承 position 属性的值。 |
|
|
|
|
|
|
CSS text-decoration 属性定义和用法text-decoration 属性规定添加到文本的修饰。 注释：修饰的颜色由 "color" 属性设置。 说明这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。 | 默认值： | none |
|---|
| 继承性： | no |
|---|
| 版本： | CSS1 |
|---|
| JavaScript 语法： | object.style.textDecoration="overline" |
|---|
可能的值| 值 | 描述 |
|---|
| none | 默认。定义标准的文本。 | | underline | 定义文本下的一条线。 | | overline | 定义文本上的一条线。 | | line-through | 定义穿过文本下的一条线。 | | blink | 定义闪烁的文本。 | | inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
|
|
|
|
|
|
CSS vertical-align 属性定义和用法vertical-align 属性设置元素的垂直对齐方式。 说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 | 默认值： | baseline |
|---|
| 继承性： | no |
|---|
| 版本： | CSS1 |
|---|
| JavaScript 语法： | object.style.verticalAlign="bottom" |
|---|
可能的值| 值 | 描述 |
|---|
| baseline | 默认。元素放置在父元素的基线上。 | | sub | 垂直对齐文本的下标。 | | super | 垂直对齐文本的上标 | | top | 把元素的顶端与行中最高元素的顶端对齐 | | text-top | 把元素的顶端与父元素字体的顶端对齐 | | middle | 把此元素放置在父元素的中部。 | | bottom | 把元素的顶端与行中最低的元素的顶端对齐。 | | text-bottom | 把元素的底端与父元素字体的底端对齐。 | | length |
| | % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 | | inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
|
|
|
|
|
|
CSS display 属性定义和用法display 属性规定元素应该生成的框的类型。 说明这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。 | 默认值： | inline |
|---|
| 继承性： | no |
|---|
| 版本： | CSS1 |
|---|
| JavaScript 语法： | object.style.display="inline" |
|---|
可能的值| 值 | 描述 |
|---|
| none | 此元素不会被显示。 | | block | 此元素将显示为块级元素，此元素前后会带有换行符。 | | inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | | inline-block | 行内块元素。（CSS2.1 新增的值） | | list-item | 此元素会作为列表显示。 | | run-in | 此元素会根据上下文作为块级元素或内联元素显示。 | | compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | | marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | | table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 | | inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 | | table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 | | table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 | | table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 | | table-row | 此元素会作为一个表格行显示（类似 <tr>）。 | | table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 | | table-column | 此元素会作为一个单元格列显示（类似 <col>） | | table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） | | table-caption | 此元素会作为一个表格标题显示（类似 <caption>） | | inherit | 规定应该从父元素继承 display 属性的值。 |
|
|
|
|
|
|
CSS3 box-sizing 属性就是规定边框是否算在总宽度和高度以内
定义和用法box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 | 默认值： | content-box |
|---|
| 继承性： | no |
|---|
| 版本： | CSS3 |
|---|
| JavaScript 语法： | object.style.boxSizing="border-box" |
|---|
语法box-sizing: content-box|border-box|inherit; | 值 | 描述 |
|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 | | border-box | 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 | | inherit | 规定应从父元素继承 box-sizing 属性的值。 |
|
|
|
|
|
|
CSS3 background-size 属性实例规定背景图像的尺寸： div
{
background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;
}定义和用法background-size 属性规定背景图像的尺寸。 | 默认值： | auto |
|---|
| 继承性： | no |
|---|
| 版本： | CSS3 |
|---|
| JavaScript 语法： | object.style.backgroundSize="60px 80px" |
|---|
语法background-size: length|percentage|cover|contain; | 值 | 描述 | 测试 |
|---|
| length | 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| | percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| | cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| | contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
|
|
|
|
|
|
|
CSS3 text-overflow 属性定义和用法text-overflow 属性规定当文本溢出包含元素时发生的事情。 | 默认值： | clip |
|---|
| 继承性： | no |
|---|
| 版本： | CSS3 |
|---|
| JavaScript 语法： | object.style.textOverflow="ellipsis" |
|---|
语法text-overflow: clip|ellipsis|string; | 值 | 描述 | 测试 |
|---|
| clip | 修剪文本。 |
| | ellipsis | 显示省略符号来代表被修剪的文本。 |
| | string | 使用给定的字符串来代表被修剪的文本。 |
|
|
|
|
|
|
|
|
|
|
|
|
CSS white-space 属性规定段落中的文本不进行换行：
|
|
|
|
|
|
px、em、rem区别介绍PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EMem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 所以我们在写CSS的时候，需要注意两点： 1. body选择器中声明Font-size=62.5%； 2. 将你的原来的px数值除以10，然后换上em作为单位； 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 REMrem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子： p {font-size:14px; font-size:.875rem;}注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
px 与 rem 的选择？对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
|
|
|
|
