接触到的elements/attributes整理

CSS Properties

• font系列（大小的单位：120%，1.2em, small）

  • font-style = normal italic oblique
  • font-variant
  • font-weight = bold normal
  • font-size/line-height //单位可以为：1.1em、50%
  • font-family

• border系列

  • top bottom
  • -style
  • -color
  • -width
• padding
• margin

• backgroud系列

  • -color
  • -image
• width,height,color,text-align
• vertical-align: top; bottom
  /* 相对于所在的div,置顶还是沉底 */
• visibility: visible; hidden
  /* 是否可见 */
• box-sizing: border-box;
  /* 配合width: number ,可以使padding和border包含在width里面，省去计算px数（此属性较新） */

• 布局

  • display 默认一般是inline || block ||none
    
    display: inline
    /* 使block表现得如同inline */display: table, table-row, table-cell
    /* 表格式布局 */
    display: inline-block
    /* 行内块，一块一块flow过去 */
    display: flex
    /* container设置display,子元素设置flex:1,2||initial||none */
    /* initial和none配合width设置 */
    /* container同时再追加设置align-items: center，使子div居中布置，与text-align相似，较新 */
    display: table, table-row, table-cell
    
  • position = absolute; fixed; relative; static;
    /* static: 默认项，不会被position. */
    /* relative: 设置了relative的元素可在子元素设置top~left：px，使之在原位置基础上产生偏移. */
    /* fixed: 元素会相对于视窗来定位，即：定在一个位置上不动，即使滑动滚轮。 */
    /* absolute: 元素会相对于最近的"position != static"的父元素来定位。 */
    
  • max-width: 0px
    /* ？绝对式布局？ */
  • float: right,left (任意块元素)
    /* 浮动式，配合左右的兄弟元素应设置maring-left~right：px来防止覆盖 */
    /* 页脚设置clear:left~right防止覆盖 */
    overflow: auto;
    /* 使该元素的子元素浮动时不会溢出 */
    

Elements

• em
• table ; th ; tr

• form

  • input type = select,
  • action= ; method= ;

• html 5

  1. nav
  2. section
  3. aside
  4. header

Others(elements' attributes)

• title="comment"
  /* hover 此元素时， 弹出一个comment */

• alt="comment"

• 有默认的margin,可手动设为0px;
• width=100% 自适应div的宽度;