css布局 | 陌名如初

CSS 基础布局

清除浮动

简单的 Micro clearfix 方法清除浮动，原文链接:http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix {
    &::before, &::after{
        content: " ";
        display: flex;
    }
    &::after {
        clear: both;
    }
}

三栏式布局

两边侧栏固定宽度，中间栏宽度自适应，并且中间栏要在放在文档流前面以优先渲染。
其父元素的高度始终是由三栏中高度最高的元素确定。

圣杯布局

来源于 Matthew Levine 于 2006 年发表在 Alistapart 上的一篇文章。原文链接

<div class="container">
    <div class="box mid"></div>
    <div class="box left"></div>
    <div class="box right"></div>
</div>

1. 设置box-mid box-left box-right 三者向左浮动。
2. 设置box-mid宽度为 100%。
3. 设置负边距，box-left设置负左边距为 100%，box-right设置负左边距为负的自身宽度。
4. 设置container的padding值，给box-left和box-right留出空间。
5. 设置left和right为相对定位(position: relative).
6. 设置box-left的left值为负的box-left宽度，box-right的right值为负的right宽度。

Q:当面板的mid部分比两边的子面板宽度小的时候，布局会乱掉。
A:为body设置一个最小宽度。body{min-width:700px;}

淘宝双飞翼布局

淘宝双飞翼布局是一个经典的三栏式布局，

The MIT License (MIT)
Copyright (c) 2019, Roojay.
本文链接：https://roojay.com/pages/5a252ba9/