2021年9月份面试-css 基础

1、position 有哪些值

static
relative
absolute
fixed
sticky 详情：developer.mozilla.org/zh-CN/docs/…

sticky 顶部固定筛选条：www.zhangxinxu.com/wordpress/2…

2、flex: 0 1 auto;

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

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

flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为auto，即项目的本来大小。

flex 是 flex-grow, flex-shrink , flex-basis 的简写，默认值为0 1 auto。后两个属性可选

详情：30 分钟学会 Flex 布局

3、实现水平垂直居中的四种方案

方案一：transform + position: absolute;

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

方案二：flex 布局

.fatherBox {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

方案三：margin: auto;

.father {
    position: relative;
}
.son {
    position: absolute;
    left: 0;
    top: 0; 
    right: 0;
    bottom: 0;
    margin: auto;
}

方案四：table 布局

.father {
    display: table;
    text-align: center;
    margin: 100px auto;
    background: #fff;
}
.son {
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 200px;
}

4、css 画一个三角形

/* 右上角 比较常用 */
.triangle-topRight {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

5、css 画一个宽度自适应的正方形

/* 方法一 */
.square1 {
    width: 20%;
    padding-top: 20%;
    background-color: aquamarine;
}
/* 方法二 */
.square2 {
    width: 20%;
    height: 20vw;
    background-color: aquamarine;
}

6、盒模型

标准盒模型：box-sizing: content-box;

怪异盒模型：box-sizing: border-box; 包含 padding 和 border。

7、BFC 块级格式上下文

定义：BFC（Block Formatting Contexts ）即块级格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

特性：

1.内部的元素会在垂直方向，从顶部开始一个接一个地放置。 
2.元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻 元素的margin会发生叠加
3.都是从最左边开始的。每个元素的margin box的左边，与包含块border box的左边(对于从左往右的格式化，否则
相反)。即使存在浮动也是如此
4.BFC的区域不会与float box叠加。 
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 
6.计算BFC的高度时，浮动元素也参与计算（当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包
括浮动元素的高度）

触发BFC的方式：

float 除了none以外的值 

overflow 除了visible 以外的值（hidden，auto，scroll ） 

display (table-cell，table-caption，inline-block, flex, inline-flex) 

position值为（absolute，fixed） 

fieldset元素