1. 程式人生 > >呆呆鍵盤手11.13號學到的有關文字css、偽類選擇器、浮動的內容

呆呆鍵盤手11.13號學到的有關文字css、偽類選擇器、浮動的內容

1.文字css

  <ins></ins>下劃線標記

  <del></del>刪除線標記

  文字對齊:text-align-left/center/right

  文字首行縮排:text-indent    單位px em

  行高:line-height

2.偽類選擇器

  a:link  連結的原本的樣式(沒有被訪問過),訪問後失效;

  a:hover 滑鼠移入時的樣式;

  a:active 滑鼠按下時的樣式(滑鼠點選沒有鬆開);

  a:viseted 連結訪問過的樣式;

  順序:L -- H -- V -- A

3.浮動

讓預設文件流下的元素漂浮起來水平排列;

浮動的影響:

1.行內元素浮動之後可以支援寬高;

2.文字會給浮動的元素讓位;可以製作文字繞排的效果;

3.在父級沒有給高度的情況下,子級浮動後父級會沒有高度;

清除浮動

1.在父級內容的最後新增一個空的div,新增clear屬性;

  clear--left/right/both; clear是清除上一個元素帶來的影響;

  不推薦使用,因為會在頁面上新增太多的無用標籤,讓頁面的佈局變得更復雜;

2.給父級設定overflow:hidden;

  會觸發bfc(block formatting context)塊級格式化上下文;

  不推薦使用,因為這個屬性和定位一起使用時會產生問題;

3.使用偽元素after

  .clearfix:after{

    content:"";

    height:0;

    line-height:0;

    display:block;

    visibility:hide;

    clear:both;

  }

  .clearfix{

    zoom:1;

  }

4.使用雙偽元素after和before

  .clearfix:after,.clearfix:before{

    content:"";

    display:table;

    clear:both;

  }

  .clearfix{

    zoom:1;

  }

推薦使用3.