前端编程手记

Appearance

CSS ​

用来控制HTML元素的布局、颜色、字体等视觉效果。核心特点：

  • 分离结构与样式： HTML负责内容结构，CSS负责表现样式
  • 层叠机制： 多个样式规则可共同作用，通过样式优先级（如!important、内联样式、ID、类、标签等）解决冲突
  • 盒模型： 每个元素都可以看作一个矩形框，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）

一、CSS3 新特性 ​

1.选择器增强 ​

  • 属性选择器（如 [type="text"]）。
  • 伪类选择器（如 :nth-child(n)、:not(selector)）。
  • 伪元素（如 ::before、::after）。

2.盒模型升级 ​

  • box-sizing: 盒模型尺寸计算包含边框和内边距，更容易控制布局。

3.背景与边框 ​

  • 多背景图：background-image支持多个图层。

  • 圆角边框：border-radius。

  • 阴影效果：box-shadow（盒子阴影）、text-shadow（文字阴影）。

  • 边框图片：border-image用图片替代边框样式。

4.渐变与颜色 ​

  • 线性渐变：linear-gradient。
  • 径向渐变：radial-gradient。
  • 颜色函数：如 rgba()、hsla() 等。

5.变换(Transform) ​

  • 2D变换：translate()、rotate()、scale()、skew()。
  • 3D变换：translate3d()、rotate3d()、scale3d()。配合 perspective 属性实现 3D 效果。关键设置：transform-style: preserve-3d;

6.过渡与动画 ​

  • 过渡：transition 用于元素属性变化时的平滑过渡。

  • 动画：@keyframes 定义动画序列，animation 应用动画。

7.弹性布局（Flexbox） ​

  • 容器属性：display: flex; 或 display: inline-flex;
  • 项目属性：flex-grow、flex-shrink、flex-basis 等。
  • 对齐属性：justify-content（项目在主轴上的对齐方式）、align-items（项目在交叉轴上的对齐方式）、align-content（多根轴线的对齐方式）。

8.媒体查询 ​

  • 响应式设计核心：根据屏幕尺寸适配样式（如 @media (max-width: 768px)）

9.字体与排版 ​

  • 自定义字体：@font-face引入网络字体。

  • 文本效果：word-wrap（换行）、text-overflow（省略号）。

二、CSS权重优先级计算规则 ​

顺序： !important > 内联样式 > ID > 类/伪类/属性 > 标签 > 通配符。

三、BFC ​

BFC（块级格式化上下文）是页面上一块独立的渲染区域，内部布局与外部互不干扰。

BFC的三大应用 ​

1.清除浮动，解决高度塌陷 ​

当父元素内部的子元素全部浮动时，父元素的高度可能会塌陷为0。

问题代码与效果：

html
<div class="parent" style="border: 2px solid red;">
  <div class="child" style="float: left; width: 100px; height: 100px; background: lightblue;">浮动元素</div>
</div>
浮动元素

BFC解决方案：

给父元素触发BFC，例如加上overflow: hidden。

html
<div class="parent" style="border: 2px solid red; overflow: hidden;"> <!-- 触发BFC -->
  <div class="child" style="float: left; width: 100px; height: 100px; background: lightblue;">浮动元素</div>
</div>
浮动元素

或者添加一个 clearfix 类，触发 BFC。

css
.clearfix::after {
  content: ""; /* 生成一个空内容 */
  display: block; /* 或 `table`，确保是块级元素 */
  clear: both; /* 清除左右两侧的浮动 */
}

2.阻止外边距合并 ​

在常规流中，两个相邻块级元素的垂直外边距会合并（取较大值）。

问题代码与效果：

html
<div style="margin-bottom: 50px; background: pink;">元素A（下外边距50px）</div>
<div style="margin-top: 30px; background: lightgreen;">元素B（上外边距30px）</div>
元素A（下外边距50px）
元素B（上外边距30px）

实际上它们只有50px的距离，因为外边距合并了。

BFC解决方案​：

用另一个触发了BFC的容器（如 overflow: hidden）包裹其中一个元素，将它们隔离到不同的BFC中。

html
<div style="margin-bottom: 50px; background: pink;">元素A</div>
<div style="overflow: hidden;"> <!-- 触发BFC，创建新的结界 -->
  <div style="margin-top: 30px; background: lightgreen;">元素B</div>
</div>
元素A
元素B

此时，两个元素的外边距不再合并，它们之间的实际距离就是80px。

3.阻止元素被浮动元素覆盖​ ​

当一个元素浮动后，可能会与后续的同级块级元素发生重叠。

问题代码与效果：

html
<div style="float: left; width: 100px; height: 100px; background: orange;">浮动元素</div>
<div style="height: 200px; background: grey;">我是一个普通的块级元素</div>
浮动元素
我是一个普通的块级元素

灰色的块级元素会部分被橙色浮动元素覆盖，但其中的文字会环绕浮动元素。

BFC解决方案​：

给这个普通块级元素触发BFC。

html
<div style="float: left; ...">浮动元素</div>
<div style="height: 200px; background: grey; overflow: hidden;"> <!-- 触发BFC -->
  我是一个触发了BFC的元素
</div>
浮动元素
我是一个触发了BFC的元素

触发BFC后，这个元素会形成一个独立的区域，​不会与左边的浮动元素发生重叠，而是会自适应剩余宽度，形成两栏布局的效果。

BFC可以解决绝对定位导致的高度塌陷吗？

不可以。BFC主要解决的是浮动导致的高度塌陷。因为绝对定位的元素完全脱离文档流，其位置相对于最近的已定位祖先元素定位，不再属于父容器内容流的一部分，因此父容器计算高度时不会包含它们。

四、伪类和伪元素 ​

伪类和伪元素都是CSS选择器。

伪类用来选择元素的特殊状态，例如:hover、:active、:first-child等。

伪元素用来创建一些不在文档树种的元素，并为其添加样式。

伪类作用于已经存在的元素，而伪元素创建新的元素。

五、长度单位px、em和rem ​

px 是像素单位，是一个绝对长度单位，由于不同设备的屏幕分辨率不同，所以1px在不同设备上可能表示不同的物理尺寸。

em 是一个相对长度单位，它相对于当前元素的字体大小。例如，如果一个元素的字体大小为16px，那么1em就等于16px。

rem 也是一个相对长度单位，它相对于根元素的字体大小。例如，如果根元素的字体大小为16px，那么1rem就等于16px。rem单位常用于实现响应式布局。