前端 – Charles Note

CSS / margin 邊界重疊

如果你對你的網站有複雜的 CSS 設定時，你可能會發現一種狀況，就是前後兩個 block 元件的邊界會有重疊的狀況。前一個元件的下邊界 (margin-bottom) 會和後一個元件的上邊界 (margin-top) 重疊，只會保留兩個之中較大的那一個，這就稱之為邊界重疊 (margin collapsing)。不過有兩種例外狀況，當元件有設定 float 或 position: absolute 屬性，就不會產生邊界重疊的現象。會產生邊界重疊的狀況 ▍ 同一層的元件相鄰兩個位在同一層的 block 元件相鄰就會產生邊界重疊，margin 只會取其中最大的一邊。就像下面的範例，前後兩個段落之間的邊界最後只會有 40px。 First element Second element ▍ 父元素的邊界與第一個/最後一個子元素的邊界重疊當子元素的邊界與父元素的邊界重疊時，依然只會取最大的邊界。下面的範例當中，段落 (p) 是區塊 (div) 的子元素，父子元素間的上下邊界都有邊界重疊的情況。最終上邊界取子元素的 20px、下邊界取父元素的 80px。 <div style="margin-top: 15px; margin-bottom: 80px;"> this parameter...

Computer 電腦CSSFront-end 網頁前端ProgrammingTech 科技

CSS / 幫表格加入橫向捲軸，讓超出螢幕寬度的表格不會擠成一團

我們在網頁當中加入表格的時候常常會遇上一個問題，就是當表格的寬度已經超過螢幕的寬度要怎麼辦？尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性，但只設定這個屬性是不夠的，還需要對表格的加入以下屬性：首先要先讓 table 這個物件變成 block 物件，然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容，自動加入水平捲軸。最後是 white-space: nowrap 這個屬性，讓文字不會因為寬度自動斷行，除非內容真的有斷行 存在。這是另一篇文章 Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表有用到表格捲軸的範例： ▍ 關於上面三個 CSS 屬性的詳細說明可以參考 W3School 的說明： display: CSS display Propertyonferflow: CSS overflow Propertywhite-space: CSS white-space Property Copyright announcement:the featured image: Photo by The Journal Garden | Vera Bitterer on Unsplash

Computer 電腦Front-end 網頁前端Life Tech 生活科技Tech 科技

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

蘋果因為有 Retina 螢幕之後，我們想知道我們最後呈現在 Macbook 或 iPhone 畫面上的樣子都非常的麻煩，因為他有好多種解析度。例如我們在做手機的 UI 設計、網頁前端畫面、顯示在手機上的照片等等，都會需要注意到解析度的問題。大多數的狀況來說，幾乎目前的 APP 都不支援 Retina 的呈現，也就是說 Retina 高解析度的畫面輸出只支援少部分的軟體，像是系統原生的照片瀏覽 APP 在顯示照片、影片時就是以 Retina 的解析度在顯示的。而 Safari 或其他瀏覽器則都不支援 Retina，我猜原因應該是因為目前主流網頁的設計還是沒有以蘋果的 Retina 螢幕做設計，並竟還是有大多數非蘋果的用戶。所以在瀏覽器的設計上，蘋果還是維持原本傳統的解析度輸出。 iPhone iPhone 把畫面顯示到你的螢幕上總共會經過三個 (或四個) 過程，我們可以看到下表有三種解析度，其中最重要的是 Points，我們在做網頁設計或任何不支援 Retina 的 APP 時就會使用到這個解析度。 iPhone Points(logical resolution) Rendered Pixels(resolution) Physical Pixels 像素密度螢幕尺寸 2G, 3G, 3Gs 320 x 480 320 x 480...

CSSFront-end 網頁前端ProgrammingTech 科技

CSS / 透過 CSS 隱藏網頁上的元件方法，visibility: hidden 和 display: none 有什麼不同？

當我們想控制一個網頁上的元素要不要顯示出來，可以簡單地透過 CSS 的方式做到。隱藏元素的方式有兩種：visibility: hidden 和 display: none。這裡有個範例，我們想隱藏文章的標題。先看看原本網頁應該長的樣子： ▍ 隱藏元素但保留元素的位置 visibility: hidden 使用 visibility: hidden 這個屬性會使得元素不顯示在網頁上，但它卻會保留元素的空白位置。可以看到標題已經隱藏起來了，可是標題本身的位置也保留了下來，留下了一片空白。 ▍ 隱藏元素也不保留元素的位置 display: hidden 如果你想要把元素隱藏起來，連它的位置也不保留給它，就好像它完全不存一樣，那麼你就要使用 display: hidden 這個屬性。需要注意的是，雖然我們把元素隱藏起來，好像它整個被移除了。但是實際上它還是存在在網頁上的，只需要打開 HTML 原始碼就可以看到，我們只是透過 CSS 的方式去控制它現在顯示的外觀狀態。 Copyright announcement: the featured image: Computer photo created by freepik – www.freepik.com

Tag 前端