Python / 檔案目錄處理 (windows system)

Python / 檔案目錄處理 (windows system)

目錄 取得程式執行目錄 (current directory) 取得檔案大小 (Filesize) 確認檔案或目錄是否存在 刪除目錄下所有檔案 ▍取得程式執行目錄 (current working directory) ▍取得檔案大小 (Fileszie) 取得檔案大小的方法有三種,回傳的結果是位元組 (bytes) 使用 os.path.getsize(path) 使用 os.stat(path).st_size 使用 Path(path).stat().st_size (Python 3.4+) Reference Getting file size in Python? | stack overflow ▍確認檔案或目錄是否存在 在 os 套件中有三種相關的方法可以確認檔案或目錄是否存在: os.path.exists() 檢查檔案目錄是否存在 os.path.isfile() 確認路徑是否為檔案 os.path.isdir() 確認路徑是否為路徑 另外,在 Python 3.4 以上的版本可以使用 pathlibPath 套件: Reference Python Check If File...

CSS / margin 邊界重疊

CSS / margin 邊界重疊

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

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

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

我們在網頁當中加入表格的時候常常會遇上一個問題,就是當表格的寬度已經超過螢幕的寬度要怎麼辦?尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性,但只設定這個屬性是不夠的,還需要對表格的加入以下屬性: 首先要先讓 table 這個物件變成 block 物件,然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容,自動加入水平捲軸。 最後是 white-space: nowrap 這個屬性,讓文字不會因為寬度自動斷行,除非內容真的有斷行 <br> 存在。 這是另一篇文章 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

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

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