分類目錄歸檔：CSS+DIV

2020
09-03

composer 安裝、鏡像配置及常見問題解決 HOT

composer 是 PHP 用來管理依賴（dependency）關(guān)系的工具。你可以在自己的項(xiàng)目中聲明所依賴的外部工具庫（libraries），Composer 會(huì)幫你安裝這些依賴的庫文件。 繼續(xù)閱讀 >

2017
08-29

你所不知道的 CSS 動(dòng)畫技巧與細(xì)節(jié)

怕標(biāo)題起的有點(diǎn)大，下述技巧如果你已經(jīng)掌握了看看就好，歡迎斧正，本文希望通過介紹一些CSS不太常用的技巧，輔以一些實(shí)踐，讓讀者可以更加深入的理解掌握CSS動(dòng)畫。廢話少說，直接進(jìn)入正題，本文提到的動(dòng)畫不加特殊說明，皆指CSS動(dòng)畫。正負(fù)旋轉(zhuǎn)相消嗯。名字起的很奇怪，好像數(shù)學(xué)概念一樣。（寫完文章才發(fā)現(xiàn)這里應(yīng)該叫正反旋轉(zhuǎn)相消，圖都截完了，大家心里清楚就好）在動(dòng)畫中，旋轉(zhuǎn)是非常常用的屬性... 繼續(xù)閱讀 >

2017
08-05

使用 JavaScript 進(jìn)行即時(shí)表單驗(yàn)證

HTML5引入了幾個(gè)新的屬性來實(shí)現(xiàn)基于瀏覽器的表單驗(yàn)證。pattern屬性是一個(gè)正則表達(dá)式，用于定義textarea元素和大多數(shù)input元素類型的有效輸入范圍。required屬性指定某個(gè)字段是否需要輸入。對(duì)于沒有實(shí)現(xiàn)這些屬性的傳統(tǒng)瀏覽器，我們可以使用它們的值作為填充表單的基礎(chǔ)。我們還可以使用它們來提供更有趣的增強(qiáng)功能-即時(shí)表單驗(yàn)證。來自作者的更多內(nèi)容一個(gè)JavaScript可訪問性的失敗實(shí)驗(yàn)的經(jīng)驗(yàn)教訓(xùn)可用的多... 繼續(xù)閱讀 >

2017
03-11

2017 年值得學(xué)習(xí)的 3 個(gè) CSS 新特性

在眾多的CSS新特性中，有3個(gè)今年采用的新特性讓我抑制不住地激動(dòng)。1.特性查詢不久前，我寫了我真心期望的一個(gè)CSS特性，就是關(guān)于特性查詢，現(xiàn)在基本上可以說它已經(jīng)存在了！它支持除InternetExploer之外的主流瀏覽器(包括OperaMini)。特性查詢，使用@supports規(guī)則，允許我們將CSS包含在一個(gè)條件塊中，這個(gè)條件塊中會(huì)檢查當(dāng)前useragent是否支持一個(gè)CSS屬性鍵值對(duì)，在支持的情況下其中的內(nèi)容才... 繼續(xù)閱讀 >

2017
03-11

[譯] 再談 CSS 中的代碼味道

談CSS中的代碼味道回到2012年，我寫了一篇關(guān)于潛在CSS反模式的文章CSS中的代碼味道。回看那篇文章，盡管四年過去了，我依然認(rèn)同里面的全部?jī)?nèi)容，但是我有一些新的東西加到列表中。再次說明，這些內(nèi)容并不一定總是壞的東西，因此把它們稱為代碼味道：在你的使用案例中它們也許可以很好的被接受，但是它們?nèi)匀蛔屓擞X得有一點(diǎn)奇怪。在我們開始前，讓我們回想一下什么是代碼味道，摘自維基百科(emphasismine)：... 繼續(xù)閱讀 >

2017
03-07

如何使用CSS實(shí)現(xiàn)多行文本的省略號(hào)顯示

 合理的截?cái)喽嘈形谋臼羌蝗菀椎氖虑椋覀兺ǔ２捎脦追N方法解決：overflow:hidden直接隱藏多余的文本text-overflow:ellipsis只適用于單行文本的處理各種比較脆弱的javascript實(shí)現(xiàn)。之所以說這種實(shí)現(xiàn)比較脆弱是由于需要文本長(zhǎng)度的變化時(shí)刻得到回流（relayout）后的布局信息，如寬度原文寫作時(shí)間是2012.9.18號(hào)，比較有意義的一天。不過作者忽略了WebKit提供的一個(gè)擴(kuò)展屬性-webkit-lin... 繼續(xù)閱讀 >

