CSS基础回顾（直指核心😎）

ChatGPT_Talk
1,482 阅读9分钟

我正在参加「掘金·启航计划」

前言

大家好，我是 「艾伦」 ，是一名刚进入职场不久的前端新人。最近一段时间笔者一直在思考一个问题：怎样才能跳出平时业务的迷城，找到自己感兴趣的前端领域，并成为该领域的技术专家呢？但细想一下现在前端的发展趋势，有太多的前沿领域值得深究。**在笔者还没找到真正感兴趣的领域时，难道只能原地踏步？此时能为成为技术专家做什么准备工作呢？ —— 笔者得到的答案是：巩固前端各个方面的基础，后续的技术成长之路才能通顺。

所谓打好地基再盖楼，此文就CSS基础知识的回顾，一起踏出前端职场人技术成长第一步！！！

正文

BFC相关：

BFC(Block Formatting Context) ：块级格式化上下文。 BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

BFC的原理（渲染规则）

  1. BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
  2. BFC的区域不会与浮动元素的布局重叠。
  3. BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
  4. 计算BFC高度的时候，浮动元素也会参与计算(清除浮动)

如何创建BFC

  1. overflow不为visible;

  2. float的值不为none；

  3. position的值不为static或relative；

  4. display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

脱离文档流、高度塌陷、清除浮动等相关问题：

首先知道HTML常见的定位方案有普通文档流、浮动和绝对定位三种，浮动和绝对定位都会脱离普通文档流，但浮动和绝对定位的脱离这个动作存在很大差异，下面就这两者进行展开：

  1. 浮动的脱离文档流的说法更严谨来讲属于半脱离，因为浮动的脱离在文档流中仍然占据位置，例如：文字环绕效果。而绝对定位则可以说是脱离文档流，盖在普通流的上面

  2. 浮动和绝对定位都是导致父容器高度塌陷。而浮动所产生的高度塌陷问题是能够解决的，所以，经常讨论的高度塌陷问题多在指浮动导致的高度塌陷问题 —— 清除浮动

这里补充一点，浮动的出现是为了完成文字环绕的效果

高度塌陷问题：

什么是高度塌陷？ 当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。

为什么要解决？ 父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要解决高度塌陷的问题。

怎么解决？ / 清除浮动的方法和优缺点：

  1. 给父容器添加宽高属性

    1. 优点：简单
    2. 缺点：局限于固定页面的布局，无法做到自适应

  2. 将父容器设置为BFC（块级格式化上下文）

    1. 缺点：兼容性限制。IE6及以下的浏览器不支持BFC，所以通过触发BFC来解决高度塌陷不能兼容IE6及以下浏览器。（在IE6中可以通过设置声明zoom:1;来触发hasLayout来解决高度塌陷问题。）

  3. 在浮动元素的后面新增一个div标签，并附上clear：both/left/right属性实现清除浮动的效果。（clear属性规定哪一侧不允许出现浮动元素）

  4. 给出现高度塌陷的元素添加以下属性

.box::after{
    content: '';
    clear: both;/*清除两侧浮动*/
    display: block;/*转成成一个块元素*/
    both; overflow: hidden;
    visibility: hidden;
}

注： ::after对IE8以下有兼容问题，可以通过增加zoom: 1;声明来解决

position相关：

static（默认）

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

relative

absolute

Q1: 哪个元素是绝对定位元素的“包含元素”？ 也就说绝对定位元素相对于谁定位？

取决于绝对定位元素父元素的position属性。

  1. 如果所有父元素position都是默认static，则绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在元素的外面，并且根据浏览器视口来定位。

  2. 如果其中一个父元素的定位属性（ 也就是包含绝对定位元素的那个元素（，如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）设置为relative，则绝对定位元素相对于它进行定位

Q2: 绝对定位元素发生堆叠，堆叠顺序是怎样的？

源顺序中后定位的元素将赢得先定位的元素。 也就是说后定位的会盖在先定位的元素上面。

可以通过z-index属性改变堆叠顺序

fixed - 固定定位

绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身

经典解决方案：标题保持固定，内容显示向上滚动并消失在其下

