CSS

面试

CSS

盒模型

content-box：包含 margin；

border-box：不包含 margin；元素设置 padding 或 border 不会改变其宽高；

CSS 继承性

可继承：与文本相关的（font；color；line-height）；

不可继承：与布局相关的；

margin 垂直外边距合并问题

垂直方向 - 相邻元素：取大值；父子元素：子元素的 margin 和父元素的 padding 合并；

水平方向 - 不合并；

BFC

一个独立的布局空间，不受外部的影响；

特性：垂直方向依次排列，浮动元素也参与计算高度；

形成条件：overflow: hidden；float: left；position: absolute；display: inline-block

作用：防止 margin 重叠；清除浮动；

link 和 @import 的区别

import 需要等到页面加载后再去加载，可能会导致闪烁；

position

relative（自身）；absolute（最近定位的父元素）；fixed（视窗位置）；sticky（黏性）；

absolute 脱离文档流，周围元素会忽略它，填补空间

float

脱离文档流，后面的元素会围绕它排列

flex

flex-direction; flex-wrap: flex-flow; justify-content; align-items;

order；flex-grow；flex-shrink；flex-basis；flex；align-self；

flex-grow: 放大比例，默认为 0，如果存在剩余空间也不放大；

flex-shrink：缩小比例，默认为 1，如果空间不足，该项目将缩小；

flex-basis：分配空间之前应占据的主轴空间，默认为 auto，即项目本身的大小；

/* 圣杯布局 */
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.header,
.footer {
	flex: 0 1 auto;
}
.content {
	flex: 1 1 auto;
	display: flex;
}
.sidebar {
	flex: 0 1 200px;
}
.main {
	flex: 1 1 auto;
}
/* 1 1 auto; 相当于自动放大 */

/* 双飞翼 */
.container {
	display: flex;
	flex-wrap: wrap;
}
.main {
	flex: 1;
	order: 2;
}
.sidebar {
	flex-basis: 20%;
	order: 1; /* 左侧边栏 */
}
.another-sidebar {
	flex-basis: 20%;
	order: 3; /* 右侧边栏 */
}

Sass 和 PostCSS

Sass

嵌套语法；import 机制；提供变量、混合、函数功能；颜色、数值、字符运算功能；

PostCSS

自动前缀；代码压缩、优化；css 模块化；

宽高自适应的正方形

1、外层容器设置宽高，内层设置 padding-bottom：100%

2、calc；vw/vh；

3、flex 布局；

三角形

.triangle {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid red;
}

居中对齐

水平居中

1、text-align: center;

2、margin: 0 auto;

3、justify-content: center;

4、left: 50% + margin-left 负值

垂直居中

1、line-height: height;

2、align-items: center;

3、top: 50% + margin-top 负值