Int's blog

background是用來設定元素背景的屬性，除了常見的直接給予背景一個顏色，也可以給予一張圖片來做為背景，接著就會來介紹背景的各種屬性。

語法

background

1
2
3

.box{
	background: #fff, url(...), ...;
}

background所有屬性的縮寫，關於background的值都可以寫在這裡。
在寫的時候可以用 , 分開，用逗號隔開的一段會視為一次設定，後面的會蓋在前面的上面。

background-color

1
2
3

.box{
	background-color: #fff;
}

為背景設定單一顏色。

background-image

1

background-image: url(...);

為背景設定圖片，圖片會使用url語法來載入外部的圖片，可以同時載入兩張以上的url，也可以使用linear-gradient和linear-radius。

• 文章傳送門

background-repeat

1

background-repeat: no-repeat;

background-reapet會出現在當背景圖片無法填滿整個元素時，會依照設定的值以重複出現圖片的方式來填滿元素

• 文章傳送門

background-position

1

background-position: top;

可以設定背景圖的位置，可以使用top、bottom、left、right、center、數字、百分比、與各種單位來設定

• 文章傳送門

background-size

1

background-size: contain;

一般來說背景圖片不可能剛好符合元素大小，用size可以調整背景圖片的大小與圖片會從哪裡開始延伸。

• 文章傳送門

background-origin

1

background-origin: border-box;

可以設定背景圖的起始位置，是從邊界開始算，還是從邊界裡面開始算都可以用這個設定

• 文章傳送門

background-clip

1

background-clip: border-box;

可以設定背景會延伸到哪裡，延伸到邊界停止、到邊界底下、或是留白，與origin有點相似

• 文章傳送門

background-attachment

1

background-attachment: scroll;

設定背景與viewport(滾動畫面時所能看見的範圍)的關係

• 文章傳送門

有時候會有元素太大導致超出父元素的問題，這就叫做overflow(特別容易發生在有設定高度的元素中)，以下面為例:

可以看到文字超出了parent

通常的作法是不設定高度，讓元素按照內容去伸展高度，但如果說我今天就是希望這個元素這麼高，這時候就可以使用overflow這個屬性

Overflow

• visible

1
2
3

.box{
	overflow: visibile;
}

預設值，呈現效果等同上面的例子。

• hidden

將overflow的元素藏起來

1
2
3

box{
	overflow: hidden;
}

可以看到多餘的部分都消失在元素內了。

• scroll

1
2
3

.box{
	overflow: scroll;
}

讓子元素保持在父元素內，可以用上下左右滾動的方式看到超過的部分。

• auto、overlay

  1 2 3

  .box{ overflow: auto; }

讓子元素保持在父元素內，和scroll不同，只能用上下滾動的方式看到超過的部分。
而overlay和auto相同，只是不同瀏覽器支援不同語法。

max-width和min-width可以為元素設定最大寬度與最小寬度，讓元素的寬度不會被width的值所限制。

語法

1
2
3
4
5
6
7

.box1{
	max-width: 50px;
}

.box2{
	min-width: 10px;
}

max-width

元素的寬度不會超過max-width所設定的值

min-width

元素的寬度不會小於min-width所設定的值

結語

這幾次寫作業為了讓寬度達到跟設計稿相同高度很常使用到max-width，一來是寬度最大就是那樣，二來會有簡易的RWD，相當好用。

這兩個屬性通常會一起出現，所以這邊把他們放在一起介紹，讓我們先從absolute開始看起。

absolute

1
2
3

.box{
	position: absolute;
}

absolute屬性會讓元素從document flow上移除，講的白話一點，就是網頁上的其他元素會無視這個元素，所以就會出現元素重疊，而這個absolute元素的位置可以透過top、bottom、left、right屬性來設定，這四個屬性的相關介紹可以看這裡

可是他的位置是從哪裡算起的呢？答案是上一層並且有設定position的元素(除了position: static)，如果沒有那就會默認為起始的容器(通常都是body)

以下面這個例子來看(建議以0.25x觀看)，黃色方塊會跑到最底下，因為我將bottom設置為0，同時他上面的父元素並沒有設置position，所以默認會用body來做計算。

relative

這時候如果想讓黃色方塊留在藍色方塊中，又不希望藍色方塊的位置跑掉，就可以使用position: relative

1
2
3
4
5
6
7

.parent-box{
	position: relative;
}

.child-box{
	position: absolute;
}

設置了relative屬性的元素也可以透過top、bottom、right、left四個屬性來設定位置，基本上就與static相同，所以relative可以說是為了absolute而存在的。

從下面的例子就可以看到，我在藍色方塊設置了position: relative; 所以黃色方塊就被固定在藍色方塊的底部。

結語

absolute與relative算是很常用在元素內的排版，特別是有圖文的樣式，之前寫作業的時候也有用到，不過一開始我沒想到可以用absolute和relative，還在那邊用background image XD ，下次我就會記得了。

sticky像是結合了fixed和relative，有position: sticky的元素會像fixed一樣被固定在畫面上，但並不會超出父元素，一旦父元素超出畫面，sticky元素也會跟著消失在畫面上。

語法

1
2
3

.box{
	position: sticky
}

範例

從範例中可以看到第二個sticky-box一旦碰到橘色的部分(另一個div)就不會固定在畫面上，而是會消失，至於sticky-box的位置，一樣可以透過top、bottom、left、right來控制，這部分在position: fixed有介紹過，用法是相同的。(傳送門)

結語

