发表于: 2017-03-31 22:06:41

4 674


今天完成的事情:

做了任务八第一个页面的一半。
明天计划的事情:完成任务八,也相当于完成任务九的第一个页面
遇到的问题:

这个地方展开过后不会把下面的内容挤下去。百思不得其解。在问了同学过后才发现是因为我的导航栏部分固定了高度。展开过后高度还是会坍塌。

将宽度改为用padding撑开。不设置height值。
收获:下面部分的布局基本都是试用的boostrap框架的栅格。对栅格有深入的理解了。

学习了外边距重叠:两个或多个相邻的普通流中的块元素垂直方向上的 margin 会折叠

折叠是元素与元素间相互的行为,不存在 A 和 B 折叠,B 没有和 A 折叠的现象。一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻;只有在一个元素的 height 是 "auto" 的情况下,它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。

只有垂直方向的 margin 才会折叠,也就是说,水平方向的 margin 不会发生折叠的现象。

那么如何使元素上下margin不折叠呢?

1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
2.创建了块级格式化上下文的元素,不和它的子元素发生 margin 折叠。



返回列表 返回列表
评论

    分享到