CSS

這篇文章主要為大家介紹margin 負值引起的層級（z-index）問題的解決方案，需要的朋友可以參考下先來看這麼一段代碼： 複製代碼代碼如下:<p style="height:100px;width:200px; border: solid 1px black; "> <p style="background-color:Red;margin-top: -5px "

簡寫的最大好處就是能夠顯著減少CSS檔案的大小，最佳化網站整體效能，更加容易閱讀，下面為大家介紹下CSS簡寫規則，喜歡最佳化的朋友可以參考下，希望對大家有所協助CSS簡寫就是指將多行的CSS屬性簡寫成一行，又稱為CSS代碼最佳化或CSS縮寫。CSS 簡寫的最大好處就是能夠顯著減少CSS檔案的大小，最佳化網站整體效能，更加容易閱讀。 下面介紹常見的CSS簡寫規則： 一、盒子大小 這裡主要用於兩個屬性：margin和padding，我們以margin為例，padding與之相同。

隨著自己寫過的頁面的增多，也遇到了很多CSS相容性的問題。這些相容性問題，都是必然的，因為技術在不斷進步，那麼為了不被淘汰，我們就要做些相容性處理。這篇文章主要介紹了CSS中flex的相容,需要的朋友可以參考借鑒，下面來一起看看吧。前言我寫頁面的時候用到過很多的flex布局，覺得非常好用。下面附上一篇不錯的flex布局介紹的文章。 Flex

CSS3之前我們可以對背景添加一張圖片 CSS3允許我們在一個元素上添加多個圖片多重背景圖片<p class="demo"></p>.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}多重背景可以把多個圖片資源添加到background屬性上，用逗號隔開

