首頁 > web前端 > css教學 > css相關tips

css相關tips

高洛峰
發布: 2018-05-26 13:50:22
原創
1892 人瀏覽過

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 属性,它们是通过在

 ie8之前不支持opacity属性,需要使用滤镜:filter:alpha(opacity=30);  /* IE 4-9 */ 

IE专有的滤镜属性filter是只适用于 layout 元素的,也就是说如果你给一个p设置透明用的是filter:alpha(opacity=80);如果你没有让p触发hasLayout,那么这个透明将无效。需要另外设置zoom: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万种颜色,适合颜色比较丰富的图片。

更多css相关tips相关文章请关注PHP中文网!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板