題目: 12.Integer to Roman
以下會分成幾點介紹
一般並不會把高度給固定寫死,否則當裡面的內容資料超出高度時,顯示出來的效果就會不如預期。
CodePen連結
.box1 給了一個固定的高度 height: 50px當裡面的文字數量超過他指定的高度時,就會有部分文字超出底色的範圍,這樣的效果並不是我們想要達到的。
在做響應式網頁時,float(浮動)是一個很必要的工具,它可以快速協助前端工程師進行排版。
如以下CodePen範例,當.box有設定float:left時,給予一個寬度30.33%,就會呈現自動排版的效果。以下有兩點要注意的是:
Position屬性的用法有四種:
這邊所使用的是Mayerweb的CSS Reset。
為什麼需要使用CSS Reset,因為不同的瀏覽器會預設幫你套用一些預設的樣式,例如整個網頁外框會幫你做margin、ul、ol會有預設樣式…等等。
這會導致在做網頁排版時會因為不同的瀏覽器而呈現出不同的樣式,為了避免出現類似相關問題,因此統一先將CSS預設樣式清空後,網頁就可以依照自己寫的樣式而呈現。