HTML
- href中的相对url，用../表示向上（父元素）
CSS
- style中或.css文件中可以使用@import url(__.css); 来加载一个外部样式表，和类似。
/* 必须放在文档的最上端 ，元素的inline-style(<p style="color:grey;">)中无法使用 */ - style中可将内容都包含在注释中，内容仍然能作为css被识别，好处是当旧浏览器不能识别<style>时，ｃｓｓ内容不会出现在网页中。
- 通配选择器：*｛color: grea;｝对所有元素生效
- class和id区分大小写，即Name和name不同
- div>p{}
/* 作为div子元素的p, 孙元素不匹配 */ - 属性选择器 p[backgroud]{border:1px;}
/* 有background属性的p元素；格式：元素名[拥有的属性名];如果有两个[][],则为交集, */p[class = "x"]{border:1px;}
/* 元素的class 值必须与之完全相等（class="x y"不行） */p[class ~= "x"]{border:1px;}
/* 元素的class 值含有x即可匹配;加了~ */[class ^= "x"], [class $= "x"], [class *= "x"]； [class |= "x"]
/* 以x开头/结尾、含有x(这个字符); "x"&"x-whatever" */ - 相邻兄弟结合符：+;
h1 + p
/* 紧接在h1后的p,它们有共同的父元素 */ - 伪类：用冒号表示;
a:visited{}
/* a:link{}未访问的链接 *//* 在body元素中写入link="red" vlink="yellow"可达同样效果 */ - 动态伪类： :focus :hover :active
h1 + p
/* 紧接在h1后的p,它们有共同的父元素 */ - p:first-child
在父元素中，作为子元素的第一个p
/* */伪元素(都必须写在选择器的最后)
- :first-letter{; :first-line
p:before{content:"haha"}
/* 在p元素前插入content,after同理 */
- 在冲突的声明中，最高特殊性的声明胜出。
- ID:0,1,0,0
/* #id */ - 类，属性选择，伪类:0,0,1,0
/* .class [class=" "] :before */ - 元素:0,0,0,1
/* p */ - 通配选择器 0,0,0,0br>/* * 无贡献 */
- 0,0,0,0中 第一位的0是为内联样式中style="-:-;"保留的
/* */
- ID:0,1,0,0
- 在声明后加上!important
/* 在分号前面，font: small Times serif !important; */
/* 重要声明总是比其他优先；重要声明没有特殊性值，它们与非重要声明分开考虑 */
- 声明会继承给后代元素，部分不能继承，比如border
/* 继承的声明没有特殊性，连0,0,0,0(通配*{})都不如 */
- 声明会继承给后代元素，部分不能继承，比如border
/* 继承的声明没有特殊性，连0,0,0,0(通配*{})都不如 */
- 颜色表示：rgb(100%,100%,100%) rgb(255,0,0) #FFF #00ff00
/* Web安全色，20%和51的倍数,十六进制：33的倍数 */
- 绝对长度单位：in cm mm pt pc
- 相对长度单位：em ex px
/* 1em=1字高（可变，动态）；ex是x的高度 */ - css中，相对url是相对于css文件本身，不是html
/* 1em=1字高（可变，动态）；ex是x的高度 */ - 关键字none； text-decoration: none;
/* 字面意思 */ - 关键字inherit； color: inherit;
/* 使用父元素的声明，可用于针对a元素 */ - font-family:serif, Times, Chicago, 'New century', 'Karrank%';
/* 用逗号分隔, 若字体名中有空格或#$，要用引号; 通用系列不能加引号(例如serif,monospace) */
- font-weight: bolder | lighter font-size: smaller | larger
/* 对应于继承父元素的weight/size,更粗一级 */
/* font-size意为没有额外行间距时字体基线/下划线的距离 */
- font-size: xx-small | medium | larger 40% 15px 2cm
/* 百分数是针对从父元素继承的大小 */
- font-style: italic和oblique基本一样
- font-varient: small-caps
/* 大写还是大写，小写变成小大写 */
- font: size/line-heigt和family以此顺序放在最后
/* font中必须有size family这两个值 否则无效 */
/* 顺序：[style variant weight(可变)] size/line-hight family 否则无效！ */
- 系统字体： font: caption | icon | menu | message-box | status-bar | small-caption
/* 使用操作系统的字体： */
text属性
- text-align: left right justify
/* justify: 调整字间距，使每行左右端对齐 */ - 子元素会继承父元素的line-height(显式声明1em),当子元素的font-size过小时，易发生上下行相撞
/* 父元素{inline-height:1;}即可（取代1em） */ - vertical-align只应用于行内元素、替换元素
/* 不影响block */
/* 取值super sub 基线上移/下移，成为上标下标（平方之类的） */
/* text-top text-bottom 针对行内文本 top middle bottom ; baseline同父元素基线对齐 */
/* middle一般用于图像，将元素的中点和父元素的基线往上0.5ex处对齐 */
/* 百分数50%，使此元素的基线相对于父元素基线上升50%（此元素的line-height） */
/* 5px 同理 上升5px */
/* 垂直对齐的部分不会和别行重叠，它会使文本行变高 */
- word-spacing 字间的间隔（空白字符，如空格）
letter-spacing 字母间的间隔（受text-align:justify的影响）
/* */ - text-transform:
/* uppercase capitalize none, capitalize对每个单词的首字母大写 */ - text-decoration: [underline | overline | line-through |blink]
/* a元素默认有underline，可手动设置为none */
/* 该属性不能继承 */
- white-space: nowrap | pre | pre-wrap | pre-line
/* 对空白符的处理方式，pre不合并空格，原样显示 */
/* nowrap 除非有br 否则绝对不换行（哪怕超出浏览器右边） */
/* pre-wrap像原文本那样换行,保留tab,不合并空格 */
/* pre-line像原文本那样换行,不保留tab,合并空格 */
- direction:ltr | rtl
/* 默认ltr 文本从左向右，rtl相反 */
视觉格式化
- 水平属性只有with和margin可以auto
/* 当其中两个固定数值时，另一个变为auto;三个都固定数值称为过分受限；默认三者都auto */
- img的height会随width等比变化
/* 反之同理 */
- 当block元素height为auto，且没有border和padding时,子block元素的margin会完全在父元素的外面
/* 如果父元素有了border和Padding,则会把子元素的margin都包进来 */
- 垂直相邻的block元素的同正负margin将合并为绝对值大的那个
/* */
- 对于非替换inline元素，padding、margin没有垂直效果
/* 不影响行内框高度，替换元素相反 */
- inline元素的background作用于内容区(font-size)和内边距
/* 不是line-height */
- inline元素的background、border作用于内容区(font-size)和内边距
/* 不是line-height */
- font-size比line-height大，导致内容区溢出行内框，可能会侵入别行
- 替换元素的margin、padding和border会并入行内框
- display只影响元素如何显示，而不影响它是何种元素
- inline-block相当于替换元素，若无指定width，会自动适应最宽那个子元素的宽度
/* 先用width计算出高度，将高度应用于此行的基线定位，再根据height确定底部border的位置 */ - display: run-in(chorum不支持)使该元素生成块元素框挤进下一个块元素的开头
/* 如果该元素和下一个元素不是block，该元素生成block框 */ - margin顺序：top right bottom left 顺时针
/* margin和padding的百分数相对于父元素的width计算 */ - border-style: hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
/* 单边 border-top-style 默认none */
/* border-top -bottom */
- border的默认颜色为color
- border-width: thin | medium(default) | thick
/* */ - 没有border-style就没有border(完全没有)
/* border-right-color */ - border-color:transparent
/* 透明，相当于内边距 */ - background-color 默认为transparent
/* */ - background-image: url()
/* inline元素也可使用; 如果要image的透明部分透出background-color，b-image要声明在b-color之后，否则被b-color覆盖 */ - background-repeat: repeat-x | repeat-y | no-repeat
/* 背景image横\竖向阵列，起点为b-position */ - background-position: left | center | top |
/* 成对出现，一个表示水平向，一个垂直向，example: top right | bottom center | 50% 50% */
/* 如果只有一个值，另一个默认为center */
/* 50% 50%将同时作用于b-img和该元素，即b-img的50% 50%的点和该元素的50% 50%的点对齐 */
/* 10px 10px指的是img左上角相对于元素左上角的偏移 */
/* padding参与b-position定位;可尝试关键字、百分号、像素配合使用 */
- background-position可配合min-width | max-height来限制最大/最小的宽度/高度
/* */ - background-attachment: scroll | fixed
/* fixed:b-img位置变为直接由可视区定位，且不随文档滚动; scroll默认值*/ - background中的值可采用任何顺序
/* b-position 的两个值必须一起按顺序出现 */
/* 注意：background中未填写的默认值将覆盖之前声明的backgroud-系列声明 */
- float元素的Margin会影响到周遭文本的退距
/* 用clear来针对之：left right both */ - position: relative | absolute | fixed | static
/* */ - overflow: visible | hidden | scroll
/* 溢出元素框的内容 可见|隐藏|滚动条 */ - clip: rect(top,right,bottom,left)
/* 圈出一个矩形框，框外裁剪，括号中是距离左上角的距离，不允许有百分数，auto即原边界 */ - visibility: visible | hidden | collapse
/* collapse在表中使用 */ - position: absolute
/* 从文档流中完全删除，（根据top等属性）相对于包含块定位，这里“包含块”指的是最近的position不为static的祖先元素，一半将想要指定为包含块的元素position设置为relative且没有偏移 *//* 定位后生成一个block框 */
/* 当top、left、right设置为auto时，对应的边界为原本元素在流中的边界，bottom不是 */
/* 当left margin width right 都是具体长度过度受限时，忽略right/bottom的值，重新计算，使之满足left+margin+border+width+right=包含块width(若其余某个属性是auto,则重新计算该属性来满足等式) */
/* 当heigt为auto时，等于固有高度 */
/* 当bottom为auto,将margin-top/bottom的auto替换为0 */
- z-index: 整数 从前向后，越来越接近用户，高的覆盖低的
/* */
1745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
