說說我在最近專案中碰到的css問題吧,作為問題知識集合總結筆記:
序號內容
1我只是用來測試的
2我只是用來測試的
3我只是用來測試的
4我只是用來測試的
5我只是用來測試的
6我只是用來測試的
7我只是用來測試的
8我只是用來測試的
順便做做筆記說說px、em、rem的區別:
px是固定的畫素,一旦設定了就無法因為適應頁面大小而改變。
em和rem相對於px更具有靈活性,他們是相對長度單位,意思是長度不是定死了的,更適用於響應式布局。
對於em和rem的區別一句話概括:em相對于父元素大小,rem相對於根元素大小(html元素)。
rem中的r意思是root(根源),這也就不難理解了。
em/rem:用於做響應式頁面,不過我更傾向於rem,因為em不同元素的參照物不一樣(都是該元素父元素),所以在計算的時候不方便,相比之下rem就只有乙個參照物(html元素),這樣計算起來更清晰。
webkit支援擁有overflow屬性的區域,列表框,下拉列表,textarea的滾動條自定義樣式,所以用處還是挺大的。當然,相容所有瀏覽器的滾動條樣式目前是不存在的。
css美化瀏覽器預設滾動條樣式:
::-webkit-scrollbar::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover
::-webkit-scrollbar-track-piece
給某個div加滾動條設定:
.test1::-webkit-scrollbar.test1::-webkit-scrollbar-track
.test1::-webkit-scrollbar-thumb
demo樣例:
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/::-webkit-scrollbar
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
具體更多樣例可以參照
:horizontal//horizontal偽類適用於任何水平方向上的滾動條
:vertical
//vertical偽類適用於任何垂直方向的滾動條
:decrement
//decrement偽類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕
:increment
//increment偽類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕
:start
//start偽類適用於按鈕和軌道碎片。表示物件(按鈕 軌道碎片)是否放在滑塊的前面
:end
//end偽類適用於按鈕和軌道碎片。表示物件(按鈕 軌道碎片)是否放在滑塊的後面
:double-button
//double-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。
:single-button
//single-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是乙個按鈕。也就是軌道碎片緊挨著乙個單獨的按鈕。
:no-button
no-button偽類表示軌道結束的位置沒有按鈕。
:corner-present
//corner-present偽類表示滾動條的角落是否存在。
:window-inactive
//適用於所有滾動條,表示包含滾動條的區域,焦點不在該視窗的時候。
::-webkit-scrollbar-track-piece:start
::-webkit-scrollbar-thumb:window-inactive
::-webkit-scrollbar-button:horizontal:decrement:hover
偽類與偽元素區別:
參照:
html Table實現表頭固定
最近一直在搞前台瑣碎的東西,也學習了一下linux,沒有時間對新的東西進行深入的研究和學習,沒有寫部落格,不過歸咎其原因還是在於自己的惰怠。廢話不多說,今天想將乙個前台頁面設計的乙個小東西分享一下,那就是平時我們設計 的時候,通常都想將 的頭部進行固定,而 的body部分能夠進行滾動的效果,其實這個...
excel表頭固定
當我們編輯過長或過寬的excel工作表時,需要向下或向上滾動螢幕。這時,表頭也會相應滾動,不能在螢幕上顯示,於是我們不清楚要編輯的資料對應 於表頭的哪乙個資訊。按下列方法,可以使表頭鎖定,始終位於螢幕上的可 視區域。首先選定要鎖定的表頭,如果我們要將圖中的 1 3行 鎖定,那麼單擊a4單 元格,然後...
GridView固定表頭
gridview固定表頭 title style type text css freezing freezing th style head body form id form1 runat server divstyle overflow y scroll height 200px width 5...