2018
05
11

CSS 專家密技[轉載自 AllThingsSmitty Added pointer-event tip ]

關鍵字:網頁設計CSS

使用 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!!

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所