CSS重点Float、dispaly、position、BFC、盒子模型

display经常使用值

// 经常使用值
none：元素不显示
inline：将元素变为内联元素，默认
block：将元素变为块级元素
inline-block：将元素变为内联块级元素
list-item：inline：将元素变为列表显示（通常不用）
table：将元素变为块级表格元素，先后带有换行符
inline-table：将元素变为内联表格元素，先后不带换行符
table-row：将元素变为表格行，相似tr
table-cell：将元素变为表格列，相似td
grid：将产生一个块级网格布局
inline-grid：将产生一个内联块级网格布局
flex：将产生一个块级弹性盒子进行布局
inline-flex：将产生一个内联弹性盒子进行布局

position定位

Fixed,absolute脱标，没法marger 0 auto居中或者浮动

CSS中的定位至关于PS中的新建图层，即在原有文档流上新开一层用于元素显示。
（1）position属性值

static：元素默认值，即没有定位，遵循正常的文档流对象
relative：相对定位
absolute：绝对定位，相对于static之外的第一个父元素进行定位，搭配元素：left/right    top/bottom
fixed：固定布定位，相对于浏览器窗口定位：搭配元素：left/right    top/bottom
inherit：规定应该从父元素继承 position 属性的值
sticky：css3新增，至关于relative和fixed结合，即滑动到必定程度就固定布局
参考连接：https://jsbin.com/moxetad/edit?html,css,output

（2）定位相对性
相对于最近的有定位的父元素，绝对定位，若是向上级找，若是都没找到定位元素，则相对与html定位。

定位机制

控制元素布局的定位方案

一、普通流（normal flow）
HTML默认布局。
以HTML文档为基础，元素按照在HTML中出现的前后位置自上而下布局，内联元素水平排列，直到当行被沾满而后换行。
块级元素则会被渲染为完整的一个新行，除非另外制定，不然全部元素默认都是普通流定位。
也能够说，普通流中元素的位置由该元素在HTML文档中的位置决定。

二、浮动流（float flow）
在浮动布局中，元素首先按照普通流的位置出现，而后根据浮动的方向尽量地向左边或右边偏移，
其效果与印刷排版中的文本环绕类似。

三、定位（positioning）
（1）绝对定位：absolute positioning
在绝对定位布局中，元素会总体脱离普通流，所以绝对定位元素不会对其兄弟元素形成影响，
而元素具体的位置由绝对定位的坐标决定。这种定位经过设置top、right、bottom、left这些偏移值，
相对于 static 定位之外的第一个父元素进行定位（这种定位一般设置父元素为relative定位来配合使用），
在没有父元素的条件下，它的参照为body，该方式脱离文档流；

（2）静态定位（static positioning）
当咱们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，
这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

（3）相对定位（relative positioning）
该定位是一种相对的定位，能够经过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流

（4）固定定位（fixed positioning）
生成绝对定位的元素，相对于浏览器窗口进行定位。这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，
就能够将该元素固定在页面固定的位置，一般用来显示一些提示信息，脱离文档流；

（5）inherit定位
这种方式规定该元素继承父元素的position属性值。

注意：
float，absolute，fixed，脱离文档流，即将元素从普通的布局排版中拿走，
其余盒子在定位的时候，会当没看到它，二者位置重叠就会发生重叠

布局

（1）table布局

（2）绝对定位布局

// 绝对定位中的两栏设计
<div class="left"></div>
<div class="right"></div>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0;
        overflow-y: hidden;
        background: #000;
    }

    div {
        width: 100%;
    }

    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        background-color: green;
    }

    .right {
        margin-left: 200px;
        background-color: orange;
    }
</style>

（3）浮动布局

• 内联、内联块、浮动、溢出隐藏、纯文本均可以识别浮动元素的位置
• 块级元素没法识别浮动元素的位置
• float之后，元素变成内联块级元素

  // 清除浮动
  .clearfix::after {
    content: "";
    /*display: block;*/
    display: table;
    clear: both;
  }

 

盒子模型

一、英文：box model

二、组成要素：
    （1）、content：宽高所划分的区域
    （2）、border：边框
    （3）、padding：内边距
    （4）、margin：外边距

三、盒子分类：
    W3C标准盒子模型
    IE盒子模型

四、标准盒子与IE盒子区别：
盒子宽高的计算方式不同

（1）标准盒子模型

// 元素宽高度计算
一个元素的宽度 =  content

盒子总宽度 = margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right

盒子总高度 = margin-top + border-top + padding-top + height +
padding-bottom + border-bottom + margin-bottom

（2）IE盒子模型

// 元素宽高度计算
一个元素的宽度 =  content + padding + border

盒子总宽度 = margin-left + width +  margin-right

盒子总高度 = margin-top + height + margin-bottom

（3）box-sizing设置两种模型

box-sizing取值：
content-box：W3C标准模型，浏览器默认设置
border-box：IE模型

padding-box：针对firefox，在Firefox 50中已被删除

具体能够参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

（4）JS获取盒模型的宽高