CSS3允許我們使用自訂字型 也多了一些不錯的文字效果自訂字型使用自訂字型需要使用@font-face規則 當然首先你要有自訂文字檔案<p class="demo">Payen S.Tsung</p>@font-face { font-family: myDIYfont; /*自訂字型名*/ src: url('Ginga.ttf'); /*字型檔*/}.demo { font-family:

CSS3之前漸層色圖片只能用背景圖片 CSS3的漸層色文法可以讓我們省去下載圖片的開銷 並且在改變瀏覽器解析度時有更好的效果顏色值RGBA我們熟悉的rgb顏色標準，是由r（red）、g（green）、b（blue）三種顏色疊加變化形成各種顏色 取值0~255，或0~100% rgba就是在rgb基礎上增加了alpha不透明度參數.demo { width: 100px; height: 100px; background-color: rgb(255, 0,

今天開始整理CSS3的知識 其實應該是昨晚寫的，不過好像是急性腸胃炎了，痛的一晚上沒睡著，藍瘦香菇 還好今天打點滴睡一覺就好了，看來這吃東西還是注意點好，被我的胃腸報複了 CSS沒什麼難的，不過看的同時自己要在瀏覽器上試一試，試一遍就記住了 光看不做白看CSS3各個瀏覽器是存在相容問題的 不同瀏覽器有不同首碼的私人屬性，表示屬性或規則還沒有成為標準 換句話說，官方還沒公布標準的時候，各個瀏覽器已經偷摸實現了 但是真正標準未來不一定是什麼樣子，怎麼辦，那就加首碼吧 雖然現在新版本瀏覽器不用加首碼，

CSS3新增了很多強大的選取器 它可以讓我們少寫一些js事件指令碼 我們先來看看各個版本的選取器有哪些 註： ele代表element元素 attr代表attribute屬性，val代表value屬性值 :xxx都屬於偽類別選取器，::xxx都屬於虛擬元素選取器

我昨天寫三維正方體的時候，就用到了動畫的文法 今天就來系統複習一下 過渡transition有著它的局限性 雖然簡單，但是它只能在兩個狀態之間改變 並且它需要事件的驅動才能夠進行 不能夠自己運動 所以為瞭解決這樣的問題 我們需要animation動畫動畫若想實現動畫效果 僅僅有animation屬性是不夠的 我們還需要@keyframes規則 先來看一個例子p class="demo"></p>.demo { width: 100px;

過渡動畫是動畫的基礎 在學習動畫屬性之前 我們需要先瞭解過渡屬性transition過渡transition先來看一個小例子<p class="demo"></p>.demo { width: 100px; height: 100px; background-color: royalblue;}.demo:hover { width: 200px;}這樣當我的游標懸浮在demo的一瞬間 它的寬度變成了200px

這兩天寫的都是小知識點 因為確實有點忙 雖然很簡單，但是本著全面總結的原則，還是要說一下 今天我來說一下這個CSS中的盒模型 以及CSS3中可以改變盒模型的屬性盒模型盒模型是計算元素尺寸的模型規則 在我們CSS中盒模型分為兩種W3C標準盒模型正常情況下我們用的都是這個標準的盒模型 標準盒模型中元素尺寸使用如下計算方式 元素實際寬度 = width + padding（左右內邊距大小） + border（左右邊框大小） 元素實際高度 = height + padding（上下內邊距大小） +

CSS3中增加了可以實現多欄版面配置的屬性 在此之前的實現很麻煩可能需要各種定位 現在我們只需要一個屬性就可以實現 多欄版面配置類似於我們的報紙布局 這樣可以方便讀者觀看多列數量與多列寬度如果一行文字太長的話，我們可能會沒有讀下去的慾望像這樣<p class="demo">......</p>.demo { width: 600px; height: 200px; border: 1px solid

CSS3的形狀變換允許我們對元素展開、縮放等等 這篇我主要談下一2D平面變換 屬性transform可以進行變換 transform就是變形的意思 並且它主要通過函數來使用，有以下函數translate() 平移變換ratate() 旋轉變換scale() 縮放變換skew() 傾斜變換matrix() 矩陣變換transform-origin則時定義變換的中心平移變換translatetranslate()兩個參數，第一個是x軸相對位移，第二個參數是y軸相對位移.demo { .....

利用我們的CSS3實現響應式布局 僅僅有彈性盒還不夠 CSS3還擴充了media屬性，增加了一個模組功能 Media Queries媒體查詢功能媒體查詢引入隨著移動端的快速普及 越來越多的使用者使用智能機、平板電腦等瀏覽頁面 所有考慮到使用者的需求 我們要保證使用者在各種裝置上瀏覽頁面都有不錯的體驗 這樣我們就需要媒體查詢 它允許我們為不同的裝置或者不同條件的裝置設定不同的樣式 不過如果移動端有很重要的需求 還是應該針對移動端開發專門的頁面比較好

頁面配置一直都是web應用樣式設計的重點 我們傳統的布局方式都是基於盒模型的 利用display、position、float來布局有一定局限性 比如說實現自適應垂直置中 隨著響應式布局的流行，CSS3引入了更加靈活的彈性布局模型flex彈性布局使用彈性布局可以有效分配一個容器的空間 即使我們的容器元素尺寸改變 它內部的元素也可以調整它的尺寸來適應空間 若想讓一個元素變成彈性盒 很簡單.demo { /*區塊層級元素*/ display: flex;}.demo { /*行級元素*/

可能我們在看一些網頁的源碼時 會發現自己從來沒見過的屬性或用法 今天我就來總結一下 CSS3的冷知識 樣式計算在CSS中也可以進行簡單的計算 通過calc函數可以實現 這樣還可以使我們的元素自適應 當然計算的值應該是合法的值.demo { ... width: calc(100% - 500px); height: 200px;}這個demo中，元素的寬度值是父元素寬度減去500像素 如果父元素是body

CSS中偽類與虛擬元素的概念是很容易混淆的 今天就來談談偽類與虛擬元素之間的區別定義首先先來看看偽類與虛擬元素的定義 w3c中對於它們是這麼解釋的偽類：用於向某些選取器添加特殊的效果虛擬元素：用於將特殊的效果添加到某些選取器講道理，可能我語文不好，我覺得這兩句話是等價的 :-) 根本不能看出有什麼區別 都是對某些選取器“加特技”標準有這麼一句話翻譯過來是這樣的CSS

這篇文章主要介紹了使用HTML5和CSS3表單驗證功能,需要的朋友可以參考下用戶端驗證是網頁用戶端程式最常用的功能之一，我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是相容性的問題還有就是樣式太醜陋了吧。下面我們將來一步一步創造一個HTML5和CSS3的表單驗證，只使用HTML和CSS。完成後的如下：第一步：整理驗證欄位和類型首先我們需要如下幾個欄位：姓名(full name)電話號碼(phone

這篇文章主要給大家介紹了利用CSS3虛擬元素實現逐漸發光的方格邊框的相關資料，文中給出了詳細的範例程式碼供大家參考學習，對大傢具有一定的參考學習價值，需要的朋友們下面來一起看看吧。本文介紹的是一個使用虛擬元素來實現邊框逐漸發光的代碼，主要用到scale和opacity這兩個屬性。下面來看看詳細的介紹：如下：HTML代碼：<p class="light"> <img src="http://tva2.sinaimg.cn/crop.0.0.180.1

本篇文章主要介紹了CSS3實現任意圖片lowpoly動畫效果執行個體，這是一個利用CSS3的動畫屬性實現的結合lowpoly（低多邊形風格）的效果，主要利用了CSS3 transform屬性的rotate旋轉，translate移動，scale縮放這是一個利用CSS3的動畫屬性實現的結合lowpoly（低多邊形風格）的效果，主要利用了CSS3 transform屬性的rotate旋轉，translate移動，scale縮放，CSS代碼部分非常簡單，唯一有趣的是