标准CSS技术参阅文档.docx

CSS知识点总梳理此文档为技术参阅文档，内部收录了标准CSS绝大部分较不常用但实用的知识，适合CSS惯用者翻阅 【关于background】1. 在mozilla浏览器中，background-attachment必须为fixed,才可支持background-position的百分比数值。2. 在mozilla，opera浏览器中，background-attachment需为fixed，才可支持background-position的字符值。3.在background中集成所有数值的顺序：color img repeat attachment position;【关于text】1. text-indent:px/em/%;字段缩进属性，作用于块级元素，可为负值。2. text-align:left/center/right/justify（两端对齐）;text-align与HTML元素不同，只作用于元素 的内容，不影响元素本身，元素可将标签内元素全部居中。3. word-spacing:+-px/em;设置文本的字符间隔（英文单词的间隔，只对英文有效）。4. letter-spacing:+-px/em;设置文本的字母间隔（英文单词字母的间隔，中英）。5. text-transform:uppercase(高大上的问题)/lowercase(很low的问题)/capitalize(首字母大写)/none(不做设 置);控制字符的大小写。6. text-decoration:underline（下划线）/overline（上划线）/line-through（删除线）/blink（闪 烁？）/none（无特殊格式）。7.white-space（设置浏览器如何处理字段空白） 可取值：pre;浏览器会严格注意原文档中的空格，回车，如果没有，字段将不换行。 nowrap;强制字段不换行，除非遇到。 pre-wrap;保留所有空格和回车，允许自动换行。 pre-line;保留回车但合并多余空格，允许自动换行。【关于font】1.font-family:（设置文本字体） 通用字体系列：Serif 字体（衬线） Sans-serif 字体（无衬线） Monospace 字体 Cursive 字体 Fantasy 字体 若字体名称中存在空格，可加单引号。2.font-style（规定字体风格） 取值：normal(正常) italic(斜体) oblique（斜体）3.font-variant:small-caps;字体特殊格式，产生大小不一有节奏的大写字母，仅作用于英文。4.font-weight:normal/bold;设置字体加粗，字体共有分别为100900的9级变形，100为最细的字体变形,400等 价于normal,700等价于bold。5.font属性集成声明顺序：font:font-style font-weight font-size/line-height font-family;【关于伪类：】:link 链接初始状态:visited 已访问状态:hover 选中状态:active 点击中的状态:focus 焦点状态:first-child 为第一个对象元素设置样式:long 配合元素使用，指定标点符（不可选中、焦点、复制）为链接元素添加伪类属性时需依照l,v,h,a顺序编写。【关于list】1.list-style-type:;控制列表元素的标记图形，取值范围如下： none; 无标记 disc; 实心圆，默认值 circle;空心圆 square;实心方块，正方向 decimal;数字（1.2.3.） decimal-learding-zero0开头的数字（01.02.03.） lower-roman小写罗马数字（i.ii.iv.） upper-roman大写罗马数字（I.II.IV.） lower-alpha小写英文字母（a.b.c.d.） upper-alpha大写英文字母（A.B.C.D.） lower-greek小写希腊字母（.） lower-latin小写拉丁字母（a.b.c.d.） upper-latin大写拉丁字母（A.B.C.D.） hebrew希伯来编号（异形，俄文的感觉） armenian亚美尼亚编号（异形，玛雅文？） georgian乔治亚编号（异形，亚特兰蒂斯文？） cjk-ideographic（天朝方块字：一、二、三、） hiragana（日文片假名_复古感：a.i.u.e.o.ka.ki.ku.ke.ko.） katakana（日文片假名_端正感：A.I.U.E.O.KA.KI.KU.KE.KO.） hiragana-iroha（日本片假名_简约复古感） katakana-iroha（日文片假名_硬直感）【关于table】1.table元素有默认的border，为table,tr,th,td额外设置border时会出现复线边框 border-collapse:collapse; 合并表格的border。 :separate; 表格border与盒子border分别设置以及显示 2.在border-collapse:separate;时，表格可设定:border-spacing:x,y;设置复线border的间距。 在border-collapse:separate;时，表格可设定:empty-cells:show/hide;控制表格是否显示空单 元格。3.table中的文本可使用verticel-align(垂直对齐方式):top/middle/bottom;4.,元素为表格指定标题，是的子元素，caption-side:top/bottom;(指定表格标题相对于表格的位置，底部或者顶端)。5.table-layout:automatic(自动)/fixed(固定);控制表格宽度是否受到内容宽度的影响。【关于outline元素轮廓线（border之外）】1.outline-color:;轮廓线颜色。2.outline-style:;轮廓线样式，与border-style相同。 可取值:dashed; dotted; solid; double; ridge; groove; inset; outset;3.outline-width:thin(细线)/medium(中等,默认值)/thick(粗线)/px;4.outline:outline-color outline-style outline-width;集成所有属性的书写顺序。【关于元素框模型】1.* .; _*为通用选择器，可为所有元素设置默认样式，用于覆盖浏览器默认设置。2.IE5.x和IE6将width/height的值视为盒子总尺寸，兼容性方案:元素嵌套+position:;3.当数个position:relative;的块级元素纵向排列时，这些元素的margin-bottom和下一个元素的margin-top将合并，合并的结果为保留两margin中数值较大的一个。4.当position:relative;的块级元素嵌套，且父元素无padding时，子元素的margin-top/bottom将被忽略，若父 元素有padding，子元素的margin-top/bottom将与父元素的padding-top/bottom相加，若将子元素的position 改为absolute，子元素的margin-top/bottom将有效并且忽略父元素的padding-top/bottom。【特别注意：以上特性将导致元素排列方面的疑惑】【关于position】1.position:static;静态定位，默认值。当元素position:static时，将忽略top,left等定位属性2.clip:rect(top,right,bottom,left),设置元素的可见尺寸，四个数值表示的不是坐标而是剪切线（与area不 同），前切线位置以元素上、左边缘为基准，clip:rect(0,300px,300px,0)表示元素的裁剪结果为：可见区域 上边缘距元素上边缘0px，右边缘距元素左边缘300px，下边缘距元素上边缘300px，左边缘距元素左边缘300px 总尺寸：300px*300px3.position:absolute;将使元素的display默认为block;4.float会使元素脱离文档流。【关于CSS选择器】【选择器通配符*,可与多种CSS选择形式混合组合使用（除了class与ID）】1.多类选择器:为同时具有多个class值的元素指定特别样式。 示例: css:.a.b. html: 此时：类a b等同于生成了一个新类，此类将继承b的属性（文档流优先级更高），并可指定新的样式规则。 此用法可降低重复代码的书写量，使用场景：两个基本相同的元素:a,b使用多类选择器.a.b继承a的样式并追 加修改。 【注意】多类选择器不兼容IE7以下浏览器。2.ID对大小写敏感。3.CSS属性选择器:可根据元素的是否具有某一属性或者根据元素某一属性的特定值来为元素设置样式: 写法： 根据属性:ahref.;将为文档中具有href属性的a元素制订样式。 根据属性值:divname=.;将为文档中name=的元素指定样式。 可组合使用:ptitle=name=.;将为文档中title=&name=的元 素指定样式。 可进行模糊查找:navclass=.;可为文档中class值包含的所有元素指定样式4.CSS选择器中的模糊匹配技术： 代码格式：元素属性=abc.;为文档中某属性值以abc开头的所有元素指定样式。 元素属性$=abc.;为文档中某属性值以abc结尾的所有元素指定样式。 元素属性*=abc.;为文档中某属性值包含abc的所有元素指定样式。 元素属性|=abc.;为文档中某属性值等于abc或者以abc开头的所有元素指定样式。 注意：模糊匹配时CSS的属性值设定对书写顺序敏感。CSS属性选择器代码格式列表（截图自W3C）5. 子元素选择器与后代选择器的不同在于：后代选择器可以跨N级匹配元素，而子元素择器 只能匹配元素的下一级子元素，写作：divp.;6. 相邻兄弟元素选择器： 相邻兄弟元素选择器可匹配同一父元素下的同级元素，但不会影响第一个元素。 CSS写作：div+p.;这种写法会对与div同级的p元素产生影响。可用于在多个同类元素 中有选择的设置样式。【关于伪元素】1. :first-line.; 为元素内文本的第一行设置样式，仅作用于块级元素。2. :first-letter.;为元素内文本的首字设置样式。3. :beforecontent:(.;)在元素前面添加内容。4. :aftercontent:(.;) 在元素的后面添加内容。【关于元素对齐】1. 在IE5中，块级元素有时会被解释为行内元素，故需在父元素中text-align:center;以使元素居中（也就是说:margin:0 auto;并不总是可靠，建议弃用）。2.在使用position、float时，勿忽略!doctype，否则将导致IE中的某些兼容问题。3. 元素尺寸上限与下限：max-width:;max-height:;min-width:;min-height:;4. visibility:hidden/visible;控制元素是否可见。5.兼容IE早期版本的实现元素透明效果的代