[CSS]切版基礎Part3

Images的排列 ,Cover Info,Position補充 & box-sizing

Images成一行

與先前文字column很像，一樣要一圖片數做width的切割。如兩個column，width是50%(100/2)，三個column是33.33%…。

要做到的成品圖為：

三張圖排列成一行

1. 寫html
2. 設CSS

html/CSS

Cover Info

當滑鼠游標移到圖片上方時，能顯示文字或其他內容。

欲作出下方最左的完成圖：

步驟：

1. 在圖片work區塊中，多一個info區塊包圍button和文字元素。
2. CSS屬性和上面差不多，只是多了info及work多了一個position屬性的relative值。

＊info設置position: absolute;後，在work加上position: relative;變成info位置的起始點。為了讓info大小與work貼合，加上width: 100%;和height: 100%。再加上text-align: center;與padding-top: 100px;去做info元素的位置調整。

＊info使用background-color: rbga(0,0,0,.3)讓info具有透明度。使用opacity: 0;讓游標未移上前，為看不見的狀態；在info:hover加上opacity: 1;讓游標移上圖片，顯示info內容。:hover意思是游標移上後。

Position

1. static-靜止的。為position的預設值。自然文章流動，位置無法調整。
2. relative-相對的。對應原本出現的位置，去做位置上的調整，如往上、往左、往右等等。能調位置的static，像static一樣以文章流動做排列，由上至下、由左至右，但能調位置。
3. absolute-絕對的。不管其他元素，只以有設置過position的父層做位置起始點的依據，若父層一直往上都沒有元素設置position，則absolute最後以body做依據。static因為是預設值，所以不算有設置position。通常以relative即absolute為搭配的容器。
4. fixed-固定的。將會一直黏在畫面上。起始點就是整個可以看到的視窗畫面，不管網頁怎麼動，都會在畫面固定的位置上，如導覽列一直在最上層。

box-sizing: border-box;

通常“內容”指的是-border+padding+text。

當設計師說內容要200px，border10px，padding20px，則需要自己算出text為140px，如下圖左。

但現在能使用box-sizing: border-box;讓CSS以border為準，讓內容符合設置的200px，如下圖右。這時，CSS會自己算出text的width為140px，而不需要我們自己算。

box-sizing有兩種值，一為content-box(已內容為主，就是上面要自己算的那種，為預設值)，一為border-box(以border為界線)。

上面遇到cover info若直接設置三張圖片時，info貼上work時，會因為work有padding，而使info無法直接貼合work。