一、清除浮動
浮動給咱們的代碼帶來的麻煩，想必不須要多說，咱們會用不少方式來避免這種麻煩，其中我以爲最方便也是兼容性最好的一種是....// 清除浮動
.clearfix{
zoom: 1;
}
.clearfix:after{
display: block;
content: ''; clear: both; } 二、垂直水平居中 在css的世界裏水平居中比垂直居中來的簡單一些，通過了多年的演化，依然沒有好的方式來讓元素垂直居中(各類方式各有優缺點，但都不能達到兼容性好，破壞力小的目標)，如下是幾種常見的實現方式絕對定位方式且已知寬高 position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em; 絕對定位 ＋ 未知寬高 ＋ translate position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); //須要補充瀏覽器前綴 flex 輕鬆搞定水平垂直居中( 未知寬高) display: flex; align-items: center; justify-content: center; 三、 文本末尾添加省略號 當文本的內容超出容器的寬度的時候，咱們但願在其默認添加省略號以達到提示用戶內容省略顯示的效果。寬度固定，適合單行顯示... overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 寬度不固定，適合多行以及移動端顯示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 四、製造文本的模糊效果 當咱們但願給文本製造一種模糊效果感受的時候，能夠這樣作color: transparent; text-shadow:0 0 2px rgba(0,0,0,.5); 五、動畫實現簡潔loading效果 咱們來實現一個很是簡潔的loading效果.loading:after{ display: inline-block; overflow: hidden; vertical-align: bottom; content: '\2026'; -webkit-animation: ellipsis 2s infinite; } // 動畫部分 @-webkit-keyframes ellipsis{ from{ width: 2px; } to{ width: 15px; } } 六、自定義文本選中樣式 默認狀況下，咱們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顏色(能夠本身拿起鼠標試試)，若是咱們想本身定製被選中的部分的樣式呢？// 注意只能修改這兩個屬性 字體顏色 選中背景顏色 element::selection{ color: green; background-color: pink; } element::-moz-selection{ color: green; background-color: pink; } 七、頂角貼紙效果 有時候咱們會有這樣的需求，在一個列表展現頁面，有一些列表項是新添加的、或者熱度比較高的，就會要求在其上面添加一個貼紙效果的小條就像hexo默認博客的fork me on github那個效果同樣，以下圖。 接下來咱們開始一步步完成最左邊的這個效果 html <div class="wrap"> <div class="ribbon"> <a href="#">Fork me on GitHub</a> </div> </div> css /* 外層容器幾本設置 */ .wrap{ width: 160px; height:160px; overflow:hidden; position: relative; background-color: #f3f3f3; } .ribbon{ background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; /* shadom */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; /* rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* position */ left: -50px; top: 40px; } .ribbon a{ border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444; } 八、input佔位符 當咱們給部分input類型的設置placeholder屬性的時候，有的時候須要修改其默認的樣式。input::-webkit-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } input::-moz-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } input::-ms-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } 九、移動端可點擊元素去處默認邊框 在移動端瀏覽器上，當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，會出現藍色邊框，說實話，這是很噁心的，怎麼去掉呢?-webkit-tap-highlight-color: rgba(255,255,255,0); 十、首字下沉 要實現相似word中首字下沉的效果可使用如下代碼element:first-letter{ float:left; color:green; font-size:30px; } 十一、小三角 在不少地方咱們能夠用得上小三角，接下來咱們畫一下四個方向的三角形.triangle{ /* 基礎樣式 */ border:solid 10px transparent; } /*下*/ .triangle.bottom{ border-top-color: green; } /*上*/ .triangle.top{ border-bottom-color: green; } /*左*/ .triangle.top{ border-right-color: green; } /*右*/ .triangle.top{ border-left-color: green; } 能夠看出畫一個小三角很是簡單，只要兩行樣式就能夠搞定，對於方向只要想着畫哪一個方向則設置反方向的樣式屬性就能夠 十二、鼠標手型 通常狀況下，咱們但願在如下元素身上添加鼠標手型a submit input[type="iamge"] input[type="button"] button label selecta[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button { cursor: pointer; } 1三、屏蔽Webkit移動瀏覽器中元素高亮效果 在訪問移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用如下代碼屏蔽這種樣式-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
移動端兼容性問題1.手機旋轉字體會自動調整 *{text-size-adjust:none} 2.click出現點擊區域閃一下 a{-webkit-tap-highlight-color:rgba(0,0,0,0)} 3.textarea,input默認框內有陰影 textarea,input{appearance:none} 4.iOS下默認識別頁面中的電話 <meta name="format-detection" contnent="telephone=no"> 5.:active兼容處理 (1)給body添加ontouchstart (2)document.addEventListener('touchstart',function(){},false) 6.某些圓角實效 background-clip:padding-box; 7.IE10 Inputy有叉號 input:ms-clear{display:none}
* {
margin: 0; padding: 0; text-decoration: none; -webkit-overflow-scrolling: touch !important; /*iOS慣性滾動*/ outline: none; -webkit-font-smoothing: antialiased; /*字體細長*/ -moz-osx-font-smoothing: grayscale; } body { position: relative; margin: 0 auto; width: 100%; height: 100%; min-width: 900px; overflow-x: hidden; font-family: "微軟雅黑"; -webkit-touch-callout: none; /*禁用長按頁面時的彈出菜單*/ -webkit-tap-highlight-color: white; box-sizing: border-box; } li { list-style: none; } ul, ol { list-style-type: none; } select, input, img, select { vertical-align: middle; } img { border: none; display: inline-block } i { font-style: normal } a { text-decoration: none; -webkit-appearance: none; } *:focus { outline: none; } input, textarea, button { resize: none; -webkit-appearance: none; outline: none; } input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } strong { font-weight: bold; } h3, h4 { font-weight: normal } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cecece; } input:-moz-placeholder, textarea:-moz-placeholder { color: #cecece; } input[type="button"], input[type="submit"], input[type="file"], button { cursor: pointer; -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } .hover-hand { cursor: pointer; /*懸浮顯示手*/ } /*禁止選中copy*/ .dont-select { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } /*float*/ .left { float: left; } .right { float: right; } .clearfloat:after { content: ""; display: block; height: 0; clear: both; zoom: 1; visibility: hidden; } .clearfloat { zoom: 1; clear: both; } .clear { clear: both; zoom: 1; } .hide { display: none !important; } .show { display: block; } /*font-size*/ .font12 { font-size: 12px; } .font13 { font-size: 13px; } .font14 { font-size: 14px; } .font15 { font-size: 15px; } .font16 { font-size: 16px; } .font18 { font-size: 18px; } .font19 { font-size: 19px; } .font20 { font-size: 20px; } .font22 { font-size: 22px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; } .font28 { font-size: 28px; } .font30 { font-size: 30px; } .font32 { font-size: 32px; } .font36 { font-size: 36px; } .font48 { font-size: 48px; } .font60 { font-size: 60px; } .color-white { color: white; } .color-red { color: red; } .color-green { color: green; } .color-black { color: black; } .cl1685d3 { color: #1685D3; } .bg1685D3 { background: #1685D3; } .color-blue { color: blue; } .color-yellow { color: yellow; } .color-pink { color: pink; } .bg-yellow { background: yellow; } .bg-red { background: red; } .border-blue { border: 1px solid blue; } .border-black { border: 1px solid black; } .border-white { border: 1px solid white; } .tc { text-align: center; } .tl { text-align: left; } .tr { text-align: right; } /*一行多行顯示省略號*/ .one-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*clip 修剪文本。*/ } .more-line { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /*flex*/ .flex { display: flex; flex-wrap: nowrap; flex-direction: row; flex-flow: row nowrap; justify-content: flex-start; /*flex-start | flex-end | center | space-between | space-around;*/ align-items: flex-start; /*flex-start | flex-end | center | baseline | stretch;*/ align-content: flex-start; /*flex-start | flex-end | center | space-between | space-around | stretch;*/ align-self: auto; } /*移動端1px*/