CSS小技巧

1.元素水平居中

內聯元素水平居中text-align:center;

塊元素水平據居中margin:0 auto;

2.單行文字垂直居中

height:n px;

line-height:n px;

3.文字相對圖片、輸入框垂直居中

vertical-align:middle;

4.元素自適應高度

父元素未指定高度,子元素有浮動,父元素不能自增。

overflow:hidden|auto;

5.background

元素背景覆蓋范圍:

IE7:content+padding

IE8+,FF:content+padding+border

body背景覆蓋范圍:content+padding+border+margin

6.margin

塌陷:豎直排列的塊級元素之間的間隔是margin-bottom和margin-top兩者中的較大值。

成父子關系的塊級元素,子元素的margin以父元素的content為參考,倘若子元素的content+margin的高度超過了父元素高度值,IE會自動擴大,保持子元素的margin-bottom和父元素的padding-bottom,FF則保持父元素高度不變,子元素會超粗父元素范圍。

成父子關系的塊級元素,如果父元素和子元素之間沒有其他元素,瀏覽器則會把子元素的margin-top作用于父元素。

可給父元素設置以下屬性:

padding-top:n px;

overflow:hidden|auto;

position:absolute;

display:inline-block;

float:left|right;

7.position

absolute:使用絕對定位的元素以最近的已經定位的祖先元素為基準進行偏移,若沒已經經定位的祖先元素則以瀏覽器窗口為基準進行偏移;絕對定位的元素從標準文檔流中脫離,對其他元素的定位沒有影響。設置絕對定位而不設置偏移的元素將脫離文檔流且保持在原來的位置。

fixed:固定定位的元素以瀏覽器窗口為基準進行定位。

8.z-index

z-index屬性取值為auto|number,作用于position屬性設置為relative|absolute|fixed的元素。

同一個層疊上下文中,層疊級別大的顯示在上,層疊級別小的顯示在下;相同層疊級別時,遵循后來居上的原則;不同層疊上下文中,元素顯示順序以父級的層疊級別來決定顯示的先后順序,與自身的層疊級別無關。

9.border

單獨設置border-left|right|top|bottom寫出多樣的三角形狀。

{

border: n px solid color;

border-left|right|top|bottom-color: color|transprent;

}

10.偽類

(1)鏈接偽類出現的順序必須遵循a:link a:visited a:hover a:active

(2):after和:before

element{position:relative;}

element:after,element:before{

position:absolute;

content:" ";

content: attr data-letter;

}

11.溢出省略

white-space:?nowrap;//限制文本換行

overflow:?hidden;//溢出隱藏

text-overflow:?ellipsis;//顯示省略標記

-o-text-overflow:ellipsis;//兼容Opera

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • .清除圖片下方出現幾像素的空白間隙方法1: 復制代碼代碼如下:img{display:block;}方法2: 復制...
    一直以來都很好閱讀 263評論 0 0
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,788評論 0 2
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,594評論 32 459
  • 是通過柔荑花舌乳頭和送人頭黑死人他還是讓他
    hyyuh閱讀 149評論 0 0