CSS盒子模型｜青训营盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，弹性盒子模型(flex model

CSS盒子模型

1.简介

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width 宽度 height 高度 border 边框 padding 内边距 margin 外边距

2.弹性盒

弹性盒子模型(flex model)是css3的新特性，也就是相对于旧版本新加的功能，是一种新的布局模式。css3的这个新特性对移动端也就是手机更加友好，能够使用各种手机不同的分辨率。flex model会根据设备屏幕分辨率自动调整各个容纳元素的各个容器的大小，以保证显示在手机屏幕上。像我们在手机上和电脑上打开同一个网页时，所显示的页面都不同。

总结就是：使用div+css布局的网页，使用弹性盒模型时，他会在不同的设备上智能地调节div即各种容器的布局的大小，以使页面更好看。

3.如何开启弹性盒模型？

弹性盒子模型包括：弹性容器和弹性子元素。为父容器也就是弹性容器设置属性display：flex就可以声明该父容器为一个弹性盒子，它里面的各种元素会自动布局。开启flex模式后，所有元素都会默认横着摆放，即使是块级元素也会横着放。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

盒子模型存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

4.常用于居中操作

{
    display: flex; 
    justify-content: center;
    align-items: center;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="out">
    <span>你好啊</span>
</div>
</body>
</html>

CSS盒子模型 ｜ 青训营