【CSS】布局介绍及弹性模型

根据MDN网站学习记录笔记

介绍CSS布局

正常布局流(Normal flow)

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。每个元素被看作一个盒模型，元素大致分为以下两种类型：

• 块级元素：内容宽度是父元素的100%，会在上一元素下面另起一行
• 内联元素：不会另起一行，无法设置宽高。

notice：外边距叠加——如果两个相邻的元素都设置了margin，并且两个margin有叠加，则保留更大的那个设置。

【思考】怎么消除外边距叠加？

display属性

正常流中的所有内容都有一个display的值，用作元素的默认行为方式。

• 可以更改此默认显示行为：例如，<li>元素默认为display:block；
• 在讨论布局时，最重要的两个值是display:flex和display:grid

弹性盒子(Flexbox)

用于创建横向或是纵向的一维页面布局。
只需要在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

.wrapper {
   
  display: flex;
}

把display: flex添加到它的父元素时，这三个元素就自动按列进行排列。

在这里：父元素上flex-direction的初值是row；父元素上align-items属性的初值是stretch，因此全都被拉伸至与最高的元素高度相同

在我们的所有子元素上添加flex 属性，并赋值为1，这会使得所有的子元素都伸展并填充容器

.wrapper {
   
    display: flex;
}

.wrapper > div {
   
    flex: 1;
}

Grid布局

被设计用于同时在两个维度上把元素按行和列排列整齐。是一种网格结构，考虑横线竖线对网页布局进行划分。

.wrapper {
   
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;