CSS布局知识点

双飞翼布局 (淘宝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来遗留左右空白区,然后对leftright 左右栏进行 position定位,实现三栏布局;
淘宝对需要position定位来实现很麻烦,就通过对middle里添加一个div,然后通过对margin的特性(不会影响本身自己的容器)设置来实现.

注意:

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

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

  • different size different DPR
  • 目前的设计稿 一般是 640 750 1125,一般要先均分成100份,(兼容vh,vm) 750/10 = 75px (1rem = 75px)div宽是240px*120px css的书写改为3.2rem * 1.6rem。 配合响应式修改html根的大小。
  • 字体不建议使用rem的,data-dpr属性动态设置字体大小。屏幕变大放更多的文字,或者屏幕更大放更多的字。资料介绍
  • 神奇的padding/margin-top等比例缩放间距

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

弹性盒模型与Reset的选择

  • flex模型
  • * 杀伤力太大,根据具体使用什么再加什么
  • Reset.css 重置 Normalize.css修复 Neat.css融合
  • 移动端必须加上的
        html{box-sizing: border-box;} 
        *,*:before,X:after{box-sizing: inherit;}
    

ICON-FONT与常用字体排版

  • no-image时代 不超过纯色为2的图像
  • 宋体非宋体 黑体非黑体 WIndows下的宋体叫中易宋体SimSun,Mac是华文宋体STSong。WIndows下的黑体叫中易黑体SimHei,Mac是华文黑体STHeiti。
  • 不要只写中文字体名,保证西文字体在中文字体前面。Mac->Linux->Windows
  • 切忌不要直接使用设计师PSD的设计font-family,关键时刻再去启动font-facetypo.cssEntry.cssType.css
  • font-family: sans-serif;系统默认,字体多个单词组成加引号

CSS ICON

CSS ICON URL

CSS代码检测团队项目规范

CSS绘制高级技巧

  • border && border-radius 造就万千可能
  • after && before 任何一个HTML元素都可以创造3个可以供我们操作的视觉元素,即三个矩形。
  • box-shadow是可以定义为任意颜色的,并且同一个元素可以投射出不同的box-shadow
  • 神奇borders构建的三角形。

BFC IFC GFC FFC

BFC 介绍

  • Box: CSS布局的基本单位

    Box(盒子)CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box(盒子) 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:

    • block-level box (块级元素) : display: 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context
    • inline-level box (行内元素) : display: 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context
    • Formatting contextW3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting contextBlock fomatting context(简称BFC)和 Inline formatting context (简称IFC)。
    • CSS2.1 中只有 BFCIFC, CSS3 中还增加了 GFCFFC

哪些元素会生成 BFC ?

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

  • 根元素 HTML的根元素为:<html>
  • float属性不为none
  • positionabsolutefixed
  • displayinline-block, table-cell, table-caption, flex, inline-flex
  • overflow除了visible以外的值(hiddenautoscroll)

通过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

  • 计算BFC的高度时,浮动元素也参与计算
<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>

总结

  • 其实以上的几个例子都体现了,BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • IFC(Inline Formatting Contexts)直译为"内联格式化上下文",IFCline box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)
  • FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container
  • GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

推荐阅读更多精彩内容