讀Atlantis頁面有感。。

原創

冕妄

2020-02-21 19:07

這幾天，在看CSS禪意花園。昨天學習了Alantis和Zunflower，有新瞭解一些小知識，這裏記下來，免得忘記。。。。待完善。

1.Alantis

關於box模型。在學習的時候，遇到這麼一個問題：如果一個div裏嵌套了一個div，給外層的div設置一個背景，背景位置爲top，給內層的div設置內邊距（也就是設置了在外層div後下方的位置）後，預覽頁面，發現外層的div的背景差不多跑到了內層div的位置Σ(⊙▽⊙"a ！驚到我了o(╯□╰)o。後來發現，是因爲外層的div沒有設置padding的關係。。。即是默認情況。將其設置爲padding：1px 就ok了。。so why？想了又想。。勉強得出的結論是，如果外層沒有設置padding那麼，外層的cent就會根據內層（也就是外層的content）的位置來定位。內層的margin就會直接設置爲到外層的margin，而不是padding了。。┑(￣Д ￣)┍。有時間還需好好研究下box模型。。。=參考鏈接http://www.w3.org/TR/CSS21/box.html#collapsing-margins。
關於浮動。如果想左邊一個div，後邊一個div，可以左邊設置float：left。
ps“題外話：a）如果要設置左後定寬，中間自適應的形式，可以左後分別設置float：left和right。特別注意，中間位置的塊在寫html的時候要在後邊的塊後面寫。。。原因是div是塊級元素，如果寫在左邊div的後面，那中間的div就會佔據除左邊以外這一行剩下的所有位置。
居中。可變寬度的區域居中：margin:0 auto
關於定位：用margin，padding定位；用position定位；用float定位。
關於內外邊距，在學習的時候，我發現作者基本上把所有的div都設置的內外邊距。。。不確定是否必要，不過感覺還是設置的好，精確定位，畢竟有些默認的外邊距。。是不一樣的╮(╯_╰)╭。
...