css布局

Author Avatar
Roojay 9月 15, 2017
  • 在其它设备中阅读本文章

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. 设置containerpadding值,给box-leftbox-right留出空间。
  5. 设置leftright为相对定位(position: relative).
  6. 设置box-leftleft值为负的box-left宽度,box-rightright值为负的right宽度。

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

淘宝双飞翼布局

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

The MIT License (MIT)
Copyright (c) 2019, Roojay.

本文链接:https://roojay.com/pages/5a252ba9/