2017
03-07

CSS3 新特性學(xué)習(xí)

CSS3是最新的CSS標(biāo)準(zhǔn)，并且完全向后兼容，不過目前W3C仍然在對(duì)CSS3規(guī)范進(jìn)行開發(fā)，雖然標(biāo)準(zhǔn)的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當(dāng)多的CSS3屬性了。CSS3提供了很多可以把玩的新特性，模糊了之前只控制樣式的定義，讓之前很難處理的樣式（如：圓角、多列等）和只能通過Javascript來實(shí)現(xiàn)的動(dòng)畫效果等現(xiàn)在都能通過CSS3新特性提供的屬性很輕松的實(shí)現(xiàn)，功能是越來越強(qiáng)大。一、CSS3邊框在css3中新增的... 繼續(xù)閱讀 >

2017
02-17

CSS通用數(shù)據(jù)類型

CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識(shí)別一個(gè)值是否有效，則需要確認(rèn)該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數(shù)據(jù)類型，在規(guī)范中用<this>的形式標(biāo)識(shí)。CSS中存在兩種數(shù)據(jù)類型——特定數(shù)據(jù)類型和通用數(shù)據(jù)類型。特定數(shù)據(jù)類型只與一個(gè)單獨(dú)的屬性或某一類屬性有關(guān)聯(lián)。例如，<transform-function>這一數(shù)據(jù)類型僅僅只能用作transform屬性的值。相反的，通用數(shù)據(jù)類... 繼續(xù)閱讀 >

2017
02-14

2017年值得學(xué)習(xí)的3個(gè)CSS特性

隨著新的一年到來，我們有一整套新的東西要開始學(xué)習(xí)。雖然今年的新特性有很多，但有3個(gè)新的特性是最令我激動(dòng)不已的。1.FeatureQueries前段時(shí)間，我寫過關(guān)于FeatureQueries的一篇文章，叫“我最想要的CSS特性之一”。好了，現(xiàn)在它已經(jīng)出現(xiàn)在這里了。它支持除了IE瀏覽器之外的所有主流瀏覽器（包括OperaMini）。FeatureQueries，使用這個(gè)@supports規(guī)則，允許我們包含CSS在一個(gè)條件塊，但只有當(dāng)前用戶客戶端支... 繼續(xù)閱讀 >

2017
01-17

原來CSS這樣寫是會(huì)讓app崩潰的

先廢話一下之前在自己的個(gè)人公眾號(hào)中提到了一篇利用CSS的方式進(jìn)行XSS攻擊，當(dāng)時(shí)有朋友跟我說，讓我去獲取那個(gè)網(wǎng)站的cookie，再然后進(jìn)入那個(gè)網(wǎng)站的后臺(tái)去玩。然而，技術(shù)能力實(shí)在有限，搞不了這些東西，只是覺得那個(gè)網(wǎng)站沒有適當(dāng)過濾HTML標(biāo)簽是一件很危險(xiǎn)的事情。不過今天要說的CSS代碼真的是讓app崩潰了，至于信不信，看圖就知道咯。故事背景昨晚在被窩中的我突然收到一封郵件，大概內(nèi)容是說因?yàn)?.. 繼續(xù)閱讀 >

2016
12-21

23條前端性能優(yōu)化，看懂就夠了！

 前端性能優(yōu)化是個(gè)巨大的課題，如果要面面俱到的說的話，估計(jì)三天三夜說不完。所以我們就從實(shí)際的工程應(yīng)用角度出發(fā)，聊我們最常遇見的前端優(yōu)化問題。Yslow是雅虎開發(fā)的基于網(wǎng)頁性能分析瀏覽器插件，可以檢測(cè)出網(wǎng)頁的具體性能值，并且有著名的Yslow23條優(yōu)化規(guī)則，這23條，就夠我們玩的了。1.減少HTTP請(qǐng)求次數(shù)盡量合并圖片、CSS、JS。比如加載一個(gè)頁面，如果有5個(gè)css文件的話，那么會(huì)發(fā)出5次http請(qǐng)求... 繼續(xù)閱讀 >

2016
12-21

前端程序員需要知道的7種新型的CSS長(zhǎng)度單位

眾所周知CSS技術(shù)我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們?cè)谛聠栴}出現(xiàn)的時(shí)候變得很不利。隨著web繼續(xù)不斷地發(fā)展，對(duì)于新技術(shù)新解決方案的要求也會(huì)不斷增長(zhǎng)。因此，作為網(wǎng)頁設(shè)計(jì)師和前端開發(fā)人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰(zhàn)不殆。這就意味著有那么些個(gè)特別的貨，雖然平常都不怎么會(huì)用上，但是一旦某個(gè)地方需要它們了，他們就真的是特么得合適不過來了呢。今兒，... 繼續(xù)閱讀 >

