1. 程式人生 > >CSS樣式之補充

CSS樣式之補充

fix 如果 之前 brush sta line 需要 將他 for

********CSS一些常用屬性*******

0.去掉下劃線 :text-decoration:none ;
1.加上下劃線: text-decoration: underline;
2.調整文本和圖片的位置(也就是設置元素的垂直對齊方式):vertical-align:-20px;
3.外邊距:margin
4.內邊距:padding
5.居中;margin 0 auto;(只是針對盒子居中)
6內聯標簽是不可以設置長寬的,有時候就得把內聯標簽變成塊級標簽或者塊級內聯標簽,這就用到了display標簽。。
  1.將內聯標簽轉換成塊級標簽:display:block;
  2.將塊級標簽轉換成內聯標簽:display:inline;
  3.塊級內聯標簽:display;inline-block;
   塊級內聯標簽可以像塊級一樣可設長寬,也可像內聯一樣在一行顯示
6.隱藏的兩個方法:display:none; #隱藏了會頂上去
         visibility :hidden; #隱藏了不會頂上去
7.隱藏溢出的兩個方法:overflow :auto;
           overflow :scoll;  #帶滾動條
8.文本水平居中:text-align:center;
   文本垂直居中:line-height;
9.偽類;
  1.沒訪問之前: a:link{color:red;} 
  2.鼠標懸浮時: a:hover{color:green;}
  3.訪問過後: a:visited{color:yellow;}
  4.鼠標點擊時 a:active{color:blue;}
  5.在p標簽屬性為c2的後面加上內容
  p.c2:after{
    content:‘hello‘;
    color:red;
  }
6.在p標簽屬性為c2的錢面加上內容
  p.c2:before{
    content:‘啦啦啦‘;
    color:red;
  }
10.position的四種屬性
  1.static:默認位置
  2.fixed:完全脫離文檔流,固定定位(以可視窗口為參照物)
  3.relative:相對定位(參照的是自己本身的位置),沒有脫離文檔流,沒有頂上去,會保持自己的位置不動。可以使用top left進行定位
  4.absolute:絕對定位:脫離了文檔流(參照的是按已定位的父級標簽定位,如果找不到會按body的去找)
註意!!:將定位標簽設置為absolute,將他的父級標簽設置為定位標簽 (relative)

11.float和position的區別
  float:半脫離文檔流
  position:全脫離文檔流
12.z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
13.透明度:opacity:0.4;
14.邊框弧度:border-radius: 50%;#圓
15.去除列表前面的標誌:list-style:none;
16.對齊上面和左邊最頂部:padding:0; margin:0;
17.字體加粗樣式: font-weight: 900; 
18.需要註意的幾個邏輯表達式的問題,下面的這個和js的&&,||用法是一樣的
  print(3 and 5) #兩個為真才為真
  print(0 and 3) #0是假就不判斷後面了,直接成假了
  print(0 or 3) #有一個為真就為真
  print(2 or 3) #2已經為真了那麽就不會去判斷後面了

CSS樣式之補充