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 使下级元素变成弹性盒子，垂直平均切分
本来是这样子的：
我们需要给这些 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
作者：jwentest
出处：http://www.cnblogs.com/jwentest/
虽千万人，吾往矣！文章先发到语雀：https://www.yuque.com/jwen/testway
来源：https://www.cnblogs.com/jwentest/p/13140142.html |
发表于 2020-6-16 11:45:00
