css杂类收集
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
單行不換行顯示
如果想要設(shè)計input 輸入框的邊框格式
需要手動添加邊框? border:1px?solid?#ccc 然后設(shè)置?邊框的樣式 border-radius:1px?solid?#fffclearfix的實現(xiàn)
.clearfix{*zoom:1;??//???開啟ie6，ie7的?layout效果?? }.clearfix:before, .clearfix:after{display:table;??//?副作用，自定清理浮動的元素line-height:0;content:''; }.clearfix:after{clear:both;??//???清理?both? }ps:?實現(xiàn)原理 由于ie8+?才兼容?:after?和:before?偽類，所以對象ie8+?可以利用?這兩個偽類，隱藏 text 的顯示?
.hide-text{font:?0/0?a;color:transparent;text-shadow:none;background-color:transparent;border:0; }//?使用方式? <div?class="hide-text">fdasfdasfda</div>?將input塊狀顯示
.input-block-level{display:block;width:100%min-height:30px-webikt-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;???? }? 關(guān)閉瀏覽器字體自動調(diào)整功能
html{-webkit-text-size-adjust:100%-ms-text-size-adjust:100% }//?ps:?text-size-adjust?設(shè)為?none?或者?100%?關(guān)閉字體大小自動調(diào)整功能.另外在移動端?可以通過<meta?name="viewport"?content="width=device-width,initial-scale=1"/>??來解決方法問題。對于line-height 的設(shè)置的建議
對于各個瀏覽器，對于line-height是存在區(qū)別的，對于偶數(shù)基本一致的，但是對于設(shè)置奇數(shù)之后，就會存在差異性了。 所以建議：在設(shè)置line-height的時候，盡可能設(shè)置偶數(shù)。而對于line-height??只是對于文字有作用，對于圖片是沒有作用的。? 對于font-size:100%的理解
對于?
html{font-size:100%?
}//?這樣設(shè)置可以讓原本存在默認(rèn)字體大小的元素能夠修改，并繼承父級別的 文字換行
/*強制不換行*/ white-space:nowrap;/*自動換行*/ word-wrap:?break-word; word-break:?normal;/*強制英文單詞斷行*/ word-break:break-all;兩端對齊
// text-align:justify; // text-justify:inter-ideogra;去掉Webkit(chrome)瀏覽器中input(文本框)或textarea的黃色焦點框
input, button, select, textarea{?outline:none;??//?通過設(shè)置outline?就可以了 } textarea{?font-size:13px;resize:none;?//?通過設(shè)置?textarea?的?resize?屬性就可阻止拖動}去掉chrome記住密碼后自動填充表單的黃色背景
ie6: position:fixed 實現(xiàn)
.fixed-top? {position:fixed;bottom:auto;top:0;? }.fixed-top?//?ie6的實現(xiàn) {//?利用?position:absolute?在加上css?的?expression?實現(xiàn)?eval()?position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop)); }min-height: 最小高度兼容代碼
.minheight500{min-height:500px;??//?height:auto?!important;?//?height:500px;??//?overflow:visible;??//? }文字過多后顯示省略號
.ellipsis,.ell{white-space:nowrap;?//?不換行顯示overflow:hidden;??//?隱藏掉?滾動軸text-overflow:ellipsis??//?超過之后?使用...替換 }取消a鏈接的黃色邊框
a{-webkit-tap-highlight-color:rgba(0,0,0,0); }webkit 水平居中
display:-webkit-box; -webkit-box-pack:center;? -webkit-box-align:?center; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);取消chrome 搜索x提示
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration?{????display:?none; }chrome取消默認(rèn)黃色背景
input:-webkit-autofill?{-webkit-box-shadow:?0?0?0px?1000px?white?inset; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill?{????-webkit-box-shadow:?0?0?0?1000px?white?inset; }手機版本網(wǎng)頁a標(biāo)記虛線框問題
a:focus?{outline:none;-moz-outline:none; }焦點去除背景
-webkit-tap-highlight-color:rgba(255,?255,?255,?0); -webkit-tap-highlight-color:transparent;??//?i.e.?Nexus5/Chrome?and?Kindle?Fire?HD?7''placeholder占位符顏色自定義
input:-moz-placeholder?{color:?#369; } ::-webkit-input-placeholder?{color:#369; }IOS 禁用高亮
-webkit-tap-highlight-color:rgba(255,0,0,0.5); -webkit-tap-highlight-color:transparent;?/*?For?some?Androids?*/IOS iframe 滾動 滾動回彈特效
-webkit-overflow-scrolling:touch; overflow-y:scroll;禁止選中文本
-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;對于 -webkit-filter 的理解
-webkit-filter:blur(5px);??//模糊，此處為5像素-webkit-filter:sepia(0.5);??//疊加褐色，取值范圍0-1，此處表示50%的褐色-webkit-filter:brightness(0.5);??//亮度，取值范圍0-1，5倍亮度（數(shù)字為0時為正常樣式，為1時表示的是100%亮度，無法看到圖片）-webkit-filter:hue-rotate(30deg);?//色相（按照色相環(huán)進行旋轉(zhuǎn)，順時針方向，紅-橙-黃-黃綠-綠-藍綠-藍-藍紫-紫-紫紅-紅）此處為疊加黃色濾鏡-webkit-filter:invert(1);??//反色，取值范圍0-1,0為原圖，1為徹底反色之后，0.5為灰色-webkit-filter:saturate(4);??//飽和度，取值范圍0~*,0為無飽和度，1為原圖，值越高飽和度越大-webkit-filter:contrast(2);??//對比度，取值范圍0~*,0為無對比度（灰色），1為原圖，值越高對比度越大-webkit-filter:opacity(0.8);??//透明度，取值范圍0~1,0為全透明，1為原圖-webkit-filter:drop-shadow(17px?17px?20px?black);?//陰影手機多終端適配 media queryweb app iphone4 iphone5 iphone6 響應(yīng)式布局 適配代碼
@media?(device-height:480px)?and?(-webkit-min-device-pixel-ratio:2){/*?兼容iphone4/4s?*/.class{} }@media?(device-height:568px)?and?(-webkit-min-device-pixel-ratio:2){/*?兼容iphone5?*/.class{} }@media?(device-height:667px)?and?(-webkit-min-device-pixel-ratio:2){/*?兼容iphone6?*/.class{} }@media?(device-height:736px)?and?(-webkit-min-device-pixel-ratio:2){/*?兼容iphone6?Plus?*/.class{} }屏蔽蘋果瀏覽器對數(shù)字的識別Meta標(biāo)簽中的format-detection屬性及含義
<meta?content="telephone=no"?name="format-detection">移除HTML5 input在type="number"時的上下小箭頭
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{??????-webkit-appearance:?none?!important;??????margin:?0;? } input[type="number"]{-moz-appearance:textfield; }HTML5手機瀏覽直接給一個號碼打電話，發(fā)短信
<a?href="tel:15222222222">移動WEB頁面JS一鍵撥打號碼咨詢功能</a> <a?href="sms:15222222222">移動WEB頁面JS一鍵發(fā)送短信咨詢功能</a>移動web頁面自動探測電話號碼
<meta?name="format-detection"?content="telephone=no"> <meta?http-equiv="x-rim-auto-match"?content="none">CSS判斷橫屏豎屏
@media?screen?and?(orientation:?portrait)?{??/*豎屏?css*/}? @media?screen?and?(orientation:?landscape)?{??/*橫屏?css*/}水平居中
div?{margin-left:?auto;margin-right:?auto;}另外，如果你的?div還沒有指定寬度（可以是相對的大小），這種?CSS居中寫法也起不到應(yīng)有的效果，解決辦法是為這個?div指定一個width?寬度，例如：?width:auto;?或者?width:50%?之類的。?
同時，你的頁面類型即?document?type必須聲明為xhtml?。至于松散還是嚴(yán)格都不影響。?
這個寫法也適用于圖片?img和一些其他的盒狀標(biāo)簽的?CSS居中。
最后，假如你在?IE和FireFox?兩個瀏覽器中看起來不一樣，你最好采用?text-align:center;?和?margin?兩個?CSS居中一起設(shè)置的方法。例如：?
#layout??{TEXT-ALIGN:?center;}
#center?{?MARGIN-RIGHT:?auto;?MARGIN-LEFT:?auto;?}
說明：首先在父級元素定義?TEXT-ALIGN:?center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中；對于?IE這樣設(shè)定就已經(jīng)可以了。但在?mozilla中不能居中。解決辦法就是在子元素定義時候設(shè)定時再加上?“MARGIN-RIGHT:?auto;MARGIN-LEFT:?auto;?”?需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個?DIV里，你可以依次拆出多個?div，只要在每個拆出的div里定義?MARGIN?-RIGHT:?auto;MARGIN-LEFT:?auto;?就可以了。 垂直居中
一、單行內(nèi)容的居中? 只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置??line-height和?height?，并使兩值相等，再加上??over-flow:?hidden?就可以了.middle-demo-1{ height:?4em; line-height:?4em; overflow:?hidden; }優(yōu)點：? 1.?同時支持塊級和內(nèi)聯(lián)極元素? 2.?支持所有瀏覽器? 缺點：? 1.?只能顯示一行? 2.?IE中不支持?<img>等的居中 要注意的是：? 1.?使用相對高度定義你的?height?和?line-height 2.?不想毀了你的布局的話，?overflow:?hidden?一定要方法二?：使用絕對定位的?div，把它的?top?設(shè)置為?50％，?margin-top設(shè)置為負的?content?高度。這意味著對象必須在?CSS?中指定固定的高度。因為有固定高度，或許你想給?content?指定?overflow:auto?，這樣如果?content?太多的話，就會出現(xiàn)滾動條，以免?content?溢出。<div?class="content">Content?goes?here</div>#content?{position:absolute;top:50%;height:240px;margin-top:-120px;?/*?negative?half?of?the?height?*/ }優(yōu)點?：適用于所有瀏覽器? 不需要嵌套標(biāo)簽缺點?：沒有足夠空間時，?content?會消失(?類似div?在?body?內(nèi)，當(dāng)用戶縮小瀏覽器窗口，滾動條不出現(xiàn)的情況?)hrome下font-size小于 12px無效
當(dāng)樣式表里?font-size小于12px?時，chrome瀏覽器里字體顯示仍為?12px第一種（推薦）：? Css代碼? html{-webkit-text-size-adjust:none;}第二種：? 在chrome瀏覽器工具欄?選項?>?高級選項?>?更改字體和語言設(shè)置?>?語言?>?谷歌瀏覽器語言?設(shè)置改為?EnglishIE6、7下 POSITION:RELATIVE不滾動
父容器設(shè)置overflow:auto;子元素設(shè)置屬性position:relative;在ie6、ie7中該子元素不隨滾動條滾動。解決辦法：給設(shè)置了overflow:auto屬性的父容器也加上position:relative。IE6下float元素換行
當(dāng)非?float的元素和float?的元素在一起的時候，如果非?float元素在先，那么float的元素將被排斥??<div>我不float <span?class="right">我?float：right</span> </div> 也就是說，你的?span是float:right?，但是你文本還是?float:none如果要讓兩者占據(jù)同一行，一般有兩個解決方法?:第一種：把?span先于文本顯示；第二：把文本也設(shè)成?float。z-index問題
當(dāng)定位元素的?'z-index'?未設(shè)置時（默認(rèn)為?auto），在??IE6?IE7?IE8(Q)?下將會創(chuàng)建一個新的局部層疊上下文。而在其它瀏覽器下，則嚴(yán)格按照規(guī)范，不產(chǎn)生新的局部層疊上下文。<style?type="text/css">body?{?margin:0;?}.p1{?top:20px;?height:50px;?width:150px;?background-color:blue;}.p2{?top:10px;?left:20px;?height:30px;?width:100px;?background-color:yellow;}.p3{?top:0px;?left:50px;?height:100px;?width:50px;?background-color:red;}</style><div?style="position:relative;"?class="p1">1<div?style="position:absolute;?z-index:1;"?class="p2">2</div></div><div?style="position:absolute;"?class="p3">3</div>而在?IE6?IE7?E8(Q)?下，定位元素【?p1】和【p3?】都創(chuàng)建了新的局部層疊上下文，在同一根層疊上下文中，它們的層疊級別相同，但【?p3】在【p1?】之后，所以在?Z?軸上【p3?】比【p1】靠前顯示。此時，由于【?p2】處于【p1?】的層疊上下文中，所以【?p2】在?Z?軸上要比【?p3】靠后。在IE6?下的層級高低不僅要看本身，還要看自己的父元素是否給力：父元素的?position?屬性為?relative或absolute?時，子元素的?absolute?屬性是相對于父元素而言的。而在?IE6下的層級的表現(xiàn)有時候不是看子元素的?z-index?多高，而要看它們的父元素的?z-index?誰高誰低。http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html解決方法有三，1、?position:relative改為position:absolute?；2、去除浮動；?3、浮動元素添加position屬性（如?relative，absolute?等）。?float問題
1.?IE7?中，底邊距?bug是當(dāng)浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉；2.?3像素間距是指挨著浮動元素的文本會神奇的被踢出去?3像素，好像浮動元素的周圍有一個奇怪的力場一樣；3.?雙倍邊距bug?處理?IE6?時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設(shè)置外邊距?(margin)，會引發(fā)雙倍邊距。haslayout引起的IE6 :hover失效
<style?type="text/css">a:hover?{?}a:hover?span{color:#F00;}</style><body><a?href="#">?鼠標(biāo)經(jīng)過時改變我的?<span>顏色</span></a></body>在IE6下“顏色”根本就不會變成紅色，其他瀏覽器都是好的，要解決這個問題就必須觸發(fā)?a:hover的layout?，例如a:hover?{?display:inline-block}或者?a:hover?{?zoom:1}等等。inline-block元素間間距
使用?inline-block會使除IE6/7?外的瀏覽器的元素之間有?3或4px?的間隔。解決辦法：元素間留白間距出現(xiàn)的原因就是標(biāo)簽段之間的空格，因此，去掉?HTML中的空格，自然間距就木有了。IE6下百分比高度無效
解決：設(shè)置具體高度值異步加載css執(zhí)行優(yōu)先級
IE8、9?下按照加載時間順序執(zhí)行，其他瀏覽器則按?dom節(jié)點順序執(zhí)行。轉(zhuǎn)載于:https://my.oschina.net/bosscheng/blog/519855
總結(jié)
- 上一篇： 过来人经验！聊聊前端工程师的职业规划
- 下一篇： 转：mac下安装homebrew