css相關tips-css教學-PHP中文網

首頁

web前端

css教學

css相關tips

高洛峰

May 26, 2018 pm 01:50 PM

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%，则背景图会铺满背景区域，但长宽比率会跟着变化。