20230222----重返学习-常见布局-横向格式化-`BFC块级格式化上下文`-省略号-粘性定位

方朝端
71 阅读5分钟

day-013-thirteen-常见布局-横向格式化-BFC块级格式化上下文-省略号-粘性定位

布局总结

  • 水平居中

    • 非块元素水平居中

      1. 对父元素设置text-align:center;

        <div class="行内非块元素水平居中">
  行内文本居中<br/>
  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" style="height:65px;background-color: pink;" ><br/>
  <span style="background-color: blue;">行内元素</span><br/>
  <div style="display: inline-block;width: 130px;height: 30px;background-color: gray;">行内块</div><br/>
</div>

      2. 对父元素设置display:flex;justify:center;

    • 块级元素水平居中

      1. 对父元素设置width，对当前子级块元素设置具体且小于父元素内容区宽度的width与margin: 0 auto;。
      2. 对父元素设置display:flex;justify:center;
      3. 对父元素设置position: relative;，对子元素设置--the-height:100px; width: var(--the-height); position: absolute;left: 50%; margin-left: calc(var(--the-height) / -2);。
      4. 对父元素设置position: relative;，对子元素设置position: absolute;left: 50%; transform: translateX(-50%);。

  • 垂直居中

    • 单行文本垂直居中

      • 对当前元素设置line-height: calc(var(元素自身高度) + 0px);，元素自身高度要大小当前元素的font-size。

    • 块元素垂直居中

      1. 父元素设置`display: flex;align-items: center;
      2. 父元素设置position: relative;，子元素设置position: absolute;top: 50%;margin-top: calc(子元素自身高度 / -2);
      3. 父元素设置position: relative;，子元素设置position: absolute;top: 50%;transform: translateY(-50%);
      4. 父元素设置display: flex;align-items: center;

  • 两列布局 左列定宽，右列自适应

    1. 浮动与横向格式化属性margin-left。定宽子元素开启浮动 float: left;。自适应子元素设置外边距 margin-left: 200px;，自适应子元素默认会width: auto;。

    2. 浮动与BFC。定宽子元素开启浮动 float: left;。自适应子元素开启BFC overflow: hidden;，自适应子元素默认会width: auto;。

    3. flex布局。父元素开启flex布局 display: flex;。自适应子元素允许放大 flex-grow: 1;。

    4. 绝对或固定定位后，上下方向为0及margin:auto 0。

      • 定位后父元素height=top +margin-top +border-top-width +padding-top +height +padding-bottom +border-bottom-width +margin-bottom +bottom

        • 四个方向设置为0，margin值为auto，会自动分配，就实现了垂直居中

横向格式化

因为一个块元素必定独自占据一行。

单个子元素的横向盒子属性必定等于父元素的内容区宽度。

即:
父元素内容区宽度 = 子元素margin-left+子元素border-left-width+子元素padding-left+子元素width+子元素padding-right+子元素border-right-width+子元素margin-right
其中:
父元素内容区宽度虽然也可以设置为auto，但可以理解为父元素内容区宽度在父级内容排列中早已被浏览器转化为具体的像素值了。

子元素margin-left可设置为auto，子元素width可设置为auto，子元素margin-right可设置为auto。

定:
父元素内容区可调整宽度
=父元素内容区宽度-子元素border-left-width-子元素padding-left-子元素padding-right-子元素border-right-width
=子元素margin-left + 子元素width + 子元素margin-right

  1. 把margin-left和margin-right全部设为auto，width设置为具体值，这时候两个外边距的长度相等，具体表现就是元素在父元素中居中显示，也就是我们想要的水平居中效果。
  2. margin-left margin-right width任意一个为auto，其他为具体值,设置auto的就 是父级容器剩余的宽度.
  3. 把某一边的外边距和width设置为auto，此时设置为auto的外边距等于0，宽度根据等式计算。
  4. 三个值都设置为auto,左右margin的值为0，但是还得满足那个等式，所以值为父元素的宽度。

一个auto都不设置，全部设置成具体值？这种情况在css里面被称作过约束，在这种情况下margin-right会被强制设置为auto。

可以理解为:

  1. 如果子元素width设置了auto，那么子元素width就会占据父元素内容区可调整宽度。

  2. 如果子元素width设置了具体值，那么父元素内容区可调整宽度就会让值为auto的子元素margin-left及值为auto的子元素margin-right平分。

  3. 如果子元素margin-left与子元素width与子元素margin-right都设置了具体值。

    • 总体值都没超过父元素内容区宽度，那么子元素margin-right会被强制设置为auto，之后再重新分配宽度。
    • 总体值超过父元素内容区宽度，那么就按设置的来。

BFC 块级格式化上下文 block formatting context

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

元素怎么开启BFC

  • float的值不是none
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

开启了BFC元素的特点

  • 内部的Box 会在垂直方向，一个接一个的放置
  • Box 垂直方向的距离由margin决定；同一个Box中的相邻Box的margin会发生重叠；
  • 每个盒子（块盒与行盒）的左边距从左往右格式化，即使浮动也是如此。
  • BFC的区域不会与浮动元素重叠。(两栏布局原理)
  • 计算BFC元素的高度时，浮动元素也参与计算。(清除浮动原理)

省略号

  • 单行文本省略号
  • 多行文本省略号

粘性定位

进阶参考

  1. 10 分钟理解 BFC 原理
  2. BFC特性及其简单应用
  3. 面试官：BFC是啥 开发中有哪些应用
avatar
文章
阅读
粉丝