CSS学习 - 盒模型&flex

css学习

盒子模型

• padding：即内边距，围绕着内容（比如段落）的空间。
• border：即边框，紧接着内边距的线。
• margin：即外边距，围绕元素外部的空间。

块元素 -- 独占一行（块） 内联元素 -- 没有干扰的话。会在前面的元素后面

flex 模型

主轴就是水平轴，交叉轴就是垂直轴

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为** main start** 和** main end**。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和** cross end**。
• 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。

** display: flex 使下级元素变成弹性盒子，垂直平均切分 本来是这样子的：

image.png

我们需要给这些 flexible 元素的父元素 display 设置一个特定值。在本例中，我们想要设置 <article> 元素，因此我们给 <section>（变成了 flex 容器）设置 display：

flex-wrap: wrap 标识弹性盒子可以换行，换行的标准是下级元素设置flex: 200px来决定的 ，弹性盒子里面的元素最小是200px flex：1 直接接数值的，表示比例，四个元素，全部都是1的话，表示四等分，第三个是2（1 1 2 1）表示第三个元素占据 2/4的空间 flex: 1 200px 设置了一个最小值。然后剩余空间再去计算比例 常用css：

{
        display: flex;
        /* flex-direction: row;
        flex-wrap: wrap; */
        flex-flow: row wrap; -- row：水平；column：垂直；wrap ：换行
  			align-items: center;  -- 交叉轴，垂直方向
        justify-content: space-around; -- 主轴，水平方向
      }

浮动

width: 90%;
max-width: 900px;

在宽度道道900之前，占据90%的宽度，当超过了900px就固定900了。。。 换句话说，90%这个是动态的，但最大跨度为900px