取出前提浏览器渲染完毕以后

// 一、只能获取行内样式的宽高
dom.style.width/height
// 二、内联样式和外联样式的宽高都能取到，但只有 IE 支持
dom.currentStyle.width/height
// 三、内联样式和外联样式的宽高都能取到，几乎全部主流浏览器都支持
window.getComputedStyle(dom).width/height
// 四、内联样式和外联样式的宽高都能取到，几乎全部主流浏览器都支持，
// 取到的是盒模型距离viewport左上角的距离（绝对位置）
dom.getBoundingClientRect().width/height/left/top

示例以下：
//  获取dom
let dom = ocument.getElementById('box');

console.log('style:' + box.style.width);
console.log('currentStyle:' + box.currentStyle.width) ;
console.log('getComputedStyle:' + getComputedStyle(box).width)
console.log('getBoundingClientRect:' + box.getBoundingClientRect().width);

BFC

定义：边距重叠解决方案
中文：块级格式化上下文
英文：Block Formatting Context

BFC原理（渲染规则）

（1）BFC 里面的元素，在垂直方向，边距会发生重叠
（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然
（3）计算BFC的高度时，浮动的子元素也参与计算
（4）BFC区域不与旁边的float box区域重叠。（能够用来清除浮动带来的影响）

元素建立BFC方式

一、body自己为BFC元素
二、float：值不为none，如：left right
三、position：值不为static或relative，如：absolute fixed
四、display：inline-block table-cell inline-table table flex grid
五、overflow：值不为visible，如：hidden auto scroll

BFC做用

一、解决margin重叠/合并问题（兄弟元素） - 通常不须要解决
二、解决margin塌陷（父子元素）
三、解决浮动流形成父级元素高度坍塌 - 通常用清除浮动解决
四、解决浮动元素覆盖问题

BFC应用举例

（1）解决margin重叠/合并问题

1. 标准文档流中，竖直方向的margin不叠加，会重叠合并，只取较大的值做为margin(水平方向的margin是能够叠加的，即水平方向没有塌陷现象)。
2. 若是不在标准流，好比盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。（浮动的元素能够设置边距不？）

// 一般发生在兄弟元素之间
// 现象解释：对应原理第一条：BFC 里面的元素，在垂直方向，边距会发生重叠
<div class="box box1"></div>
<div class="box box2"></div>
<style type="text/css">
    .box {
        width: 100px;
        height: 100px;
    }
    .box1 {
        background-color: lightblue;
        margin-bottom: 100px;
    }
    .box2 {
        background-color: orange;
        margin-top: 50px;
    }
</style>

解决方案：分别将两个元素放置到BFC容器中

<div class="container">
    <div class="box box1"></div>
</div>
<div class="container">
    <div class="box box2"></div>
</div>
<style type="text/css">
    .container {
        overflow: hidden;
    }

    .box {
        width: 100px;
        height: 100px;
    }

    .box1 {
        background-color: lightblue;
        margin-bottom: 100px;
    }

    .box2 {
        background-color: orange;
        margin-top: 50px;
    }
</style>

（2）解决margin塌陷

<div class="box1">
    <div class="box2"></div>
</div>
<style type="text/css">
    .box1 {
        width: 300px;
        height: 300px;
        background-color: #000;
    }
    .box2 {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        margin-top: 100px;
        background-color: orange;
    }
</style>

解决方案：

1. 给box1加一个透明边框：border-top: 1px solid transparent;
2. 将父级变为BFC

// box1变为BFC
.box1 {
        width: 300px;
        height: 300px;
        background-color: #000;
        overflow: hidden;
    }

解决原理对应第二条：
BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然

（3）解决浮动流形成父级元素高度坍塌

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<style type="text/css">
    .box {
        width: 200px;
        border: 10px solid #000;
    }

    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: green;
    }

    .box2 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: orange;
    }
</style>

解决方案：

1. 给父元素设置高度
2. 使用清除浮动的方法（开发经常使用）
3. 父元素变为BFC，如下为BFC解决方案

// 父级加一行代码变为BFC便可
.box {
    width: 200px;
    border: 10px solid #000;
    overflow: hidden;
}

为何父元素变为BFC以后就有高度了呢？
对应原理第三条：计算BFC的高度时，浮动的子元素也参与计算

（4）解决浮动元素覆盖问题

<div class="box1">浮动元素box</div>
<div class="box2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<style type="text/css">
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
</style>

解决方案：右侧浮动元素变为BFC

// box2加一行代码变为BFC便可
.box2 {
    width: 200px;
    height: 200px;
    background-color: orange;
    overflow: hidden;
}

对应原理第四条：BFC区域不与旁边的float box区域重叠

BFC、IFC、GFC、FFC定义        

BFC：Block Formatting Contexts - 块级格式化上下文
IFC：Inline Formatting Contexts - 内联格式化上下文
GFC：GridLayout Formatting Contexts - 网格布局格式化上下文
FFC：Flex Formatting Contexts - 自适应格式化上下文