深入CSS之CSS布局 day2 ｜ 青训营笔记

阿皮想当小怪兽
205 阅读7分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

👋今天我们来看看布局，布局相关技术：常规流（IFC行级排版上下文、BFC 块级排版上下文、FlexBox、Grid布局），浮动，position属性，本文侧重于讲FlexBox布局、Grid布局

😁对网页的布局就相当是在网页上摆盒子，在说布局相关技术之前我们先讲讲盒子

块级 VS 行级

块级盒子

不和其它盒子并列摆放，默认情况下产生换行，可以设置宽和高，适用所有的盒模型属性

🤔而我们经常了解的块级元素与与块级盒子有什么关系咧？

  • CSS处理网页时,它认为每个元素都包含在个不可见的盒子里。
  • 由上可得：放块级元素的盒子就是块级盒子（就是将元素想象成盒子啦）

常见的块级元素：body、article、div、main、section、h1-6、p、ul、li 等

行级盒子

和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
常见的行级元素：span、em、strong、cite、code 等

✋那我要将这个行级元素放进块级的盒子可以吗？（就是让行级元素有着块级元素的特点）

可以，用display属性就可以控制盒子的类型

display属性 （常见）
block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中可以设置高宽，又不会独占一行
none排版时完全被忽略

😁盒子讲完了，现在进入正题

常规流

行级排版上下文（IFC）

触发条件：排版全是行级盒子（只包含行级盒子的容器会创建一个IFC）

IFC 内的排版规则

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素*

✋那我往IFC里放块级盒子会怎样？

IFC的前提就是只包含行级盒子，插入块级盒子就变成BFC了

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>
​
<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }
​
  div {
    line-height: 1.5;
    background: lime;
  }
</style>

块级排版上下文（BFC）

块盒和行盒垂直地沿着父元素的边框排列（BFC的排列方式）

  • 某些容器会创建一个BFC（BFC的触发条件）

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

BFC 内的排版规则：

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

Flex Box

Flex Box布局是现在用得最多，灵活的布局方式 Flex Box的布局方式主要分为两个角色：1.Flex Container 2. Flex Item （Flex Container 里装着多个 Flex Items ）

关于Flex Container的设定（常见）

1. flex-direction（用来定义里面的flex Items的排列方向）

flex-direction
row横向排列
column纵向排列
row-reverse横向排列+倒转排列顺序
column-reverse纵向排列+倒转排列顺序

2. justify-content 和 align-items

👋在讲 justify-content 和 align-items 之前先了解一下主轴和侧轴的概念

Snipaste_2022-07-25_14-12-10.png

注意：这个主轴和侧轴是变化的，至于怎么变，就要取决于 row 和 column

  • 当flex-direction : row时 , 水平向右是主轴，垂直向下就是侧轴
  • 当flex-direction : column时 , 垂直向下是主轴，水平向右就是侧轴

justify-content 是设定主轴的排序方向

Snipaste_2022-07-25_14-26-19.png

align-items 是设定侧轴的排序方向

Snipaste_2022-07-25_14-26-46.png

关于Flex Item的设定（常见）

1. order （是用于调整flex item的排序位置）

flex item 的 order 预设值是0 ，而排序是根据 order 从小到大排列

Snipaste_2022-07-25_14-33-37.png

2. align-self

上面的align-items改变的是全部 items 的位置，而align-self用来改变个别 item 的位置的

Snipaste_2022-07-25_14-36-19.png

3. flex-grow

flex-grow 是指当主轴方向有剩余空间的时候，flex item 会沿主轴方向扩大

😁 当a的flex-grow：1，b的flex-grow：2
就是指将a,b所在盒子的剩余空间分成3份，1份给a，2份给b

4. flex-shrink

flex-shrink是指当 flex item 主轴方向的大小总和超出了flex container的时候，flex item 沿主轴方向怎样缩小，flex-shrink是有预设值的，为1。（item缩小的空间是以超出的空间为基准）

😁 当a的flex-shrink：1，b的flex-shrink：2
就是指将a,b超出盒子的部分分成3份，让a缩小1份的空间，让b缩小2份的空间

5. flex [是(flex-grow+flex-shrink+flex-basis)的缩写]

Snipaste_2022-07-25_14-58-09.png

这里推荐一个小游戏，可以提高自己对flexbox布局的能力：flexboxfroggy.com/

总结：一个关于flex-container和flex-item属性的清单 Snipaste_2022-09-13_22-10-26.png

Grid布局

同样是很强大的布局方式，一句话概括：先把格子列好，再将子元素放进去

我们来对比一下flexbox布局与grid布局

Snipaste_2022-07-25_15-13-46.png 可以看出flexbox只能控制一个方向，而grid能控制两个方向 grid布局基本流程：

  • display: grid 使元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

👋因为grid布局是 先把格子列好，再将子元素放进去，那我们接下来就先讲一下格子划分，再来讲元素填充

格子划分： grid-template相关属性

grid-template-rows

设定grid-template-rows，代表垂直方向的设定 grid-template-rows：10px 20px 30px 则表示在垂直方向上划分出3个分别为 10px 20px 30px 的空间

grid-template-columns

设定grid-template-columns，代表水平方向的设定 grid-template-columns：10px 20px 30px 则表示在水平方向上划分出3个分别为 10px 20px 30px 的空间;

gap

gap能设置网格与网格之间的间隙：

gap: 10px; // 网格之间的间隙都是10px
column-gap: 20px // 列与列的间隙为20px
row-gap: 30px // 行与行之间的间隙为30px

fr

在grid 中 1fr 相当于flexbox中的 flex: 1 ,在grid中 fr 是非常好用的，我们在调节窗口大小时固定的数值可能会使得元素溢出，而 fr 则会随着窗口的大小而改变
代码使用示例：

grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4,1fr); // 相当于写了4次1fr, 与上面一样的效果

元素填充

先来了解一下grid line网格线，元素填充则是按照这样的规则来填充的

Snipaste_2022-07-25_16-02-02.png

grid容器的分隔线叫做grid line ，容器内的方格则称作grid area

Snipaste_2022-07-25_15-50-02.png

对于上图的填充有三种表示方法：

  1. .a { grid-row-start: 1; grid-column-start: 1; grid-row-end: 3; grid-column-end: 3; }
  2. .a { grid-row: 1/3; grid-column: 1/3; }
  3. .a { grid-area: 1/1/3/3; }

填充完元素后，将网线格移除就是我们熟悉的网页布局了，为了能让大家更好地去了解grid布局，这里先敲好了代码，大家可以通过修改代码内容来观察grid布局

总结：一个关于grid-container和grid-item属性的清单 Snipaste_2022-09-14_19-48-34.png

对于Grid 网页布局有一个讲的很好的视频，大家可以去看看： www.bilibili.com/video/BV1XE…

浮动：float

因为有了flexbox和grid这两种布局方式后，再用浮动去布局网页就显得有点不合适了😅 （对于浮动，了解文字环绕图片的效果就行了）

position属性

记得以前学习position属性，我记得很清楚的一句话就是“子绝父相”😂

position属性
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非static 祖先元素定位
fixed相对于视口绝对定位

🤔个人总结

通过这次的课程，了解了各种布局，扩展了不少的新的知识点：Flex布局和Grid布局，同时也了解到了布局的重要性，不过咧，对于Flex布局中justify-content里的 space-around 和 space-evenly 不是很能区分， 老师说就是space-around相对于space-evenly更靠近边缘，之后可能在具体应用是就看这两个应用到网页布局时那个顺眼就选哪个吧😂

avatar
文章
阅读
粉丝