深入CSS (下)

块级：生成块级盒子

1.顾名思义，是一块东西包裹着内容，不和其他盒子并列摆放 2.适用所有的盒模型
3. eg.body、article、div、main、section等等

行级：生成行级盒子

1.和其他行级盒子放在一行或者拆开成多行 2.盒模型中的width、height不适用
3.span、em、strong、cite、code等等

📌 当然，块级和行级也可以通过display属性进行转换

📕 display 补充:

1. block:块级盒子
2. inline:行级盒子
3. inline-block:本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散多行
4. none:排版时完全忽略

常规流：

行级排版上下文:

只包含行级盒子的容器会创建一个IFC
📑 IFC内的排版规则:

1. 盒子在一行内水平摆放
2. 一行放不下时，换行显示
3. text-align 决定一行内盒子的水平对齐
4. vertical-align 决定一个盒子在行内的垂直对齐
5. 可以避开float元素

块级排版上下文:

👇何时会创建BFC呢？

1. 根元素
2. 浮动、绝对定位、inline-block
3. Flex子项和Grid子项
4. overflow值不是visible的块盒
5. display:flow-root

📌 也有如下的规则噢！

1. 盒子从上到下摆放
2. 垂直margin合并
3. BFC内盒子的margin不会与外面的合并
4. BFC不会与浮动元素重叠

Flex布局

📌 flex布局可以说是css中非常重要的一个技术，也有人说，“说到排版，就是flex一把梭”，那么，它到底是怎么样的呢？

Flex Box

• 一种新的排版上下文
• 它可以控制子级盒子的摆放流向、顺序、盒子宽度和高度等

⭐当我们掌握了主轴与侧轴这两个flex布局中最关键的因素，我相信在运用的时候一定可以非常熟练

1. 主轴 justify-content => 水平方向上
2. 侧轴 align-items => 垂直方向上

好了，那么到这里，你以为就结束了吗？🚫当然没有
我们可以从上面的图看到，flex布局只是停留在单一方向上的布局，对于一些复杂一些的样式可能还不是很方便，所以，为了解决这个问题，Grid布局就出现了！

Grid布局

简单地说，就是将我们的容易划分成一块块网格，再根据要求按需分配内容。
是不是方便许多了呢？😀

基础使用规则

1. display:grid 使元素生成一个块级的grid容器
2. 使用grid-template 相关属性将容器划分为网格

📌 我们可以在文档中获取更多更深入的使用技巧 developer.mozilla.org/zh-CN/

position 属性

这部分的知识较为清晰，我们平常接触的最多的就是fixed、relative、absolute，那么其中的细节你是否都明白了呢？

1. 哪几种属性脱离文档流？
2. 子元素和父元素之间有什么样的关系？

📌补充: flex 和 fixed 都相当于是内部的元素重新创建了一种流，元素就重新按着新的流渲染

课后总结

• css的属性十分的多，我们不可能说把每一样都熟记于心，但是我们要把最基础的原理弄清楚，这样即使在遇到不理解的问题时，也能很快通过知识迁移找到思路

• 要多保持学习之心，多阅读文档，学习css出现的新特性

  1. www.w3.org/Style/CSS/
  2. developer.mozilla.org/en-US/

• 保持好奇之心，遇到困难不要害怕，多运用浏览器的调试面板，一步一步的解决问题！