sticky雖然好用，但要注意他是比較新的語法，部分瀏覽器可能無法支援(特別是IE)，可以透過caniuse來查詢是否支援。

一般排版的時候都是調整元素在網頁上的位置，也就是x、y軸，那如果想做出元素重疊時，要調整上下層就要調整z-index。

z-index的數值可以自己自訂(你想寫10000也沒人阻止你，但不見一這樣做，程式碼很難維護)，但都遵循一個原則，數字越大越上面。

語法

z-index的值分成兩種，一個是數字另一個是auto，如果設成auto就會自動安排z-index，莫認為越下面z-index越大，元素也越上層；如果不寫z-index預設值為0。

1
2
3
4
5
6
7

.box1{
	z-index: 0;
}

.box2{
	z-index: auto;
}

範例

可以看到除了auto，z-index的數字是越大越上層，auto的部分則是按照順序安排權重。

結語

當然，你會看到我都有用到position，因為有使用到position才會出現元素重疊的情形，這時候z-index就是個好用的東西，好好運用就可以排出好看的排版。

很常會看到有些網頁的NavBar會跟著畫面滾動並停留在最上方，並不會因為畫面向下拉而消失，又或者是有些在最左下角的回頂端(如圖)

想要實現這種功能就必須使用到 position: fixed

語法

1
2
3

.box{
	position:fixed;
}

舉例

在上面的codepen中可以看到我在navbar中下了position:fixed;，所以當你滾動畫面時粉紅色navbar會一直固定在畫面上。

top bottom left 和 right

但要注意，只寫position:fixed並不能將navbar固定在畫面最上方，你可以自己試試看，會發現他和上面有一些距離，所以這時候就要使用top。

透過top、bottom、left和right可以設定fixed元素的位置，以上面的codepen例子來說，top: 0;指的就是距離畫面頂端為0，所以會固定在畫面最上方，同理將其他值設成0就會與左邊右邊或底部沒有距離。

當然也可以設置成別的數值，px就是距離那個屬性的位置有幾個px，設定成%的話，假設是top:50%; 就會固定在由頂端往下50%的地方。

小結

fixed可以製作navbar等會固定在畫面上的元素，與fixed相似的還有sticky和relative，關於他們可以參考我的其他篇文章。

position可以用來安排元素的位置，包含讓他們重疊或固定於網頁某個地方都能用position來實現，這篇會來介紹position的各種值以及和position相關的其他屬性。

不過因為有些屬性內容比較多我會改成用連結文章的方式，並且之後這幾天都會寫和positon相關的主題，之後再彙整過來。

position屬性

1. static:

   • 預設值，在static上不會有任何元素重疊。

     1 2 3

     h2{ position: static; }

2. absolute、relative:

   • 這兩個雖然分別是不同屬性但基本上都會一起使用。
   • 介紹文章傳送門

     1 2 3 4 5 6 7

     .parent-box{ position:relative; } .child-box{ position:absolute; }

3. fixed:

   • 可以將元素固定在網頁上，不論如何滑動頁面元素都不會消失。
   • 介紹文章傳送門

     1 2 3

     h2{ position: fixed; }

4. sticky

   • sticky比較像fixed + relative，可以讓子元素固定在畫面上，滾動時又不會超出父元素。
   • 介紹文章傳送門

     1 2 3

     h2{ position: sticky; }

其他元素定位相關屬性

float

• 常用於文字與圖片，可做出文繞圖的樣式。
• 介紹文章傳送門

z-index

• 可調整網頁z軸(也就是圖片與元素的重疊和上下關係)
• 介紹文章傳送門

float是一種可以讓元素漂移的屬性，用法很像word中常用的文繞圖，所以float也比較常應用在文字與圖片的排版，元素與元素間還是比較常使用flex box。

語法

1. none:

   1 2 3

   .box{ float: none: }

   不使用float，預設也是這個。

2. right

   (推薦使用0.5x觀看) 可以看到圖片會飄到右邊，文字則是繞著圖片下來。

3. left

   (推薦使用0.5x觀看) 可以看到圖片會飄到左邊，文字和right一樣繞著圖片下來。

4. inline-start

元素會從容器的開頭，也就是上一個元素的最左邊開始延伸。

5. inline-end

元素會從容器的結尾，也就是上一個元素的最右邊開始延伸。

小結

其實inline-start跟inline-end看起來根本一樣，我還是有點搞不清楚它們差在哪裡，試了不同的排版方式他們看起來還是一樣，如果有人知道他們到底差在哪裡希望可以告訴我。

CSS中每個規則、標籤會有不同的權重，所以對相同標籤下不同規則會互相覆蓋，而誰覆蓋誰就是由權重決定。所謂的Specificity(優先級、權重)就是瀏覽器用來決定權重的算法。

權重排序

含有!important的規則 > 直接寫在html上的style屬性 > ID選擇器 > 類別、偽類別、屬性選擇器 > 標籤、偽元素選擇器

順序也會影響權重

css的寫法是由上而下，除了標籤本身的權重(上述所示)，在css檔案中的排序也會影響權重，越下方的權重越大，但順序的影響力並沒有原本權重排序來的大，所以ID選擇器就算寫在上方也不會被類別選擇器蓋掉，要特別注意

關係選擇器可以看成加法

以最常見的後代選擇器來說

1
2
3

.box h2{
	....
}

這種就可以理解為 10 + 1的權重，會比單純的.box權重來的高，即使.box的選擇器寫在他的下方也一樣。