读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都设置的内外边距。。。不确定是否必要，不过感觉还是设置的好，精确定位，毕竟有些默认的外边距。。是不一样的╮(╯_╰)╭。
...