3 - CSS的继承和布局（中）｜ 青训营笔记

LianQi
80 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

块级（Block）& 行级（Inline）

1. 盒子的特点

Block Level Box（块级盒子）Inline Level Box（行级盒子）
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆成多行
适用于所有的盒模型属性盒模型中的width、height不适用

2. 元素的特点

块级元素行级元素
生成块级盒子生成行级盒子，内容分散在多个行盒（line box）中
body、article、div、main、section、h1-6、p、ul、li等span、em、strong、cite、code等
display: boxdisplay: inline

3. display - 显示类型

display属性用以设置元素的内部和外部的显示类型

属性值说明
block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none排版时完全被忽略

常规流（Normal Flow）

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

1. 行级排版上下文

  • Inline Formatting Context（IFC）
  • 只包含行级盒子的容器会创建一个 IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

2. 块级排版上下文

  • Block Formatting Context（BFC）

  • 某些元素会创建一个 BFC

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

  • BFC 内的排版规则

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

  • Example

    <span>
    This is a text and 
    <div>block</div>
    and other text.
</span>

<style>
    span {
        line-height: 3;
        border: 2px solid red;
        blackground: coral;
    }
    
    div {
        line-height: 1.5;
        background: lime;
    }
</style>

    一个盒子的子级盒子只能是块级盒子或者行级盒子

    <span>行级元素；<div>块级元素

    因为一个父级内不能又出现行级盒子又出现块级盒子，所以该示例的结果如下：

    image-20230121011411662

    浏览器将会创建两个行级盒子用来承载<span>的两个部分

3. Flex 排版上下文

1. Flex Box是什么

  • 一种新的排版上下文

  • 它可以控制子级盒子

    • 摆放的流向（→ ← ↑ ↓）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对其
    • 是否允许折行

  • 主轴和侧轴

    • 主轴由flex-drication定义，侧轴垂直于它

      image-20230121014126246

2. flex-direction - 元素方向

  • 设置<div>元素内弹性盒元素的方向（设置主轴方向）

    属性值说明
    row水平排布，从左往右，默认值
    row-reverse水平排布，从右往左
    column垂直排布，从上往下
    column-reverse垂直排布，从下往上

    image-20230121013500092

3. justify-content - 主轴对齐

  • 设置主轴对齐方式

    属性值说明
    flex-start从行头紧挨着布置，默认值
    flex-end从行尾紧挨着布置
    center居中紧挨着布置
    space-between行内平均分布
    space-around行内平均分布，两边留有一半的间隔空间

    img

4. align-items - 侧轴对齐

  • 设置侧轴（纵轴）对齐方式

    属性值说明
    flex-start沿侧轴起始位置紧挨着布置
    flex-end沿侧轴结束位置紧挨着布置
    center居中布置
    baseline与content-box基线对齐
    stretch填充布置，内部元素和容器同高，默认设置

    image-20230121020204740

5. order - 依序布置

  • 用整数来定义排序顺序，从小到大，可以为负值

    {
    order: -1;
}

    image-20230121020710511

6. flex-grow - 扩展比率

  • 用于设置盒子的扩展比例，容器如有剩余空间，则按找比值扩展，接受一个<length>

    <div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

    .a .b .c的基础长度是100px

    .a的flex-grow为 2，.b的flex-frow为 1，则空闲位置的拓展比例.a为.b的两倍

    image-20230121023105430

7. flex-shrink - 收缩比率

  • 设置盒子的收缩比例，容器如空间不足，则按照比例收缩，未定义则为1

    <div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

    .a .b .c的基础长度是400px

    .a的flex-shrink为 0，.b .c的flex-shrink为 1，则收缩比例.b .c为.a的两倍

    image-20230121023743782

avatar
文章
阅读
粉丝