首页 > 其他 > 详细

双飞翼布局和圣杯布局

时间:2019-09-10 19:49:01      阅读:82      评论:0      收藏:0      [点我收藏+]

双飞翼布局:中级固定 两边自适应

圣杯布局:两把固定 中级自适应

技术分享图片

 

Margin是 外边距,属性值是数字 数字又分正负。

正数:margin20px

负数:在static元素中(标准流下)margin-left为负数当前元素向左走 margin-top为负当前元素向上走

Margin-bottom为负数后当前元素不动后面的元素向上走,margin-right为负数当前元素不动后面的元素向左走

注意的,margin为负会增大当前元素的宽(前提是当前元素没有设置width场景

float

Margin为负 也是我们常用的双飞翼,圣杯布局

中间自适应 两端固定

给元素margin-left为负当前元素向左走,margin-right为负后一个元素向左走会覆盖当前元素。

absolute

Margin为负

让元素居中,前提是知道元素的宽高。

div{

Positionabsolute

Left50%

Top50%

Margin-left:-width/2;

Margin-top:-height/2

}

Margin为负无论在什么条件下都是释放自己的空间,如果自己的margin不够,就把自己的宽高贡献出去。

 

双飞翼布局和圣杯布局

原文:https://www.cnblogs.com/ymlo/p/11502377.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!