弹性盒子知识点

1、圣杯

总结：
1.在主体内部外面嵌套了一个div

2.center在结构上靠前
3.center，left，right都浮动

    4.清除浮动

    5.center宽度为100%，left，right宽度固定
    6.left通过margin-left为负值（-100%），移动到center最左边
    7.right通过margin-left为负值（自身的宽度），移动到center的最右边。

    8.center的内容会被left，right遮盖
    9.最外层div添加一个padding，padding的宽度为left，right的宽度。
    10，left，right相对定位，移动到相应的位置。位移量为自身的宽度。

2、双飞翼

总结：
1.让left right center浮动
2.设置left的margin-left为-100%
3.设置right的margin-left为负的自身宽度
4.在center中添加一个div，将内容写在这个div中
5.为这个div添加一个margin，左右margin的值为left right的宽度。
圣杯：外盒子的padding+left right的相对定位
双飞翼布局：子盒子的margin

双飞翼与圣杯在结构上的差别：

3、弹性盒子实现三栏

1.添加一个最外层的div home
2.将home设置为弹性盒子
3.left right 固定宽度 center不设置宽度
4.将center设置为 flex-grow: 1;
5.调整顺序，left：1 center：2 right：3

4、流式布局&视口

流式布局 百分比布局。

    标准文档流+浮动：
        宽：相对于父盒子内容宽度的比值。
        高：相对于父盒子内容高度的比值。
        padding/margin：相对于父盒子内容宽度的比值。
    
    绝对定位：
        宽/padding/margin：相对于定位盒子的宽+左右padding的比值。
        高：相对于定位盒子的高+上下padding的比值。
    
    【注】border：不能使用百分数。

移动端布局：

    1.响应式   网站比较小，代码量不多
    2.分别开发两套代码   大型网站

    视口：
        布局视口 网页的宽度
        视觉视口 用户可以看到的网站的区域
        理想视口 视觉视口=布局视口

5、媒体查询

设备：
屏幕：PC 手机端
打印机
屏幕阅读器
尺寸：
常见尺寸 320-420之间

响应式网页：同一个网页，在不同的条件下（不同的设备，不同的宽度），使用不同的样式。
rem/百分比：等比例缩放。

【注】
使用min-width时，通常将小的条件放在前面。
使用max-width时，通常将大的条件放在前面

实现方式：
内嵌式

        格式：@media 设备名 逻辑关键词（and , not）（条件）{
            样式；
        }

外链式:

        通过link标签引入样式，再通过media属性设置样式引用的条件。
        <link rel="stylesheet" href="css/m1.css" media="screen and (max-width:1200px)">
print 打印机

逻辑关键字

         and 满足多个条件
        , 多个条件中满足一个条件
        not 逻辑非 只要不满足条件就会生效。

设备方向：

        opientation 属性可以定义设备的方向
            portrait 竖屏设备  高度大于宽度
            landscape 横屏设备 宽度大于高度

常见的查询特性：

        orientation    landscape portrait
        width          设备的宽度
        height         设备的高度
        min-width      最小宽度
        max-width      最大宽度
        min-height     最小高度
        max-height     最大高度