您的位置:首页 > 其它

读Atlantis页面有感。。

2016-04-15 14:19 176 查看
这几天,在看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都设置的内外边距。。。不确定是否必要,不过感觉还是设置的好,精确定位,毕竟有些默认的外边距。。是不一样的╮(╯_╰)╭。
...
补充:第一个点弄清楚了终于,详情参见:http://www.hicss.net/do-not-tell-me-you-understand-margin/

        首先,这是一个外边距合并问题,如果2个垂直外边距相遇,它们会合并,长度取较大者。其次,有个规范:1个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: