前端 OnePiece CSS （娜美）篇

娜美，日本漫画《航海王》及衍生作品中的女主角。草帽海贼团成员之一，人称"小贼猫"，头脑聪明又机灵，精通气象学和航海术，能用身体感知天气，完美指示航路，是个能精确画出航海图的天才航海士。本质上是个细心、善良、重视感情、嫉恶如仇、偶尔有些温柔能干的女性，负责貌美如花。

CSS，前端的重要组成部分，负责前端貌美如花，展示给用户各式各样炫酷好看的页面，本篇记录自己整理的 CSS 内容，不定期更新，如有不对的地方，还请大家指出，会及时改正，多多包涵。

说一下 BFC

BFC(Block Formatting Context)，块级格式化上下文，在页面中独立渲染的区域，区域内外元素互不干扰。

触发条件

文档根元素
浮动元素，float 不为 none。
绝对定位元素，position 为 absolute 或 fixed。
overflow 为 auto、scroll、hidden。
行内块级元素，display 为 inline-block。
弹性元素，display 为 flex 或 inline-flex。
网格元素，display 为 grid 或 inline-grid。
表格元素，display 为 table、table-caption、table-cell、table-footer-group、table-header-group、table-row、table-row-group。
display 为 flow-root。
contain 为 layout、content、paint

应用场景

避免元素之间 margin 叠加（margin 塌陷）。

在相邻两个盒子外面包裹一层元素，并触发这个元素生成 BFC

清除浮动

因为 BFC 在计算高度的时候浮动元素也会参与计算。

使用 display: flow-root 和浮动元素实现双栏布局。现在基本上都是使用弹性盒子实现布局。

盒子模型

默认情况下，浏览器使用标准盒模型，即每个元素都是由内容、内边距、边框和外边距组成的。

标准盒模型

css 属性 box-sizing: content-box;，设置元素的宽高时不会包含 padding、border。

怪异盒模型

css 属性 box-sizing: border-box;，设置元素的宽高时包含 padding、border。

选择器

js 复制代码

<div id="main" data-theme="dark" class="box">
  <div class="first base">
    <div class="first_1">
      <p class="first_1_1"></p>
    </div>
    <div class="first_2"></div>
  </div>
  <div class="second"></div>
  <div class="second"></div>
</div>;
// id 选择器 (#idname)
document.querySelectorAll("#main"); // NodeList [div#main]

// class 选择器 (#classname)
document.querySelectorAll(".box"); // NodeList [div#main.box]

// 标签选择器 (tagname)
document.querySelectorAll("p"); // NodeList [p]

// 后代选择器 (A B)
document.querySelectorAll(".box div"); // NodeList(5) [div, div, div, div, div] 包括子孙元素

// 子代选择器 (A > B)
document.querySelectorAll(".box > div"); // NodeList(3) [div, div, div] 只包含一级子元素

// 相邻同胞选择器 (A + B) 第一个元素
document.querySelectorAll(".first + .second"); // NodeList [div.second]

// 属性选择器
document.querySelectorAll('[data-theme="dark"]'); //NodeList [div#main.box]

// 伪类选择器 (A:pseudo-class) :first-child 一组兄弟元素中的第一个元素。
// 伪元素选择器 (A::pseudo-element) ::before、::after

优先级

!important > 行内样式 > id 选择器 > 类选择器 > 标签选择器

css 复制代码

// 如果有相同类型的选择器，后写的权重高
.first {
  color: red;
}
.base {
  color: blue; // 生效
}

// 出现次数多的权重高
.first.base {
  color: red; // 生效
}
.first {
  color: blue;
}

css 单位

px 相对固定的单位
% 相对父元素宽度的百分比。
em 相对父元素字体大小的单位，如果自身定义了 font-size 则按自身的计算。
rem 相对根元素字体大小的单位。默认情况下浏览器 font-size: 16px 则 1rem = 16px。
vw 视口宽度的百分比。
vh 视口高度的百分比。
vmin 视口宽度和高度的最小值的百分比，比如一个元素的宽度设置为 100vmin，那么它的宽度就是视口宽度和高度中小的那个值。
vmax 视口宽度和高度的最大值的百分比，同理选择视口宽度高度中较大那个值。

元素隐藏 display、visibility、opacity 有什么区别

display: none; 隐藏元素，元素不占位，无法响应点击事件。
visibility: hidden; 隐藏元素，元素占位，无法响应点击事件，子元素可以设置 visibility: visible 显示。
opacity: 0; 隐藏元素，元素占位，可以响应点击事件。

垂直居中

绝对定位 + 负 margin (需要知道元素宽高)
绝对定位 + margin: auto
绝对定位 + transform: translate(-50%, -50%)
flex
grid

flex

flex 容器属性

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: flex-direction flex-wrap 的简写;
justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch; 有多根轴线才生效与 justify-content 类似。

flex 项目属性

order: number;定义了项目的排列顺序，数值越小，排列越靠前，默认为 0。

flex-grow: number;定义了项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

flex-shrink: number;定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

flex-basis: number;定义了在分配多余空间之前，默认值为 auto，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

需要注意

flex: flex-grow flex-shrink flex-basis;

align-self: auto | flex-start | flex-end | center | baseline | stretch;

允许单个项目与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性。

grid

juejin.cn/post/685457...

css 动画 transition、trransform、animation 之间的区别

transition

元素在一定时间内的过度，例如：transition: width 2s ease-in-out;

transform

元素的变换，例如：transform: rotate(45deg);

animation

动画，例如：animation: 关键帧（keyframes） 2s ease-in-out; 配合@keyframes 定义关键帧一起使用。

文本溢出

单行

css 复制代码

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行

css 复制代码

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 行数 */
  -webkit-box-orient: vertical;
}