iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
自我挑戰組

CSS、JS-30天研究筆記系列 第 2

【day2】關於CSS height高度屬性

今天分享一個height的特性與一個實用的文字編排設定!

一、關於height的百分比

  1. height:100%
    如果在一個div設置一張背景圖,並設置width:100% ;hight:100% ,
    會發現div的高度根本稱不開。這時需在html,body上設hight:100%,
    因為height的百分比值需要父級有一個可以生效的高度值才起作用。

  2. height:100vh
    vh(view height)指瀏覽器內部的可視區域高度的百分比,window.innerWidth/window.innerHeight
    上述例子問題也可以使用vh單位解決,不用在html,body上設hight:100%
    但是vh單位在IE8以下版本不支援。

二、視字數多寡自動居中/齊左對齊
需分二層架構,外層:text-align: center;內層:display: inline-block; text-align: left
當文字少於一行的时候居中顯示,文字超過一行居左顯示

三、 相關連結&參考內容:


上一篇
【day1】關於HTML塊級與行內元素以及CSSdisplay屬性
下一篇
【day3】關於CSS content屬性
系列文
CSS、JS-30天研究筆記31

尚未有邦友留言

立即登入留言