css零碎合集

alt和title

咱們都用過img標籤，相信也都知道有title和alt這兩個屬性，筆試時有時會考到，在這裏簡單記錄一下，主要是怕混淆。

alt：是當圖片不能正確加載出來，進而顯示的文字（圖2）

title：是當鼠標懸停在圖片上，出現的提示文字。（圖1）

<img src="img/12.png" alt="圖片未能加載出來" title="這是一張圖片"/>

圖1

當咱們把圖片的路徑換爲錯誤的路徑時。

圖2 

 

text-transform:text-transform 屬性控制文本的大小寫。

 

write-space :white-space屬性指定元素內的空白怎樣處理。

講一下pre屬性值，通常狀況下，

<p>
This is some text. This is some text. This is some text.    
    
    
    
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

   
    
This is some text. This is some text. This is some text.
</p>

在HTML渲染時，咱們看到的應該是

並無中間有不少空行，包括換行也只是由於容器裝不下，而換行，並非咱們回車換行致使的，那麼pre屬性值就是用來實現這個的，就像pre標籤查不到，

 

p
{
    white-space:pre;
}

這就是效果。OK

 

readOnly 和disabled

Readonly只針對input(text/password)和textarea有效，而disabled對於全部的表單元素有效，包括select,radio,checkbox,button等。

並且readonly時刻用tab獲取焦點的，disabled不行。

btn.setAttribute("disabled",true);

btn.disabled=true;

以上兩種方式都是能夠上的。第一種不論值是什麼都行  false  undefined

 

direction   規定文字的書寫方向 

div
  {
  direction: rtl  
  }

從右往左

 

在給a標籤裏面的元素定義樣式 如字體顏色 text-decoration屬性是不能重父元素繼承的。例：

<h2><a href="http://www.cnblogs.com/djlxs/p/5598120.html">文章連接</a></h2>

字體顏色和text-decoration直接設置在a標籤上，設置在h2上沒有效果

 

當使用flex佈局時：子元素的float、clear和vertical-align屬性將失效。