前端小技巧 一

css常用的一些設定小技巧

幾乎經常用到

一、特殊情況下position的定義

比如這個例子，背景是張，輸入框，提交按鈕、以及下邊的六個按鈕的單擊事件都是固定在之上的。

(圖1)                                           (圖2)

設定技巧：

1） 背景用的是background:url();鏈結的

2） 將背景設定position:relative;  背景之上的元素設定position:absolute;並設定相應的left,top值；

3） 一般彈窗都會使元素上下、左右都居中顯示，這時position屬性應定義為fixed;

★解決定位問題——>>見圖1

.back-box

.six-wrap
.six

color:#fff;background:#549dfc;overflow:hidden;

position:fixed;border:solid 3px #0f5ec8;border-radius:10px;z-index:100}
.six-wrap

針對要彈出的視窗使用position:fixed;屬性，此時的fixed屬性比position:absolute；要管用的多，為了相容移動端各尺寸，用fixed只設定top,left，即可相容，如果使用absolute,則相容性不如fixed好調一些。

二、background:url()；

背景一般用background:url();像上邊的例子背景就用的background設定相容性更好些，載入時也具有整體性(圖3)。

裝飾一般用

(圖3，圖4)             

三、巧用偽類

1） 下邊的例子中，文字下邊的紅色下劃線用:after偽元素就實現的比較好。

.underline:after

3） 特殊情況下，hover和偽類一起使用 .div a:hover::after{}

一般導航條hover時用這種偽類結合偽元素用的較多

四、flex布局在什麼時候用最合適

推薦大家乙個flex效果現成的**，根據想要的效果，直接生成**。

大概說下flex的常用功能吧，如下：

不適合用flex布局的頁面：

請仔細對比下，上下兩張的區別，flex布局，適合單行應用，如果多行，上下左右都居中，且多行item是左對齊，向下邊這種，左右，上下距離相等，且每小項換行時都是居左的，flex就做不到這種布局。

這時就要利用@media相容不同尺寸的解析度了。

這裡簡單列舉下幾個pc端常用的尺寸設定：

ol.layouts 

@media screen and (max-width: 2059px) 
} @media screen and (max-width: 1809px) 
} @media screen and (max-width: 1559px) 
} @media screen and (max-width: 1309px) 
} @media screen and (max-width: 1059px) 
} @media screen and (max-width: 809px) 
} @media only screen and (max-width: 870px) 
} @media screen and (max-width: 520px)
ol.layouts li.group:nth-of-type(2n)
ol.layouts li ul.tools
}

前端小技巧

1 形成如下效果 文字居於框中 一般給span標籤加框框，會比較貼合緊密，不好看 font size 1.3rem border 1px solid 337ab7 padding 0 10px height 20px line height 20px 加完之後行高與高度一樣 框就會高一點，如果單憑想...

前端實戰小技巧

前端知識小技巧 1 保留 首行 標題 清空列表 table tr not first html table tr not first empty 2 通過屬性隱藏input標籤型別 隱藏，但會佔位置 隱藏，但不會佔位置 通過jquery隱藏與顯示 p hide p show 3 前台動態新增opti...

前端布局 小技巧

這種方式最好應用於 按鈕 文字之類的居中模式，否則就需要借助inline block來進行居中布局。適用於塊級元素不給出寬高的情況下 需要借助transtrom的tanslatex方法 parent child 適用於塊級元素知道寬度 parent child 子元素寬度已知的情況下 parent ...