css-2.1 training

Posted on   |   In

css element basic types

  1. Replaced and nonreplaced
  2. Inline and block-level
  3. Replaced element: img/object/input，占位元素，在文档中起占位符作用，内容由元素本身决定(img)，或者元素类型可以替换（如input)。
  4. Nonreplaced element: 非占位元素，其内容由浏览器渲染得到，并且内容包含于文档中。

block-level element

  1. Normal flow: The left-to-right，top-to-bottom rendering of text.
  2. Root element: html
  3. Block element seven properties (three width properties can be set auto)
  4. background是指content，padding and border区域的背景
  5. Margins永远是透明的(transparent)

box model

  1. IE Box Model Issues
  2. width in IE: border + padding + width
  3. CSS box model hack

inline element

  1. Content area：nonreplaced element(font-size) and Replaced element(vertical seven properties)
  2. Leading (行间空白): line-height 减 font-size
  3. (注意：行间空白只对nonreplaced元素起作用)
  4. Inline box: line-height(nonreplaced) and content area(replaced)
  5. Line box: 当前行中最高的inline box的顶到最低的inline box的底组成的box
  6. line-height，vertical-align and font-size这三个属性会影响当前行的高度
  7. inline nonreplaced element border: 由font-size控制其边框，而不是line-height，边框会环绕在content area上
  8. inline replaced elements能增高line box，但是不会使line-height加高
  9. 为inline replaced element添加padding/border/margin可以增高inline-box
  10. inline nonreplaced element的padding，borders，margin不会影响line-height，并且margin-top/margin-bottom设置了是不会生效的,但margin-left /margin-right会生效
  11. display: list-item
  12. 除inline和block-level元素外，还有一个特殊的元素li，display: list-item
  13. list-item: li此属性的默认值，该值使一个元素生成一个原始块框(principal box)和一个列表框(block box)

about margins

  1. margin is always transparent
  2. navigate value margin for css effects
  3. collapsing margins (边距重合)
  4. horizontal margins never collapse
  5. Vertical margins may collapse between certain boxes
  6. 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距
  7. 在一个浮动框和其它框之间的垂直边距不重合
  8. 绝对和相对定位的框的边距不重合

positioning

  1. static: 默认值。无特殊定位
  2. relative: 依据left，right，top，bottom等属性在正常文档流中偏移位置，占据原来的正常文档流中的空间位置
  3. absolute: 将元素从文档流中拖出，使用left，right，top，bottom 等属性相对于其最接近的一个具有定位设置的父元素 (position非static元素)进行绝对定位。如果不存在这样的父元素，则依据 body元素
  4. fixed: 与absolute一样从正常文档流中拖出，区别在于其定位的容器是屏幕窗口(viewpoint)
  5. top，right，bottom，left只能针对position非static元素设置
  6. containing block：为绝对定位的元素提供定位容器的，位置属性非static的元素

floats and clear

  1. float: 当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略
  2. clear在布局中与float同时使用的情况较多
  3. 关于clear还需要注意：css属性只影响规则匹配的元素自己，所以clear规则只能影响使用清除浮动的元素本身，不能影响其他元素的float或者clear

css specificity value

  1. specificity值表示方法: 0,0,0,0
  2. id:0,1,0,0
  3. class:0,0,1,0
  4. element:0,0,0,1
  5. h1 {color: red;} / specificity = 0,0,0,1 /
  6. p em {color: purple;} / specificity = 0,0,0,2 /
  7. .grape {color: purple;} / specificity = 0,0,1,0 /
  8. *.bright {color: yellow;} / specificity = 0,0,1,0 /
  9. p.bright em.dark {color: maroon;} / specificity = 0,0,2,2 /
  10. #id216 {color: blue;} / specificity = 0,1,0,0 /
  11. div#sidebar [href] {color: silver;} / specificity = 0,1,1,1 */

selectors

  1. * { sRules } 通配选择符
  2. *.div { text-decoration:none;
  3. E { sRules } 类型选择符
  4. a { text-decoration:none; }
  5. E1 E2 { sRules } 包含选择符 Descendant Selectors
  6. table td { font-size:14px; }
  7. E1 > E2 { sRules } 子对象选择符 Selecting Children (IE6 not support)
  8. div ul>li { font-size:14px; }
  9. #ID { sRules } ID选择符
  10. E.className { sRules } 类选择符
  11. E1 + E2 {sRules} 相邻节点选择符 Selecting Adjacent Sibling Elements
  12. h1 + p {margin-top: 0;}
  13. E1 , E2 , E3 { sRules } 分组选择符 grouping selectors
  14. 将同样的定义应用于多个选择符
  15. E : Pseudo-Classes { sRules }
  16. div:first-letter { font-size:14px; }
  17. a.fly :hover { font-size:14px; color:red; }

属性选择符

  1. E [ attr ] { sRules }
  2. E [ attr = value ] { sRules }
  3. E [ attr ~= value ] { sRules } / example: class partial value /
  4. E [ attr = value ] { sRules } / substring */
  5. E [ attr ^= value ] { sRules } / substring start /
  6. E [ attr $= value ] { sRules } / substring end /
  7. E [ attr |= value ] { sRules } / explode by - /
  8. a[href][title] {font-weight: bold;} / multiply attributes /
  9. *[lang|="en"] {color: white;} / en or begin with en- /

about css classes

  1. 如果某个元素具有特殊意义，在文档中只出现一次，则可使用id，同时也有利于js操作此节点。如果有不同的元素都可能用到相同的一个css效果，如div/p/a/span等，则可使用class
  2. 一个元素的class的值可以是以空格间隔的一系列class名，如：
<p class="urgent warning">这个P元素有二个css class</p>

css

POSITION IS EVERYTHING

References

  1. Selectors
  2. Box model
  3. Visual formatting model
  4. Visual formatting model details