发表于: 2019-01-17 19:02:51
1 756
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
学会了如何引用 Bootstrap,并且做出了轮播图的效果,
什么是外边距重叠?重叠的结果是什么
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一外边距甚至可以与自身发生合并。 假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并。
个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
如果这个外边距遇到另一个元素的外边距,它还会发生合并
外边距合并的意义:以由几个段落组成的典型文本页面为例。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
外边距有哪些属性?
margin-top 上外边距 margin-right 右外边距
margin-bottom 下外边距 margin-left 左外边距
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
什么是外边距?
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
div+css的布局较table布局有什么优点?
div+css布局的好处:
1.符合W3C标准,代码结构清晰明了,结构、样式和行为分离,带来足够好的可维护性。
2.布局精准,网站版面布局修改简单。
3.加快了页面的加载速度(最重要的)。
4.节约站点所占的空间和站点的流量。
table布局的好处:
1.容易上手。
2.可以形成复杂的变化,简单快速。
3.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。
margin负值在页面布局中有哪些应用?
1、对于自身的影响
当static(非浮动、非定位)元素的margin-top/margin-left被赋予负值时,元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。
如果没有设定width属性,设定负margin-left/right会将元素拖向对应的方向,并增加宽度,此时的margin的作用就像padding一样。
2、对文档流的影响
元素如果用了margin-left/margin-top时,元素自身会被拉向左/向上进行偏移,效果类似与position:relative。与之不同的是,在其后面的元素会补位,也就是后面的行内元素会紧贴在此元素的之后。
元素如果用了margin-right/margin-bottom时,元素视觉位置不变,但其后(下面/右边)的元素会被拉向此元素,相对此元素进行偏移并覆盖此元素。
对浮动元素的影响
负margin会改变浮动元素的显示位置,即使元素写在DOM的后面,也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的,都是利用这个原理实现的。
4、对绝对定位的影响
对于绝对定位元素,负margin会基于其绝对定位坐标再偏移
MARGIN负值是否会改变元素的宽度?
这取决于是否给了元素宽度,如果已经给了元素宽度,那么margin负值不会影响元素的宽度,如果没有给元素宽度,那么margin会影响元素的宽度.
明天计划的事情:(一定要写非常细致的内容)
继续完成任务八的布局,
看看响应式
遇到的问题:(遇到什么困难,怎么解决的)
暂无
收获:(通过今天的学习,学到了什么知识)
同今天完成的事情
评论