css相關tips

來源:互聯網
上載者:User
IE10,IE11瀏覽器當點擊input text文字框時,輸入文本後出現一個刪除功能的X按鈕。

去掉input text文字框後的X按鈕的方法:給input text添加如下CSS

input::-ms-clear{ display:none; } //提示:input後是兩個冒號,虛擬元素需要兩個冒號。

readonly :不可編輯,不可獲得焦點,背景顏色預設透明,字型顏色預設為前景色彩黑色,值可以在請求中傳遞;

chorme和ie支援,firefox不支援readonly屬性(在屬性內定義:onfocus="this.blur()"

disabled :不可編輯,不可獲得焦點,背景顏色預設灰色,字型顏色預設為灰色,值不可以在請求中傳遞;

標籤屬性(readonly)大小寫都不會影響其效果,但js的DOM中嚴格區分大小寫(readOnly)。

Firefox的css usage外掛程式可以顯示重複或沒有用到的css rules,每個頁面scan一次比autoscan准。

Firefox不支援background-position-x/y屬性,要用background-position:X Y;代替。

position為fixed的元素,寬度為自適應的最小寬度,不會佔一整行。

表格的儲存格會自動收縮,不能利用overflow屬性。即使設定width屬性固定寬度,也會收縮到最小文字寬度。如果真要設定固定寬度,可以在td中嵌套p,給p設定寬度。或者用table的table-layout:fixed;屬性。

表格的第一行決定整體表格的儲存格寬度。如果要表格根據內容自適應寬度,只要加white-space:nowrap屬性即可。特別是ie,別的瀏覽器會自動調整寬度。

改變瀏覽器大小?

font的簡寫注意事項

1、簡寫時,font-size和line-height只能通過斜杠/組成一個值,不能分開寫。

font: italic bold .8em/1.2 Arial, sans-serif;//family之間用,號

2、順序不能改變.這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且,如果你沒有設定font-weight, font-style, 以及 font-varient ,他們會使用預設值

頁面置中時出現捲軸不跳動的方法:

只有margin-left為auto時,出現捲軸會改變其值,頁面跳動。

1.body { overflow-y: scroll; } //超出時出現捲軸,不超出時依然會保留一個醜陋的灰色的滾動欄

2.wrap-outer {margin-left: calc(100vw - 100%);} //在左邊提前預留捲軸的寬度

//calc()是css3中的函數,可進行四則運算(前後必須有空格),可混合使用百分比、px、em、rem等單位

// 100vw指viewport的寬度,包含捲軸的寬度;而100%是不包含捲軸的viewport寬度。

若margin-left為固定值,不會跳動。捲軸會出現在最上面一層,壓住下面的內容。

不同解析度顯示不同寬度

.abc{ height:300px; border:1px solid #000; margin:0 auto} //通用樣式@media screen and (min-width: 1201px) { //設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度      .abc {width: 1200px}}@media screen and (max-width: 1200px) {//設定了瀏覽器寬度不大於1200px時 abc 顯示900px寬度      .abc {width: 900px}}

注意:CSS代碼順序,由大到小排版CSS(判斷瀏覽器寬度越大越放前)

塊元素預設佔據一行,如果寬度不夠,會自動換行,可以使用white-space:nowrap屬性強制不換行。

子項目設定width=100%,若有border的話,子項目寬度會超出父元素的固定寬度。

box-sizing: content-box|border-box|inherit;//指定盒模型計算寬和高的方式。

content-box: 寬和高只應用到元素的內容框,元素的內邊距和邊框在寬度和高度之外繪製。

border-box:為元素指定的內邊距和邊框都將在已設定的寬度和高度內進行繪製。

.cf:after,.cf:before {content: " "; display: table;}

.cf:after {clear: both;}

:before是因為table類型能產生獨立的bfc,防止上邊距塌陷,

:after負責清除浮動,防止父級高度塌陷;配合使用,代碼少,效率高。
大小不固定的圖片和多行文字的垂直水平置中?

1.將父容器設為display:table並給固定高度,子容器設為display:table-cell,並配合使用vertical-align:middle屬性(在表中和行內元素中生效)即可。

或者:父容器要用相對定位position:relative;子容器絕對位置,top:50%;left:50%;margin-top和margin-left的值為該容器高度,寬度的一半的負值。

或者:父元素相對定位,子容器絕對位置,top:0,bottom:0,margin:auto,不用計算。

若要同時水平置中:使用position:relative屬性或再套一層p使用margin:auto屬性。

多列內容不固定等高css Hack:

父容器設定overflow:hidden;子項目:padding-bottom:9999px;margin-bottom:9999px;

每個p都增加相同的高度,內容少的增加的p會被父容器hidden掉。

label標籤的for 屬性規定 label 與哪個表單元素繫結。

隱式和顯式的聯絡

例如,在 XHTML 中:

顯式的聯絡:

<labelfor="SSN">SocialSecurity Number:</label><inputtype="text" name="SocSecNum" id="SSN" />

隱式的聯絡:

<label>Date of Birth: <inputtype="text" name="DofB" /></label>

第一個標記是以顯式形式將文本 "Social Security Number:" 和表單的社會安全號碼的文本輸入控制項 ("SocSecNum") 聯絡起來,它的 for 屬性的值和控制項的 id 一樣,都是 SSN。第二個標記 ("Date of Birth:") 不需要 for 屬性,它的相關控制項也不需要 id 屬性,它們是通過在 <label> 標籤中放入 <input> 標籤來隱式地串連起來的。

ie8之前不支援opacity屬性,需要使用濾鏡:filter:alpha(opacity=30); /*IE 4-9 */

IE專有的濾鏡屬性filter是只適用於 layout 元素的,也就是說如果你給一個p設定透明用的是filter:alpha(opacity=80);如果你沒有讓p觸發hasLayout,那麼這個透明將無效。需要另外設定zoom:1;這個屬性進行觸發。

<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">IE8開始添加的屬性,指定瀏覽器去類比某個特定版本的IE瀏覽器的渲染方式,解決IE的相容性問題。

background-origin: 規定 background-position 屬性相對於什麼位置來定位。

padding-box 背景映像相對於內邊距框來定位;(預設)

border-box背景映像相對於邊框盒來定位;

content-box背景映像相對於內容框來定位。

background-position 設定背景映像的起始位置。

預設值:0% 0%(從背景圖的左上點開始);如果只設定一個值,另一個值將為“置中”(50%/center)

background-size:取值(IE8不支援此屬性)

百分比/length:背景圖的尺寸相對於背景地區的長度。只設一個,第二個為auto(會保持比例不變,不變形)。

如果都設為100%,則背景圖會鋪滿背景地區,但長寬比率會跟著變化。

contain:背景地區按背景圖的固定比例包含整個背景圖。背景圖的尺寸以背景圖按固定比例擴大,其任意一條邊到達背景地區的邊界為止,經常會導致另一邊空白。

cover:背景圖按固定長寬比縮放至填充滿整個背景地區,有一邊的背景圖會因超出背景地區而被切除。

IE8相容:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='絕對路徑',sizingMethod='scale/crop');

crop : 背景圖大小不變,剪下圖片以適應地區尺寸。

image : 預設值。增大或減小地區的尺寸邊界以適應背景圖的尺寸,相當於overflow:visible的效果。

scale : 縮放背景圖以適應地區的尺寸邊界。

①不能指定任意大小background百分比②只適於單張圖片不能使用圖片精靈等拼圖③要引用絕對路徑圖片④相容ie7,8

JPG:有損壓縮,壓縮比例高,體積小,開啟快。不支援透明,色彩豐富,數位相機最常用的格式,壓縮比率高。

PNG:無損壓縮,體積大。

png8:支援透明/不透明,體積小,256種顏色,適合顏色比較單一的映像,如純色、logo、表徵圖等。

png24:支援半透明,體積稍大,1600萬種顏色,適合顏色比較豐富的圖片。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.