2016
12-14

css預(yù)處理語言的模塊化實(shí)踐

編寫css是前端工作中，一項(xiàng)普通而又頻繁的勞動(dòng)，由于css并不是一門語言，所以在程序設(shè)計(jì)上顯得有些簡(jiǎn)陋。對(duì)于小型項(xiàng)目來說，css的量還不至于龐大，問題沒有凸顯，而如果要開發(fā)和持續(xù)維護(hù)一個(gè)較為大型的項(xiàng)目，那就需要對(duì)css進(jìn)行管理和規(guī)范了，否則會(huì)發(fā)生不可挽回的后果（嚇唬誰呢？？）。背景上一節(jié)【從css談模塊化】我們通過規(guī)范的約束，將css的編寫方式進(jìn)行了優(yōu)化和改進(jìn)，形成一種可持續(xù)發(fā)展的路線。但還是遺留了一些問題：冗... 繼續(xù)閱讀 >

2016
12-14

從css談模塊化

模塊化是現(xiàn)今我們隨處都可以聽到的一個(gè)名詞，什么是模塊化？為什么我們需要模塊化？這是本系列文章我們要弄明白的一個(gè)問題。我們也借這部分內(nèi)容，順帶回顧一下前端的發(fā)展歷程。 說實(shí)話，模塊化這個(gè)主題有點(diǎn)大，我一時(shí)也不知道從哪里講起比較合適，通常來說，前端的工作內(nèi)容主要涉及三個(gè)方面：html、css、js（javascript），其他的像as（actionscript，flash的腳本語言）、jsp、smarty等等模版類的語法標(biāo)記我們?cè)诖司拖嚷匀?.. 繼續(xù)閱讀 >

2016
12-14

十分鐘入門 Less

我們都知道寫CSS代碼是有些枯燥無味的，尤其是面對(duì)那些成千上萬行CSS代碼的項(xiàng)目。你始終在相同的地方使用相同的規(guī)則并且在你的編譯器中搜索和替換每次顏色的變化。這需要很多的努力和規(guī)則來保持你的CSS可維護(hù)，但它本不應(yīng)該這樣的。 很幸運(yùn)，網(wǎng)站開發(fā)社區(qū)已經(jīng)解決了這個(gè)問題，現(xiàn)在我們擁有諸如Less,Sass和Stylus之類的預(yù)處理器，它們給我們提供了許多優(yōu)于純CSS的好處。變量-它可以讓你更輕松... 繼續(xù)閱讀 >

2016
12-14

CSS 高級(jí)布局技巧

隨著IE8逐漸退出舞臺(tái)，很多高級(jí)的CSS特性都已被瀏覽器原生支持，再不學(xué)下就要過時(shí)了。用:empty區(qū)分空元素兼容性：不支持IE8假如我們有以上列表：<divclass="item">a</div><divclass="item">b</div><divclass="item"></div>我們希望可以對(duì)空元素和非空元素區(qū)別處理，那么有兩種方案。用:empty選擇空元素：.item:empty{display:none;}或者用:not(:empty)選擇非空元素：.it... 繼續(xù)閱讀 >

2016
12-12

原生 CSS 網(wǎng)格布局學(xué)習(xí)筆記

譯者注：此文適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語法），原生CSS網(wǎng)格布局（NativeCSSgrid）截止目前還沒有被任何正式版本的瀏覽器實(shí)現(xiàn)。以下是來自O(shè)liverWilliams的帖子.Oliver已經(jīng)學(xué)習(xí)了相當(dāng)長(zhǎng)時(shí)間的原生CSS網(wǎng)格，可以說是在CSS網(wǎng)格方面有一定的發(fā)言權(quán)。在這篇文章中，他將以非同尋常的思路分析自己的CSS網(wǎng)格布局學(xué)習(xí)之路。我比較贊同他的想法，就是學(xué)習(xí)一門新技術(shù)的時(shí)候... 繼續(xù)閱讀 >

2016
11-29

CSS 各種定位（position）方式的區(qū)別

        static：靜態(tài)定位是position的默認(rèn)值，元素框正常生成，也就是沒有定位時(shí)的正常顯示。relative：相對(duì)定位用法一：元素相對(duì)自身的原位置偏移某個(gè)距離，但是原本的空間依舊保留，表現(xiàn)為空白。用法二：把一個(gè)元素設(shè)置為position:relative;可以使該元素的子元素相對(duì)該元素絕對(duì)定位。absolute：絕對(duì)定位元素從文檔流刪除，并相對(duì)于包含塊定位。元素... 繼續(xù)閱讀 >

