理解CSS

实现三角形

//html
<div class="triangle-bottom"></div>

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

实现固定比例矩形

或者使用新特性：aspect-ratio

//html
<div class="ratios-box"></div>

//css
.ratios-box {
    background-color: red;
    //width是父元素宽度100%
    width: 100%;
    height: 0;
    padding: 0;
    //padding-bottom是父元素宽度75%
    padding-bottom: 75%;
}

实现水平居中：margin: auto;

实现渐变边框

//html
<div class="awesome-border"></div>

//css
.awesome-border {
    width: 150px;
    height: 100px;
    border: 8px solid transparent;
    border-radius: 12px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: 
        linear-gradient(to right, #fff, #fff),
        linear-gradient(135deg, #e941ab, #a557ef)
}

设置负外边距：margin负值最终减少的是外界可感知的宽高

设置左边或顶部的负外边距，元素会相应地向左或向上移动，导致元素与它前面的元素重叠； 如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来；

块级格式化上下文（block formatting context）

BFC是一种格式规范，如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，它的内部显示类型是flow-root，即这个盒子内部形成了一个新的块级格式上下文。

能解决什么问题

1：元素开启BFC后，其子元素不会产生margin塌陷问题

2：元素开启BFC后，自己不会被其他浮动元素所覆盖

3：元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

如何开启

根元素 html

浮动元素 float:left

绝对定位、固定定位元素 position:absolute

行内块元素 display:inline-block

表格单元格：table、thead、tbody、tfoot、th、td、tr、caption，display:table

overflow的值不为visible的块元素 overflow:auto

伸缩项目 display:flex

多列容器 column-count: 1

column-span为all的元素

display的值设置为flow-root

外边距塌陷

网格布局Grid

display: grid

可以定义由行和列组成的二维布局，然后将元素放到网格中。元素可以只占据一个单元格，也可以占据多行或多列。

层叠上下文

层叠顺序：不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序

其中：z-index 只在同一个层叠上下文内比较；子元素的z-index无法超越父元素的z-index显示顺序

transform

2D相关属性：

transform: translate(移动)、rotate(旋转)、scale(缩放)、matrix(变形矩阵)等

transform-origin: right top、center等表示变形时依据的原点

3D相关属性：

transform: translate3D、rotate3D、scale3D、matrix3D

transform-origin: right top、center等表示变形时依据的原点

transform-style: flat或preserve看子元素的3d表现

perspective: 观看点距离z=0这个平面的距离，可以在transform中用perspective()使用作用为当前元素，也可以直接使用，给后代元素一个统一值

perspective-origin: 观看者的位置，如top、bottom等

backface-visibility: 元素正面只有朝向观察者的时候可见

animation 动画

transform、transition、animation 性能相关

响应式布局

媒体查询

媒体查询允许某些样式只在页面满足某些特定条件时才生效。我们可以将媒体类型（如screen、print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）作为约束条件。

// css中使用呢格式
@media screen and (min-width: 320px) and (orientation: landscape) {...}
//link 标签中使用示例
<link rel="stylesheet" media="screen and (max-width:600px)" href="smallscreen.css">

使用媒体查询的一些Tips

1. 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
2. 由于设备的多样化不可枚举，断点的选择尽量根据内容选择
3. 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

移动端的viewport

rem等比放缩

vw和vh