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

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

说一下 BFC

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

触发条件应用场景

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

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

盒子模型

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

标准盒模型

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

怪异盒模型

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

选择器选择器

"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>
;
// 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 选择器 > 类选择器 > 标签选择器

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

css 单位元素隐藏 display、visibility、opacity 有什么区别垂直居中flexflex 容器属性

flex 项目属性

需要注意

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

grid

/post/685457…

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

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

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

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

文本溢出单行

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

多行

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