2016
11-29

20個(gè)CSS 代碼建議

在這篇文章中，我想跟你分享20條由CSS社區(qū)推薦的約定和最佳實(shí)踐。有些建議可能比較適合新手，而有些則更高級(jí)一些，但我希望每個(gè)人都可以在本篇文章中收獲自己不知道的知識(shí)。1.謹(jǐn)慎使用外邊距屬性與其它的屬性不同，垂直方向上的外邊距相遇時(shí)將會(huì)發(fā)生折疊。這意味著如果一個(gè)元素的下邊距遇到了另一個(gè)元素的上邊距，那么二者中較大的一個(gè)將被留下。下面是一個(gè)簡(jiǎn)單的例子。<divclass="squarered"></div><divclass="squa... 繼續(xù)閱讀 >

2016
10-22

css 實(shí)現(xiàn)豎直居中的 N 種場(chǎng)景及 N 種方法

剛開始工作的時(shí)候，css里的豎直居中一直是個(gè)老大難問題。每次用到的時(shí)候都去網(wǎng)上搜，搜，搜，半天才搜到合適的解決方法。然后下次遇到，呃，又忘了~后來仔細(xì)回憶了一下，其實(shí)CSS實(shí)現(xiàn)豎直居中是有幾種不同的應(yīng)用場(chǎng)景的，需要分別使用不同的解決方法。這也是為啥每次都覺得，誒上次那個(gè)解決方法好像不行呢？（原來并不是我智商的問題）好了廢話不多說，記錄下遇到的不同場(chǎng)景及解決方法，希望能對(duì)自己或者別人有所幫助。inline或... 繼續(xù)閱讀 >

2016
10-22

理解并運(yùn)用 CSS 的負(fù) margin 值

本文樣式代碼采用SCSS。瀏覽器兼容性為IE6+。你的網(wǎng)頁中，不可能沒有使用過margin。大多數(shù)情況下，我們采用的都是正數(shù)的margin值，可能有時(shí)候會(huì)用到負(fù)的margin值。在我們的印象中，負(fù)的margin值就類似于瀏覽器的hack一樣，不被人接受。但是，本文要說明的就是，負(fù)的margin值并不是hack，這是正常范圍內(nèi)的寫法。Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specif... 繼續(xù)閱讀 >

2016
10-22

CSS中強(qiáng)大的EM

這篇教程將引導(dǎo)大家如何使用“em”來創(chuàng)建一個(gè)基本的彈性布局，從而學(xué)習(xí)其如何計(jì)算？又是如何使用“em”對(duì)層進(jìn)行彈性擴(kuò)展？又是如何擴(kuò)展文本和圖像等內(nèi)容？下在我們就一起帶著這些問題開始今天的“em”之行。什么是彈性布局？用戶的文字大小與彈性布局用戶的瀏覽器默認(rèn)渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在用戶瀏覽器下默認(rèn)渲染是“16px... 繼續(xù)閱讀 >

2016
10-17

CSS3 巧妙實(shí)現(xiàn)聊天氣泡

前一陣子敢玩的Mobile頁改版完成了，就之前的頁面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡(jiǎn)約的體驗(yàn)風(fēng)格，哈哈我不是設(shè)計(jì)師不過多評(píng)價(jià)啦。悄悄告訴大家所有的style都是我自己寫的。全站哦！！！下面說正題，說好的聊天氣泡呢？傳統(tǒng)的聊天氣泡什么又是傳統(tǒng)的聊天氣泡,直接上圖代碼如下<divclass="comment"></div><styletype="text/css">.comment{width:150px;height:35px;posit... 繼續(xù)閱讀 >

2016
10-17

七種css方式讓一個(gè)容器水平垂直居中 HOT

閱讀目錄方法一：position加margin方法二：diaplay:table-cell方法三：position加transform方法四：flex;align-items:center;justify-content:center方法五：display:flex;margin:auto方法六：純position方法七：兼容低版本瀏覽器，不固定寬高總結(jié)這種css布局平時(shí)用的比較多，也是面試題常出的一個(gè)題，網(wǎng)上一搜一大丟，不過還是想自己總結(jié)一下。這種方法比較多，本文只總結(jié)其中的幾種，以便加深印象。效果圖都為這... 繼續(xù)閱讀 >