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


posted @ 2020-06-16 11:45  whendream  阅读(43)  评论(0编辑  收藏