CSS基礎知識—【結構、層疊、視覺格式化】

結構和層疊

• 選擇器的優先級順序： style[內聯元素]選擇器>Id選擇器>類選擇器 屬性選擇器>元素選擇器>通配器選擇器

• 重要性：@important 有這個標記的屬性值，優先級最高

• 層疊：按選擇器的優先順序和出現的前後順序排序；

視覺格式

• 基礎知識
  • 正常流： 指文本從左向右，從上向下顯示，即傳統的文檔佈局；
  • 塊級元素： 在正常流中會在器框以前和以後生成換行，正常流中的塊級元素會垂直襬放，經過display:block可生成塊級元素
  • 行內元素 塊級元素的後代，聲明display:inline 生成一個行內框；
• 水平格式化
  • 元素的寬度會手：margin pading影響，是width[內容寬度]+margin-left+pading_left+boder-left+border-right+pading_right+margin_right
  • auto 屬性會自動肯定所需長度，而使元素框的寬度等於父元素的width，
    • 若是三個元素都爲100px,則margin-right:auto;
    • 若是magin-left:auto;margin-right:auto 則會設置爲相等的值將此元素在父元素中居中；
    • 若是三者都設置爲auto，則外邊距會設置爲0 ，width會盡可能寬；
  • 負外邊距 做用做用用因而元素不超過父元素的寬度,若是爲負值則表示該元素的起點或終點向左延伸或向後延伸；
• 垂直格式化
  • overflow 控制內聯元素超太高度後的視覺顯示效果
  • 合併垂直外邊距，兩個塊級元素上下相鄰，則以最大的外邊距進行合併；
  • 負外邊距 兩個垂直邊距爲負值則取兩個外邊距的絕對值最大值，若是一正一負，取二者和的絕對值；
• 行內元素
  • 基本術語和概念
    • 匿名文本：全部爲包含在行內元素的字符串，例如：
      test asdf
      其中 test爲匿名文本
    • em框，字符框，其大小受字體大小控制
    • 內容區：個字符em框構成的框，也能夠是元素中字符造成的框
    • 行間距 font-size 與line-height 值之差
    • 行內框 ，內容區+行間距來描述，非替換元素行內框爲line-height,而替換元素爲其內容區的高度；
• 垂直對齊 vertical-align該屬性會上移元素；
  • top 將元素行內框的頂端與包含該元素的行框頂端對齊
  • bottom 將元素行內框的頂端與包含該元素的行框底端對齊
• 行內塊元素 inline-block 將元素的角色定位爲替換元素放在行中,能夠設置高、寬；