猿人旅程前端开发

CSS布局知识点

2018-07-17  本文已影响1人  Junting

双飞翼布局 (淘宝UED对圣杯布局的升级优化)

圣杯布局和双飞翼布局的实现(三栏布局),都是左右两栏固定宽度,中间部分自适应;把三栏布局比做一只大鸟,main看成鸟的身体,sub和extra则是鸟的翅膀.布局思路是先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.

双飞翼布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>双飞翼布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .left,
        .middle,
        .right {
            float: left;
            min-height: 130px;
        }

        .left {
            margin-left: -100%;
            width: 200px;
            background: red;
        }

        .right {
            margin-left: -220px;
            width: 220px;
            background: blue;
        }

        .middle {
            width: 100%;
        }

        .middle-inner {
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background: green;
        }
    </style>
</head>

<body>
    <div class="middle">
        <div class="middle-inner">
            <h4>middle</h4>
        </div>
    </div>
    <div class="left">
        <h4>left</h4>
    </div>

    <div class="right">
        <h4>right</h4>
    </div>
    </div>
</body>

</html>

圣杯布局,是通过最外层div给予左右padding来遗留左右空白区,然后对left 和 right 左右栏进行 position定位,实现三栏布局;
淘宝对需要position定位来实现很麻烦,就通过对middle里添加一个div,然后通过对margin的特性(不会影响本身自己的容器)设置来实现.

注意:

上面的容器的高是固定的高,限制的比较死不够灵活;我们可以通过设置假的等高(以最高的height为基准)来实现灵活的高,利用overflow: hidden;

基于移动端的PX与REM转换兼容方案

TODO:具体解决方案,分析待更新~

弹性盒模型与Reset的选择

ICON-FONT与常用字体排版

CSS ICON

CSS ICON URL

CSS代码检测团队项目规范

CSS绘制高级技巧

BFC IFC GFC FFC

BFC 介绍

哪些元素会生成 BFC ?

只要元素满足下面任一条件即可触发 BFC 特性：

通过BFC来实现自适应两栏布局: 栗子-1

<!-- BFC 可以阻止元素被浮动元素覆盖,通过给 main 生成一个BFC区域来实现 -->
<style>
    body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
        
        // BFC 
        overflow: hidden;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div></body>

通过 BFC 可以包含浮动的元素（清除内部的浮动: 栗子-2

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>    </div></body>

**通过BFC防止垂直 margin 重叠: **

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p></body>

总结

上一篇 下一篇

猜你喜欢

热点阅读