關於CSS知識點的集錦

這篇文章介紹關於CSS知識點的集錦

CreateTime--2016年9月29日09:43:10
Author:Marydon
1.背景色線性漸變

background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/

UpdateTime--2016年10月25日11:37:53
UpdateTime--2016年11月23日09:53:46    
2.設定表格的邊框被合併為一個單一的邊框

border-collapse: collapse;/*前提：table的border=1或border="1"或border="1px"*/

UpdateTime--2016年10月29日09:04:07
3.設定p最小高度及高度自動伸展

#pHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;} 　　

#

<p id="pHeight"> 　　　
此p具有最小高度且高度可以随着内容的增高而自动伸展 
<br/>　　此p具有最小高度且高度可以随着内容的增高而自动伸展 
</p>

　　設定最小寬度及寬度自動伸展

width:auto;min-width:5px;height:800px;

4.禁止換行的兩種方式
　　方式一：
　　　　通常在瀏覽器上顯示的文件會在到達瀏覽器的橫幅底端時自動換行，但是如果文字被包含在～標籤裡的話，則不會換行
　　　　使用標籤
　　方式二：
　　　　使用CSS樣式

style="white-space:nowrap;"

    UpdateTime--2016年11月25日08:57:49
　　設定td禁止換行

<td nowrap="nowrap"></td>

UpdateTime--2016年10月31日09:44:17
5.display樣式
　　inline     行內元素（與其它元素共佔一行，不換行，不能設定寬和高）
　　block     區塊級元素（單獨佔一行，可以設定寬和高）
　　inline-block    行內區塊級元素（與其它元素共佔一行，但是可以設定寬和高）（兼有了行內元素和區塊級元素的特徵）
　　none     隱藏該元素

document.getElementById("aa").style.display="";//表示的是：清除display样式，display将使用默认值（块元素会变成block，内联元素会变成inline）

#UpdateTime--2016年11月24日11:44:31
6.ime-mode語法和text-transform語法
　　UpdateTime--2016年12月15日19:52:16

/*屏蔽输入法，可以用来禁止录入中文*/
　　ime-mode:disabled; //IE兼容，chrome不兼容
　　<input type="text" name="mobile" style="ime-mode:disabled;" />
/*将输入的英文字母转全部换成大写字母*/
　　text-transform:uppercase;
　　<input type="text" name="mobile" style="text-transform:uppercase;" />
UpdateTime--2017年1月9日10:23:23
/*将输入的英文字母转全部换成小写字母*/
　　text-transform:lowercase;
　　<input type="text" style="text-transform:lowercase;"/>

　　詳細介紹
　　　　ime-mode語法：（此語法在google瀏覽器上無效，需要用js進行控制，請參閱"input文字方塊輸入內容控制"檔案）
　　　　　　ime-mode : auto | active | inactive | disabled
　　　　　　取值：
　　　　　　auto :　      預設值。不影響IME的狀態。與不指定 ime-mode 屬性時相同
　　　　　　active :　    指定所有使用IME輸入的字元。即啟動本地語言輸入法。使用者仍可撤銷啟動IME
　　　　　　inactive :　  指定所有不使用IME輸入的字元。即啟動非本地語言。使用者仍可撤銷啟動IME
　　　　　　disabled :　    完全停用IME。對於有焦點的控制項(如輸入框)，使用者不可以啟動IME
　　　　　　text-transform語法：
　　　　　　text-transform : none | capitalize |　　　　none :　     預設值。無轉換發生
　　　　　　capitalize :　    將每個單字的第一個字母轉換成大寫，其餘無轉換發生
　　　　　　　    轉換成小寫
7.設定p裡的內容自動換行
　　當p框固定高度寬度後，顯示的內容超過p的寬度，超出內容不換行的問題
　　設定css樣式


#

　　word-wrap:break-word;

#8.實現p,li裡的內容超出容器寬度時，超出部分以".."形式顯示

　　前提：必須先確定p,li的寬度

　　添加屬性

　　text-overflow:ellipsis;
　　white-space:nowrap;
　　overflow:hidden;

9.文字方塊和密碼框在IE瀏覽器顯示樣式控制

/*去除IE浏览器文本框右侧出现叉号*/
　　#aa::-ms-clear {
　　　　display:none;
　　}
　　/*去除IE浏览器密码框右侧出现眼睛*/
　　#bb::-ms-reveal {
　　　　display:none;
　　}

<input id="aa" type="text"/><input id="bb" type="password"/>　

以上是關於CSS知識點的集錦的詳細內容。更多資訊請關注PHP中文網其他相關文章！