CSS實用技巧總結一

MAX_zuo 發布于2019-08-30 13:09 / 2065人閱讀

摘要：當一個空元素有上下外邊距時，如果沒有或者，則元素的上外邊距與下外邊距會發生合并。如果使用，一般只能實現固定的左右兩列布局，并不能實現其中一列為自適應的布局。自動平均劃分元素，并且在一行顯示。

class命名

1.為了避免 class 命名的重復，命名時一般取父元素的 class 名作為前綴

外邊距疊加的三種情況

當一個元素出現在另外一個元素上面的時候，第一個元素的下邊距(margin-bottom) 將會與第二個元素的上邊距(margin-top)會發生合并。

當一個元素包含在另外一個元素中時(父子關系)，假如沒有內邊距 padding 或邊框 border 把外邊距分隔開的話，父元素和子元素的相鄰上下外邊距也會發生合并。

當一個空元素有上下外邊距時，如果沒有 border 或者 padding，則元素的上外邊距與下外邊距會發生合并。

負邊距

當圖片與文字排在一起的時候，在底部水平方向上往往都是不對齊的，這是因為圖片與文字默認是基線對齊(vertical-align:baseline)。如果想要實現圖片與文字底部水平方向對齊，除了給img設置“vertical-align:text-bottom”屬性這個方法之外，還可以使用兼容性比較好的負 margin 來實現。給img設置負邊距

style="margin:0 3px -3px 0"

自適應兩列布局
自適應兩列布局，指的是在左右兩列中，其中有一列的寬度為自適應，另外一列寬度是固定的。如果使用 float，一般只能實現固定的左右兩列布局，并不能實現其中一列為自適應的布局。

 
  
  
    
this is left
    
    
this is right

元素的垂直居中

overflow

設置overflow: hidden來清除浮動
浮動會引起父元素塌陷

這里我們可以通過給wrapper加上overflow: hidden屬性來清除浮動

使用“overflow: scroll”顯示滾動條。

display

行內元素。
行內元素有一下幾個特點:

行內內部可以容納其他行內元素，但不可以容納塊元素，不然會出現無法預知的效果。

無法定義高度(height)，也無法定義寬度(width)。

可以定義 margin-left 和 margin-right，無法定義 margin-top 和 margin-bottom。

去除inline-block元素間距。
在排列多個inline-block元素時（例如img）,在inline-block元素之間是會有間距存在的。

我們可以通過給父元素添加font-size: 0的方式來解決。

table-cell
“display:table-cell”非常強大，可以實現以下三種功能。

圖片垂直居于元素。
在 CSS 中，我們可以使用“display:table-cell”和“vertical-align:center”來實現大小不固定的圖片的垂直居中效果。

(2)等高布局。
(3)自動平均劃分元素，并且在一行顯示。

GPU云服務器云服務器技巧總結應用技巧總結 css技巧年終總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115348.html

2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0