CSS学习 - 盒模型&flex
<h1 id="css学习">css学习</h1><p></p>
<h1 id="盒子模型">盒子模型</h1>
<ul>
<li><code>padding</code>：即内边距，围绕着内容（比如段落）的空间。</li>
<li><code>border</code>：即边框，紧接着内边距的线。</li>
<li><code>margin</code>：即外边距，围绕元素外部的空间。</li>
</ul>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/92887/1591943036112-dd0c3f97-8a10-4d30-b01c-e3dae7883031.png#align=left&display=inline&height=450&margin=%5Bobject%20Object%5D&originHeight=450&originWidth=574&size=0&status=done&style=none&width=574" alt="" loading="lazy"><br><br>
<br>块元素 -- 独占一行（块）<br>内联元素 -- 没有干扰的话。会在前面的元素后面<br><br>
<br><br>
<br></p>
<p></p>
<h1 id="flex-模型">flex 模型</h1>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/92887/1591946701290-3717d09c-4bd5-4a3c-904c-af197dedf69c.png#align=left&display=inline&height=333&margin=%5Bobject%20Object%5D&originHeight=333&originWidth=563&size=0&status=done&style=none&width=563" alt="" loading="lazy"><br>主轴就是水平轴，交叉轴就是垂直轴</p>
<ul>
<li><strong>主轴（main axis）</strong>是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为** main start** 和** main end**。</li>
<li><strong>交叉轴（cross axis）</strong>是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 <strong>cross start</strong> 和** cross end**。</li>
<li>设置了 <code>display: flex</code> 的父元素（在本例中是 <code><section></code>）被称之为 <strong>flex 容器（flex container）。</strong></li>
</ul>
<p>**<br>display: flex 使下级元素变成弹性盒子，垂直平均切分<br>本来是这样子的：<br><img src="https://cdn.nlark.com/yuque/0/2020/png/92887/1591943693146-6cefa09a-77f2-4f08-9edb-0bcbb3980431.png#align=left&display=inline&height=313&margin=%5Bobject%20Object%5D&name=image.png&originHeight=626&originWidth=1910&size=88205&status=done&style=none&width=955" alt="image.png" loading="lazy"><br>我们需要给这些 flexible 元素的父元素 <code>display</code> 设置一个特定值。在本例中，我们想要设置 <code><article></code> 元素，因此我们给 <code><section></code>（变成了 flex 容器）设置 display：</p>
<p><img src="https://cdn.nlark.com/yuque/0/2020/png/92887/1591943659879-12015c1f-2d76-4a7a-a88c-6ed7d7f124ee.png#align=left&display=inline&height=348&margin=%5Bobject%20Object%5D&originHeight=348&originWidth=800&size=0&status=done&style=none&width=800" alt="" loading="lazy"><br><br>
<br>flex-wrap: wrap 标识弹性盒子可以换行，换行的标准是下级元素设置flex: 200px来决定的 ，弹性盒子里面的元素最小是200px<br>flex：1 直接接数值的，表示比例，四个元素，全部都是1的话，表示四等分，第三个是2（1 1 2 1）表示第三个元素占据 2/4的空间<br>flex: 1 200px 设置了一个最小值。然后剩余空间再去计算比例<br><br>
<br>常用css：</p>
<pre><code class="language-css">{
display: flex;
/* flex-direction: row;
flex-wrap: wrap; */
flex-flow: row wrap; -- row：水平；column：垂直；wrap ：换行
align-items: center;-- 交叉轴，垂直方向
justify-content: space-around; -- 主轴，水平方向
}
</code></pre>
<p></p>
<h1 id="浮动">浮动</h1>
<pre><code class="language-css">width: 90%;
max-width: 900px;
</code></pre>
<p>在宽度道道900之前，占据90%的宽度，当超过了900px就固定900了。。。<br>换句话说，90%这个是动态的，但最大跨度为900px<br><br>
<br></p>
</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">
<div>作者：jwentest</div>
<div>出处：http://www.cnblogs.com/jwentest/</div>
<div>虽千万人，吾往矣！文章先发到语雀：https://www.yuque.com/jwen/testway</div>
</div><br><br>
来源：https://www.cnblogs.com/jwentest/p/13140142.html
頁:
[1]