關於css進階的一些筆記

css進階文檔來源

做者：閒人王昱珩 連接：juejin.im/post/5d0210…

前言

在總體讀解完做者的22篇關於css進階的文檔,我的以爲大有裨益. 做者對於一些css的概括確實填補了許多我的以前不曾涉及的問題點,受益良多. 在此記錄下關於我的的一些筆記.

筆記

• height

  • 1.若是包含塊(即父類塊級元素)的高度沒有具體指定,而且該元素不是絕對定位,則計算爲auto,

    • 因此當設置子元素height:100%時,若是父類沒有具體制定height ,那麼子元素的高爲100%* auto = NAN , 這應該是有時候設置子元素百分百不起做用的緣由.
    • 非絕對定位元素,儘可能用height:100%不斷給父級添加具體值.

  • 2.height:100% 在絕對定位元素和非絕對定位元素表現不一樣.

    • 非絕對定位元素: height:100%, 指的是content-height * 100% [內容盒子高度]
    • 而絕對定位元素的百分百, 是基於 (content + padding)-height * 100% [內容盒子加內邊距盒子]

• min-with/height 與max-width/height 的區別

  • min-width/height 的初始值是auto, 而max-width/height的初始值是none
  • 權重 min > max > !important
  • 使用max-height實現展開效果:
    • 經過改變max-height讓其從很小的值過渡到比內容大的值便可.

• padding

  • padding會影響內聯元素的垂直方向的尺寸, 因此利用padding屬性可增長內聯元素可點擊範圍
  • padding的百分比值是相對於父容器的寬度進行計算的
  • 對於內聯元素而言,padding會自動斷行,padding 區域會隨內容一塊兒換行.

• margin:auto 居中

  • 前提條件:width或height爲auto.

• 常見的可生成BFC(塊級格式化上下文)的屬性:

  • 1.float不爲none的元素
  • 2.overflow的值爲auto,scroll,或hidden
  • 3.display的值爲inline-block, table-cell或table-caption
  • 4.position的值不爲relative和static
    • 擁有BFC屬性的元素不會產生margin疊壓
    • 擁有BFC屬性的元素會造成相似結界的封閉內部空間,該元素內部元素及該元素自己不會影響外部元素的表現
    • 利用BFC與浮動元素不重疊的特性,能夠完成左右分離佈局

• 滾動條:

  • HTML中有兩個標籤是默承認以出現滾動條的: 根元素HTML和文本元素textarea,只有這兩個標籤的默認overflow是auto屬性,其餘都是visible.
  • 在pc端,滾動條出現會佔寬17px左右.

• css錨點定位: 只要overflow不爲visible的元素均可以進行錨點定位.

  • 1.經過a標籤進行錨點定位: <a href="#1"></a> <div id="1"></div>
    • 經過css選擇器實現錨點定向,缺陷在於每次定向會發生窗口重定向, 也就是頁面滾動.
  • 2.用label標籤觸發input的focus, 優勢在於沒有頁面滾動

<div class="list"> <input id="one">1</div>
     <lable class="click" for="one">1</lable>
     ==>input設爲height:100%, width:1px, 撐滿容器
     for用於指定觸發哪一個元素事假
複製代碼

• 絕對定位 absolute

  • 對於絕對定位元素而言: height:100%多是基於祖先元素定位的,而height:inherit則單純集成父元素的高度
  • position:absolute和voerflow:hidden是以padding-box爲邊界的,這由實際開發場景所決定的
  • 由於對於留白或固定圖標,通常習慣性使用padding
  • 具備相對特性的無依賴absolute絕對定位
    • 若是不設置方向值:left/right/top/bottom .絕對定位元素會呆在當前所在Dom流後面,但父元素再也不包含該元素的高度
    • 應用場景: 左右上角圖標,登錄提示信息,
  • absolute流體特性:當絕對定位元素被設置對立方向值時,該元素會自動鋪滿對立方向容器.
    • left/right 或者 top/bottom 爲對立方向,
  • 若是無對立方向值,name該元素只有包裹性.
  • 水平垂直居中:
    • 利用absolute流體特性:四方向設爲0, margin : auto
    • 利用absolute配合transform ,子元素可用空間會減半,不推薦使用

• text-align 和absolute沒有相關性

<div style="text-align:center">
      <span  style="position:absolute">hello</span>
      </div>
      此時會看到absolute元素靠右,這是由於span內
      聯元素空白節點被text-align 影響居中,
      而無依賴決定定位因爲特性會排在後面.
複製代碼

• overflow與absolute

  • 若是overflow不是定位元素,同時絕對定位元素和overflow容器之間也沒有定位元素,則overflow沒法對absolute進行裁剪
  • overflow:auto與scroll屬性遇到絕對定位時,會無視,不出現滾動條

