布局问题

1、外边距重叠——若两个元素上下毗邻且都定义了不为0的外边距值,同时又没有任何内边距、边框等设定,那么这两个元素之间的距离将小于二者外边距的和。因此,两个都带有20px外边距垂直拼接不会显示出40px的缝隙——最终元素之间的距离只有20px。

对于都为正数的两个外边距定义来说,两个元素之间的距离位二者外边距距离中较大的一个,即外边距要尽可能的重合。

2、假定三个div元素有着同样的宽度,且水平对齐,div两两之间有一条水平缝隙

原因:重叠效果将同时作用于父元素和子元素之上——由于div都没有设定外边距,因此每个div的底部外边距将与其最后一个子元素的底部外边距重叠。因为总共的外边距值并不为零。比方说子元素的10px外边距仍然要被算进去,看上去就是子元素“戳开”了包含它的div父元素。

解决方法:为div添加1px的垂直内边距(padding :1px 0),不再满足形成外边距的条件,div之间的缝隙就消失了 。

3、元素居中——将元素的margin-left和margin-right属性设置为auto,必须为该容器指定固定宽度。

负外边距解决方案:首先创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边缘50%的位置。这样,该容器的左外边距将从页面50%宽度的位置开始算起。

例如:

#container{

background:#ffc url(mid.jpg) repeat-y center;

position:absolute;

left:50%;

width:760px;

margin-left:-380px;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容