Time of Update: 2017-02-28
word-wrap是控制換行的,可取:word-wrap:break-word normal break-all keep-allbreak-word:它主要用來是控制是否將強制把單詞換行,對於中英中文沒有任何問題,但是對於長串的英文無效。normal:英文單詞不被拆開,它是預設值。break-all,主要解決了長串英文的問題。主要用來是斷開單詞。在單詞到邊界時,下個字母自動到下一行。keep-all,是指對於中、日、單詞之間不斷詞。即只用此時,不用word-wrap,中文就不會換行了。(
Time of Update: 2017-02-28
z-index全解析Z-index屬性決定了一個HTML元素的層疊層級。元素層疊層級是相對於元素在Z軸上(與X軸Y軸相對照)的位置而言。一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。在一個HTML頁面中,自然的層疊順序(也就是元素在Z軸上的順序)是由很多因素決定的:具有負值的stacking
Time of Update: 2017-02-28
如何讓某個元素充滿整個頁面?方法: html,body{height:100%;margin:0;}#test{height:100%;}如何讓某個元素距離視窗上右下左4邊各10像素?方法: html,body{height:100%;margin:0;}html{_padding:10px;}#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:sta
Time of Update: 2017-02-28
說到css
Time of Update: 2017-02-28
1. 預設的內外邊距不同問題:各個瀏覽器預設的內外邊距不同解決:*{margin:0;padding:0;} 2. 水平置中的問題問題:設定 text-align: center ie6-7文本置中,嵌套的塊元素也會置中ff /opera /safari /ie8文本會置中,嵌套塊不會置中解決:塊元素設定 1、margin-left:auto;margin-right:auto2、margin:0 auto;3、<div align=&
Time of Update: 2017-02-28
用一行代碼來解決CSS在,IE6,IE7,IE8,IE9,IE10
Time of Update: 2017-02-28
就CSS本身而言,對於大多數Web前端從業人員來說就不是問題。學過CSS的人都知道,它不是一種程式設計語言。你可以用它開發網頁樣式,但是沒法用它編程。換句話說,CSS基本上是設計師的工具,不是程式員的工具。在程式員的眼裡,CSS是很頭痛的事情,它並不像其它程式語言,比如說PHP、Javascript等等,有自己的變數、常量、條件陳述式以及一些編程文法,只是一行行單純的屬性描述,寫起來相當的費事,而且代碼難易組織和維護。很自然的,有人就開始在想,能不能給CSS像其他程式語言一樣,加入一些編程元素,
Time of Update: 2017-02-28
你知道一些核心 jQuery 函數都有自己的“外掛程式API”稱為“鉤子”?jQuery 提供一個 API 來調用使用者自訂的函數,用於擴充,以便擷取和設定特定屬性值。在.attr,.prop(),.val()和 .css()的操作中都會引入鉤子,鉤子都有相似的結構。var someHook = { get: function(elem) { &
Time of Update: 2017-02-28
本文總結一下CSS中關於文字的相關屬性,最後給出執行個體。CSS基礎文字屬性文字的基礎屬性主要包括:字型、顏色和文本。除去顏色color的屬性外,字型和文本的相關屬性可以權威參考:CSS 文字屬性(Text)CSS 字型屬性(Font)CSS3新增屬性 文本陰影:text-shadow 文本溢出:text-overflow 這個屬性一般需要配合overflow:hidden和white-spance:nowrap(強制文本容器不換行)使用。
Time of Update: 2017-02-28
置中效果在CSS中很是普通的效果,平時大家所看到的置中效果主要分為三大類:水平置中、垂直置中和水平垂直置中。而其中水平置中相對於後兩者來說要簡單得多。早期總結了一下互連網上有關於水平垂直置中的幾種實現方案,比如說《CSS製作水平垂直置中對齊》中介紹了八中實現水平垂直的方案,而在《CSS製作圖片水平垂直置中》一文介紹了四種實現圖片垂直置中的方案,並且在《CSS3實現水平垂直置中》使用了css3的flexbox的屬性輕鬆實現多行文本水平垂直置中的方法。當然大家有可能認為這些方法對於瀏覽嘎嘎的相容性處
Time of Update: 2017-02-28
如果你是一名前端開發工程師,一般px和em使用頻率比較高。但是今天本文的重點是介紹一些我們使用很少、甚至麼有聽說的單位。一、重溫em<style type="text/css"> body {font-size: 12px;} div {font-size: 1.5em;}</style><body>
Time of Update: 2017-02-28
最近在做項目中發現很多CSS代碼裡面都使用!important去覆蓋原有高優先順序的樣式。按照常理來說,越是靈活的東西,需要做的工作就會更多。所以 想當然的認為像!important這樣靈活、方便的規則如果用得多的話肯定會對效能有所影響。基於這種考慮,本來想把所有的這些樣式通過提高優先順序給去 掉的。不過後來一想,還是去google一下吧,猜想一般都是不可靠的。於是查到了這篇文章Is !important bad for performance?。下面是大概意思:
Time of Update: 2017-02-28
我們在處理文章的內容的過程中由於文章內容混雜有中文、英文、數字等其他字元,而我們常見的英文和數字是無法在包裹元素中自動換行,這往往會導致元素被撐破,如下圖所示:css中word-break可以解決這個問題,寫個測試頁面來做個筆記css代碼: body{font-size:14px;} p{ border:solid 1px red;width:200px;}html代碼:<body> <p
Time of Update: 2017-02-28
“結構永遠服從於功能,這是不變的法則”,建築工程師“摩天大廣告之父”Louis
Time of Update: 2017-02-28
最近在項目中用到了很多的小tips,之前都是隨便找一套UI控制項拿過來用一下就算完事了,一直也沒有去管這個東西究竟是怎麼搞出來的,只是大概知 道這個東西怎麼實現的,但是一套UI畢竟是太大了,tips也就是那些UI的一些附屬品,沒必要這麼興師動眾,而且想想這些小玩意也都上樣式上的事情,就
Time of Update: 2017-02-28
置中是我們使用css來布局時常遇到的情況。使用css來進行置中時,有時一個屬性就能搞定,有時則需要一定的技巧才能相容到所有瀏覽器,本文就置中的一些常用方法做個簡單的介紹。註:本文所講方法除了特別說明外,都是相容IE6+、Google、Firefox等主流瀏覽器的。先來說幾種簡單的、人畜無害的置中方法1. 把margin設為auto具體來說就是把要置中的元素的margin-left和margin-right都設為auto,此方法只能進行水平的置中,且對浮動元素或絕對位置元素無效。2、使用
Time of Update: 2017-02-28
接觸css代碼也有一段時間了,談到最多的一般是css簡化,如何簡化css代碼,保證css特效發揮到極致的同時讓網頁載入速度最快。近日微軟向W3C全球資訊網聯盟提交了一個名為CSS Scrolling Snap Points(CSS網頁平滑滾動)的網頁標準提案。該網頁標準最早是基於IE10的API開發的,並在全新的IE11中作出了改進。該標準的設計主旨是為了讓觸控和鍵鼠裝置的網頁瀏覽體驗更加平滑和
Time of Update: 2017-02-28
應用DIV+CSS編碼時很容易犯一些錯誤。本文列舉了一些常見的錯誤 CSS+DIV是網站標準(或稱“WEB標準”)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標準中,不再使用表格定位技術,而是採用css+div的方式實現各種定位。應用DIV+CSS編碼時很容易犯一些錯誤。本文列舉了一些常見的錯誤: 1. 檢查HTML元素是否有拼字錯誤、是否忘記結束標記
Time of Update: 2017-02-28
其實DIVCSS是很簡單的一種布局方式,甚至比任何一種程式設計語言都要簡單(雖然它不能算是程式設計語言)。 DIVCSS是目前互連網網頁製作最熱門的方法,但對於完全手寫代碼,許多網頁設計師都望而止步。
Time of Update: 2017-02-28
一、特性表現one: 不能左右:empty偽類CSS3選取器中有個:empty偽類,表示當元素裡面什麼都沒有的時候(包括空格、標籤內換行),應用相關樣式。在現代web網頁開發製作中,非常常用也非常方便。例如,某元素類名是.box, 如下HTML和CSS:<div class="box"></div>.box { background-color: #cd0000; }.box:empty { background-color: #fae6e6;