• absolute和clip[裁剪, 必須是絕對定位元素或固定定位元素]

  • clip:rect(top right bottom left) / rect(top, right, bottom, left) 裁切是從元素自己"左上角"開始

• 最佳可訪問隱藏:

  .clip{
         position: absolute;
         clip:rect(0,0,0,0)
     }
  複製代碼

• fixed固定定位:可利用固定定位水平垂直居中鋪滿,將出現滾定條的元素設置爲fixed元素同級,這樣就能夠遮罩滾動條

• 層疊上下文與層疊水平

  • 層疊上下文

    • 層疊上下文中,子元素層級是基於父元素層級的, 也就是說父元素比其餘元素層級低,那麼子元素永遠比其餘元素層級低, 子元素所設置的層級是在當前父元素這個空間中的層級高低起做用.

  • 層疊水平:兩條準則

    • 1.誰大誰上: 當具備明顯的層疊水平標識時,如生效的z-index,在同一層疊上下文空間中, 值大的覆蓋值小的.
    • 2.後來居上: 當元素層疊水平一致時, 在DOM流中處於後面的元素會覆蓋前面的元素.
    • inline > float > block > background
    • Z-INDEX:正值 > 0 約等於 z-index:auto > z-index: 負值

• css中的文本處理:

  • line-height:數值的計算值是font-size * 數值
  • vertical-align: 百分比的計算值是line-height * 百分比
  • 文字與圖片中線對齊: 使用vertical-align使圖片基線與文字中心線對齊,而後使用transform偏移圖片實現對齊.
  • ex是字符X的高度, font-size的值越大, ex值越大
  • em是一個字模的高度,也能夠看作一箇中文字的寬度
    • [舉例]font-size: 16px, 若是div爲160px, 恰好放下10個漢字,這裏的160px=10em = 10個漢字
  • font-size的偏門屬性: [瞭解便可]
    • 相對尺寸: larger:大一點, smaller: 小一點
    • 絕對尺寸: 很是大,很大,大,中,小,很小,很是小,

• @font-face : 用於引入字體庫或字體圖標

@font-face{
      font-family: '本身定使用時的名字';
      src: url(路徑) format(文件格式)
  }
  src: 引入字體資源   format:判斷解析格式   eot, ttf, woff2, woff
複製代碼

• text-indent負值的妙用

  • 首行縮進對齊 text-indent: -3em 縮進三個單位

• letter-spacing 字符間距 與 word-spacing單詞間距

  • letter-spacing 設爲負值,而後c3動畫變爲正值,可實現文字飛入效果.

• white-space: 空格與換行符的管理員

  • normal: 默認, 若是有連續空格或回車,視爲單個空格
  • pre:空格符不合並, 而且內容只在有換行符的地方換行
  • nowrap: 合併空白符, 但不容許文本環繞
  • pre-wrap: 空白符不合並
  • pre-line: 空白符合並

• text-align :justify: 兩端對齊效果

  • 對中文文字會使用letter-spacing間隔算法
  • 對英文會使用word-spacing間隔算法
  • 而在IE只有word-spacing.需做兼容 text-justify:inter-ideograph

• display與元素的顯示隱藏

  • 當一個元素被設置爲display:none後,該元素沒法被點擊,同時佔用空間消失,

  <input id="hide" type="submit" style="display:none">
  <lable for="hide" > 點擊 < /lable>
  此時雖然input隱藏沒法被點擊,可是能夠經過lable觸發點擊事件
  複製代碼

• visibility與display隱藏的區別

  • 1.前者佔空間, 後者不佔
  • 2.前者子元素隱藏是由於繼承了父元素隱藏屬性,修改子元素visibility:visible可顯示子元素, 後者不能.
  • 3.前者支持transition動畫(淡入淡出)

• outline: 實現中間鏤空透明,四周蒙層的遮罩效果(頭像選擇裁剪框)

.father{
      overflow:hidden
  }
  .son{
      width:80px;
      height: 80px;
      outline: 9999px solid rgba(0,0,0,0.5)
      cursor: move
  }
複製代碼

• 流向掌控 direction 與writing-mode
  • direction:rtl 相似text-align:right, 通常配合黃金搭檔Unicode-bidi實現文字反向輸出
  • writing-mode能將頁面水平流改成垂直流(豎向古詩)
    • horizontal-tb: 默認, 水平流
    • vertical-rl: 垂直流, 從右到左
    • vertical-lr: 垂直流,從左到右

此文單純記作閱讀筆記,因此沒有太過於整理擴展.