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