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