读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?
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/awkward.gif)
想了又想。。勉强得出的结论是,如果外层没有设置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),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
1.Alantis
关于box模型。在学习的时候,遇到这么一个问题:如果一个div里嵌套了一个div,给外层的div设置一个背景,背景位置为top,给内层的div设置内边距(也就是设置了在外层div后下方的位置)后,预览页面,发现外层的div的背景差不多跑到了内层div的位置Σ(⊙▽⊙"a !惊到我了o(╯□╰)o。后来发现,是因为外层的div没有设置padding的关系。。。即是默认情况。将其设置为padding:1px 就ok了。。so why?
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/awkward.gif)
想了又想。。勉强得出的结论是,如果外层没有设置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),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
相关文章推荐
- 将kerkee导入已有的工程里的方法
- VS2010如何进行调试项目更清晰
- LeetCode 288. Unique Word Abbreviation(单词缩写)
- MD5加密之加密字符串
- Pluzzes - Heavier ball
- 两种高性能I/O设计模式(Reactor/Proactor)的比较
- linux 获取文件大小
- 深入理解JavaScript没有重载的原因:
- HDFS源码分析之UnderReplicatedBlocks(一)
- c语言的学生成绩管理系统
- Android5.0系统的优缺点
- yii2查询数据倒序显示
- 掌握VS2010调试 -- 入门指南
- Go项目的目录结构
- 【算法】—-贪心算法(背包问题)
- MD5加密之提取文件的MD5特征码
- bitbucket 源代码托管
- 关于H5里的API,上传图片预览功能
- 第2章 操作系统的发展历史
- Tricks(三十七)—— C++ string类 split 的实现