使用 CSS Reset
CSS Reset 可以幫你在不同的瀏覽器上維持一致的樣式風格。你可以使用像 Normalize 這類的 CSS Reset 套件,或使用更簡潔的 CSS Reset 方法:
* { box-sizing: border-box;
margin: 0;
padding: 0; }
現在元素的 margin 和 padding 已重設,且 box-sizing 可以讓你透過 CSS Box Model 管理版面配置。示範
注意:如果你接著套用 繼承 box-sizing 這個技巧, 你或許不需要在你的 CSS Reset 中加入 box-sizing 屬性。
繼承 box-sizing
讓 box-sizing 屬性自動從 html 元素繼承下來 :
html { box-sizing: border-box; }
*,
*::before,
*::after {
box-sizing: inherit; }
如此一來,你就很容易的在其他外掛或元件裡改變 box-sizing 的值。
使用 unset 而不是重置所有屬性
當重置元素的屬性時,並不需要重置元素中每個屬性:
button
{ background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0; }
你可以用 all 來代表元素中所有的樣式屬性。 將該值設定為 unset 意味著將元素中所有樣式屬性回復到預設值:
button {
all: unset;
}
注意: 目前 all 屬性在 IE11 並不支援,而目前 Edge 瀏覽器則正在考慮支援。IE11 不支援 unset 用法!
使用 :not() 選擇器來決定表單是否顯示邊框
假設你用以下樣式先替元素新增邊框
/* 新增邊框 */
.nav li { border-right: 1px solid #666;
}
然後在最後一個元素去除邊框
/* 去掉邊框 */
.nav li:last-child { border-right: none;
}
不過你可以改用 :not() 偽類別 (pseudo-class) 來做到完全相同的效果:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
當然,你也可以用 .nav li + li,但是使用 :not() 可以使語句更加清晰,更具可讀性。示範
將 line-height 加入到 body 元素
你不必為分別為每一個 <p>、<h*> 元素加入 line-height 樣式,相反的,你應該直接新增到 body 元素:
body {
line-height: 1.5;
}
所有的文字元素預設就會繼承 body 的樣式。
將所有元素設定垂直居中
不!這絕不是黑魔法,這真的可以將所有元素設定垂直居中:
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
還想居中排版其他的東西?垂直居中、水平居中、... 任何事、任何時間、任何地點?CSS-Tricks 有篇不錯的文章 提到了各種居中排版的技巧。
注意: IE11 的 flexbox 有些怪怪的行為 要注意。示範
想知道更多的技巧,就動動手指連到以下網址去看看吧!! Let's go!!
網頁設計.RWD響應式網站 / 醫療衛生類
網站技術:PHP . Javascript/MySql
RWD響應式網站設計/網頁設計,網頁切版,後台程式管理
網頁設計.RWD響應式網站.活動網站 / 服務類
網站技術:PHP/MySql
配合振興劵而舉辦的抽獎活動,民眾可以透過「活動辦法」快速了解流程與獎品,點選「序號登錄」並確認抽獎資格後就可以等待開獎結果喔。 抽獎結束後若要確認是否有中獎,可以點擊選單的中獎名單來確認。
網頁設計.RWD響應式網站 / 教育人文類
網站技術:PHP/MySql
提供免費的平台註冊成為師傅,教授專業技能與知識;成為會員尋找自己喜歡的師傅,購買教學課程。這裡不僅可以購買課程,甚至也能上架的自己的課程,推出更優質的課程造福許多會員。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策