给标题添加以下属性：

h1 {position: fixed;top: 0;width: 500px;margin: 0 auto;background: white;padding: 10px;}

给内容最外层div加上：

margin-top: 60px;

sticky

它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了

经典解决方案：创建一个滚动索引页面
<h1>Sticky positioning</h1>

<dl>
    <dt>A</dt>
    <dd>Apple</dd>
    <dd>Ant</dd>
    <dd>Altimeter</dd>
    <dd>Airplane</dd>
    <dt>B</dt>
    <dd>Bird</dd>
    <dd>Buzzard</dd>
    <dd>Bee</dd>
    <dd>Banana</dd>
    <dd>Beanstalk</dd>
    <dt>C</dt>
    <dd>Calculator</dd>
    <dd>Cane</dd>
    <dd>Camera</dd>
    <dd>Camel</dd>
    <dt>D</dt>
    <dd>Duck</dd>
    <dd>Dime</dd>
    <dd>Dipstick</dd>
    <dd>Drone</dd>
    <dt>E</dt>
    <dd>Egg</dd>
    <dd>Elephant</dd>
    <dd>Egret</dd>
</dl>

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}

Flex布局相关：

flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid 可以同时处理行和列上的布局。

flexbox两根轴线 — 主轴和交叉轴

主轴由 flex-direction 定义，另一根轴垂直于它

flex-direction

更改 flex 元素的排列方向

属性值：

row：元素沿着行的方向显示

row-reverse：让元素沿着行的方向显示，但是起始线和终止线位置会交换。

column：元素沿着列的方向排列显示

column-reverse：元素沿着列的方向排列显示， 起始线和终止线交换。

flex-warp

用于实现多行Flex容器。如果项目的子元素总宽度大于容器最大宽度，可以将该属性设置为wrap，实现元素换行显示自动换行。

属性值：

wrap：如果项目的子元素总宽度大于容器最大宽度，项目子元素会换行显示

nowrap（默认）：元素不会自动换行，而是缩小以适应容器。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

flex-flow：flex-direction和flex-wrap的简写属性

第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

align-items

使元素在交叉轴方向对齐

属性值：

stretch（默认）： 将所有flex元素拉伸到最高元素的高度

flex-start：按flex容器的顶部对齐

flex-end：按flex容器的底部对齐

center：使他们居中对齐

justify-content

使元素在主轴方向对齐

属性值：

flex-start（默认）：从容器的起始线排列

flex-end：从容器的终止线开始排列

center：在中间排列

space-around： 使每个元素左右空间相等

space-between：把元素排列好之后的剩余空间拿出来，平均分配到元素之间

flex元素上的属性

可用空间

下面几个 flex 属性的作用其实就是改变了 flex 容器中的可用空间的行为

flex-grow

如果flex元素设定该属性一个正整数，则该元素会占用可用空间进行延展

如果多个flex元素设定该属性，则它们会将可用空间按设定的属性值形成的比例分配可用空间

flex-shrink

如果容器没有足够排列flex元素的空间，可以把 flex 元素flex-shrink属性设置为正整数**来缩小它所占空间到****flex-basis**以下

可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

flex-basis

auto（默认）

如果flex元素设定了宽度，则该元素flex-basis属性值为设定的宽度

如果没有设定，则该属性会采用元素内容的尺寸

flex： flex-grow flex-shrink flex-basis；

flex预定义值：

initial：0 1 auto

auto: 1 1 auto

none: 0 0 atuo

<number> : 如flex: 1 flex: 2； 相当于flex: 1 1 0; flex: 2 1 0；

结语

至此，笔者整理的CSS相关基础知识就到这了，前端职场人技术提升将成为笔者此段时间更文的系列专题，相信该专题能为和我一样刚进入职场不知如何提升的 或 马上要步入职场的面试者 提供一些帮助～

如果这篇文章让你觉得有所帮助，欢迎持续关注该专题，相信能给你带来更多的收获～

如果文章对您有所帮助，欢迎点赞关注哦，算是对笔者的一些鼓励~

avatar
文章
阅读
粉丝