4

经典的圣杯布局，和双飞翼布局， 考点是什么

 2 years ago
source link: https://juejin.cn/post/7059689846389866504
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

圣杯布局和双飞翼布局， 主要解决三列布局， 中间列需要优先渲染的问题， 主要运用的是margin属性和float熟悉， 主要考察margin和float的熟悉程度

margin 的left， top， right， bottom设置负值的分别作用

  • margin-left 和 margin-top 会使元素向左和向上移动

  • margin-right 和 margin-bottom 会使自身在布局中所占的位置减少， 使右边的元素或下边的元素向自身移动

.column{
  float: left;
}
main{
  padding: 0 200px;
}
.center{
  width: 100%;
  background: greenyellow;
}
.left,.right{
  width: 200px;
  background: yellow;
}
<main class="clearfix">
    <div class="column center">center</div>
    <div class="column left">left</div>
    <div class="column right">right</div>
</main>
复制代码

image.png

.left{
  margin-left: -100%;
}
复制代码

image.png

margin-left -100% 为什么能达到这样的效果呢？ 100% 是父级的宽度 就会向左移动， 父级的宽度，

为什么它能移动到上面， 而我们有时候都是直接一直向左移动， 移到看不见的地方？

float 使他们处在了同一行， 只是center把一行都占据了， 把其他两个都挤下去了， 所以当负margin的时候会出现回去， 例如 diable:flex; flex-wrap:wrap也是会出现同样的效果

.left{
    position: relative;
    left: -200px; // 这个就不说了， 我相信大家知道
    margin-left: -100%;
}
.right{
  margin-right: -200px;
}
复制代码

image.png

margin-right: -200px; 想相当于时自身的宽度消失（非真实消失，而是相对其他元素而言，认为它是无宽度的）， 使自己能回到第一行， 处在center的旁边

双飞翼布局 就不说了， 理解了margin和float的组合用法相信双飞翼布局也是不在话下


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK