1.盒模型

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图：

IE盒模型宽度=padding+content+border+margin

标准盒模型宽度=content

可以通过box-sizing来设置使用哪种盒模型：

box-sizing:border-box || content-box || inherit

当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式
当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式
当使用inherit时：页面将从父元素继承box-sizing的值

2.position定位

position的六个属性值：static、relative、absolute、fixed、sticky和inherit。

static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址

简单地，介绍一下position的属性值的含义后，在来看一下偏移量top、right、bottom、left四个属性。当初在初学css的时候，会不会与margin这个属性混淆？其实，它们之间是很容易去辨识地。因为这四个属性值，其实是，定位时的偏移量。偏移量不会对static的元素起到作用。而margin，相对应的是盒子模型的外边距，它会对每个元素框起到作用，使得元素框与其他元素之间产生空白。

3.尺寸

尺寸的单位有：px，em，rem，百分比。

扫描二维码关注公众号，回复： 3392378 查看本文章

百分比：百分比的参照物是父元素，50%相当于父元素width的50%
rem：这个对于复杂的设计图相当有用，它是html的font-size的大小
em：它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了

4.水平居中垂直居中

如何实现水平居中：

将margin-left和margin-right属性都设置成auto，（要给元素定义一个宽度）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            background-color: green;
            margin-right:auto;
            margin-left:auto;
            width:500px;
            height:500px;
        }
        .center{
            margin-right:auto;
            margin-left:auto;
            background-color:red;
            width:300px;
            height:300px;
            text-align:center;
            line-height:300px;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="center">愚蠢的土拨鼠要变聪明</div>
</div>

</body>
</html>

效果：

如果想要让其中的文字水平居中则要添加text-align属性等于center，（text-align的属性值有right左对齐，left右对齐，center水平对齐和justify两端对齐）

如果想让其中的文字垂直剧中可以通过设置行高line-height属性值等于包含它的块元素高度300px；

.center{
            margin-right:auto;
            margin-left:auto;
            background-color:red;
            width:300px;
            height:300px;
            text-align:center;
            line-height:300px;
        }

效果：

若是想实现垂直对齐，有以下几种方案：

position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现

代码：

 .container {
            background-color: #FF8C00;
            width: 300px;
            height: 300px;
            position: relative;
        }
        .center{
            background-color: #F00;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px; /*往上拉50px并且往左拉50px*/
        }

效果：

使用flex布局，利用align-items:center；对齐方式为交叉轴中点对齐，justify-content：center；主轴居中对齐

    
        .container {
            background-color: #FF8C00;
            width: 300px;
            height: 300px;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .center{
            vertical-align:middle;
            background-color: #F00;
            width: 200px;
            height: 200px;
            text-align:center;
            line-height:200px;

        }

5.浮动Float

最初，设计浮动时，其实并不是为了布局的，而是为了实现文字环绕的特效，如图：

通过设置浮动会使元素脱离文档流，类似于ps中的图层一样，浮动的元素会在浮动层上面进行排布，而在原先文档流中的元素位置，会被以某种方式进行删除，但是还是会影响布局。你可能会觉得有疑问，什么叫影响布局？我们可以来举个例子：

首先，我们准备两个颜色块，如图：

之后我们将left的块设置成左浮动，如图：

可以，发现虽然left块因为左浮动，而使得原先元素在文档流中占有的位置被删除，但是，当right块补上原先的位置时，right块中的字体却被挤出来了。这就是所谓的影响布局。

浮动为什么会被使用在布局中呢？因为设置浮动后的元素会形成BFC（使得内部的元素不会被外部所干扰），并且元素的宽度也不再自适应父元素宽度，而是适应自身内容。这样就可以，轻松地实现多栏布局的效果。

浮动的内容还需要介绍一块——清除浮动。可以看到，浮动元素，其实对于布局来说，是特别危险的。因为你可能这一块做过浮动，但未做清除，那么造成高度塌陷的问题。就是上面图示的那种情况。清除浮动的方法见另一篇博文https://blog.csdn.net/ddbwjkq/article/details/82846451

6.BFC

BFC 定义

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC应用

实现自适应两栏布局

应用了“BFC的区域不会与float box重叠”的特性；一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了出现文字环绕及类似情形。

<style type="text/css">
    .container {
        width: 500px;
    }
    .left {
        width: 100px;
        height: 150px;
        background-color: #B3D1C1;
        float: left;
    }
    .right {
        height: 200px;
        background-color: #A694C1;
        /*把.right这个自适应预算变成BFC，
        避免与.left这个有float属性的元素重叠；*/
        **overflow: hidden;**
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

解决父元素高度塌陷（也就是闭合内部浮动）

应用了“计算BFC高度时，浮动元素也参与计算在内”的特性；

<style>
    .container {
        width: 300px;
        border: 1px solid #999;
        background-color: #DBD9B7;
        /*使父元素变为BFC，解决高度塌陷*/
        overflow: hidden;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: #E67B85;
        /*会造成高度塌陷*/
        float: left;
    }
</style>

<body>
    <div class="container">container
        <div class="son">son</div>
    </div>
</body>

解决垂直方向上兄弟元素的margin重叠

应用了“属于同一个BFC的两个相邻Boc的margin会发生重叠”的特性。意味着如果相邻兄弟元素不属于同一个BFC，就不会发生margin重叠了。

外边距重叠相关知识可参考为w3school教程：http://www.w3school.com.cn/css/css_margin_collapsing.asp

<style>
    p {
        width: 200px;
        height: 100px;
        background-color: #fcc;
        margin: 25px;
    }
    .wrap {
        /*p外面包裹一层，并按如下设置，
        形成一个单独的BFC*/
        overflow: hidden;
    }
</style>

<body>
    <div class="wrap">
        <p class="a">a</p>
    </div>
        <p class="b">b</p>
</body>

参考链接：https://www.jianshu.com/p/11e764268c0d

参考链接：https://www.jianshu.com/p/cc2bc404269b

CSS布局总结——盒模型，position定位，尺寸，水平居中垂直居中，浮动float，BFC