純 CSS 垂直及水平置中 – 超簡單一段搞定

在被垂直居中元素父類別,加這一段就可以,非常簡單

HTML

CSS

檢視結果

See the Pen Vertical and horizontal center by VECTOR.cool 威得數位
(@ann71727) on CodePen.

CSS 5種垂直置中方法

CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)

以CSS為中心:完整指南

[……]

閱讀更多

CSS3 鏡射

<style>

/* 水平鏡射 */
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}

/* 垂直鏡射 */
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
}

</style>

 [……]

閱讀更多

html IE
tag 出現詭異方框

客戶反映在IE結尾都有奇怪的框框,原來還有人在用IE阿?

好吧!想辦法解決

原本以為這是邊框,所以天真的想說CSS加個  border:none  就解了,果然是我太天真,完全沒動!!

Google 一下,這似乎跟網路字型的Bug有關,使用下方的 CSS 就解囉

 
/* https://vector.cool */
/* 消除 IE <br> 的詭異框框 */

br {
    font-family: unset !important;
    font: unset !important;
}

下圖,詭異的框框都不見了。

[……]

閱讀更多

CSS 強制換行及強制不換行、強制全部、單詞、單字

介紹三種換行方式

<style>

/* 強制不換行 */
div{
	white-space:nowrap;
}

/* 強制斷行 (英文單詞) */
div{
	word-wrap:break-word;
	word-break:normal;
}

/* 強制英斷行 (英文單字) */
div{
	word-break:break-all;
}

</style>

 [……]

閱讀更多

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。[……]

閱讀更多

CSS Calc運算

終於是等到這個功能了,CSS3增加了Calc()這個function進行數值運算,大部分用於容器寬度或高度的計算,這讓CSS的開發更快、靈活度更高並增加重複使用的可能性,Calc()還有一個很棒的優點,可以針對不同單位進行運算。

支援運算:

+


*

/

CSS Calc運算

下方範例可以得到欄位寬度,可用來製作自己的網格系統

.column-1 {
  width: calc( 100% / 1);
}

.column-2 {
  width: calc( 100% / 2);
}

.column-3 {
  width: calc( 100% / 3);
}

 不同單位運算

#element1 {
  width: calc(50% - 2em);
}

參考資料:

[……]

閱讀更多

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ,雖然jQuery跟CSS選取器(selector)有很多相似之處,但還是有些差異,在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定Apple 的樣式為紅色:

<div>
    <div id="bar1" class="foo">banana</div>
    <div id="bar2" class="foo">Apple</div>
    <div id="bar3" class="foo">Orange</div>
</div>

我們可以這麼做,都可以達到相同效果:

#bar2{
	color:red;
}
div.foo:nth-child(2){
	color:red;
}
.foo:nth-child(2){
	color:red;
}

同場加映

除了:nth-child()還有其他用在取得元素的偽類,都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料:

[……]

閱讀更多

CSS RWD 響應式斷點 @media 及常用尺寸速查

我常用的方法

這作法雖有違背行動優先的概念,但我實務上遇到比較多還是先做電腦版,再依照電腦版樣式改成手機版本,概念歸概念,能能解決問題的就是好方法,提供大家參考

行動優先-響應式斷點

介紹完我常用的斷點,也介紹一下比較正規的做法,下列這就是行動優先下的響應式斷點,先決定手機版樣式,再針對平板或電腦的樣式進行調整

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

Bootstrap 4 – RWD Layout

這是Bootstrap定義的斷點

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

WordPress Elementor CSS breakpoint

Refrence: https://v123.tw/wordpress-elementor-css-breakpoint/

[……]

閱讀更多