理解CSS

基础知识

选择器和优先级

选择器

类型选择器
全局选择器
id选择器
类选择器
属性选择器
伪类选择器
伪元素选择器
关系选择器

关系选择器：

后代关系选择器：
div p
子代选择器：
只选中直接子元素 div > p
邻接兄弟选择器
只选择同级关系上紧挨着的元素 p + img
通用兄弟选择器
选中对应的所有兄弟元素，不要求相邻 p ~ img

优先级

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;

B 的值等于 ID选择器 出现的次数;

C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;

D 的值等于 标签选择器 和 伪元素 出现的总次数。

继承

大部分继承相关的属性与文本相关。
可用inherit指定一个属性值从其父元素继承。
以下代码实现h1标题为28px，但card里的h1标签为14px。

    <div>
        <h1>outside title</h1>
        <div class="card">
            <h1>inside title</h1>
        </div>
    </div>

    <style>
        h1{
            font-size: 28px;
        }
        .card{
            font-size: 14px;
        }
        .card h1{
            font-size: inherit;
        }
    </style>

盒模型

基于盒模型的实现

三角形

.triangle{
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom-color: red;
}

固定比例矩形

.ratio-box{
            background: pink;
            width: 100%;
            height: 0;
            padding: 0;
            padding-bottom: 75%;
        }

水平居中

margin: auto

渐变边框

.awsome-box{
            width: 150px;
            height: 100px;
            border: 8px solid transparent;
            /* border-radius: 12px; */
            /* 设置元素的背景（背景图片或颜色）延伸到内边距、边框盒子 */
            background-clip: padding-box,border-box;
            /* 背景图片的摆放以 padding、border 区域为参考 */
            background-origin: padding-box,border-box;
            background-image: 
            /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
                linear-gradient(to right, #fff,#fff),
                /* 渐变轴为135度 */
                linear-gradient(135deg,skyblue,pink);
        }

负边距

只有margin可以设置为负值，应用于局部调整或修改第三方组件。

布局

流布局

常规流
float
position
flex
grid
multicol

BFC（block formating context）

一个盒子是BFC或具有BFC特性，是指其盒内形成一个新的BFC。

触发BFC（满足以下任一条件）

display: flow-root|inline-block
position:absolute|fixed
float:不为none
overflow:不为visible

外边距塌陷

指相邻两个块级盒垂直margin折叠的现象。

产生外边距塌陷的情况：

2个兄弟元素间相邻的上下外边距
父子元素间相邻的上下外边距
内容为空的元素自己的上下外边距

消除外边距塌陷：

让其不相邻：增加border、padding或内联元素。
父子重叠时，可设置父元素为BFC，使父子不在同一级BFC中。

IFC （inline formating context）

由内容撑起，有一个看不见的line-box。

单行文字垂直居中：line-height
文字和icon垂直对齐：vertical-align

flex布局

flex布局教程：语法篇

父元素可设置的属性

flex-direction 主轴方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap 换不换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow flex-direction和flex-wrap的混合写法，默认为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 主轴上的排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items 交叉轴上的排列方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content 多条主轴的排列方式

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

子元素可设置的属性

order 排列顺序，数值越小越靠前
flex-grow 剩余空间分配比
flex-shrink 缩小比例
flex-basis 分配剩余空间之前项目占据的主轴空间
align-self 单个项目在交叉轴上的位置，可覆盖align-items属性
flex flex-grow, flex-shrink 和 flex-basis的简写

网格布局

分割布局再填充，更适合小面积或小组件。

position

relative
absolute
fixed
sticky：相对于它的最近滚动祖先的视口定位（可应用于页面内的一些小按钮）

层叠上下文

对html元素的三维构想，将元素沿着垂直屏幕的虚构的z轴排开。

形成层叠上下文的条件（任一）

position：relative/absolute且z-index非auto
position:fixed/sticky
flex/grid子元素且z-index非auto
opcaity<1
transform不为none
will-change不为通用值

z-index无法超越父亲的z-index显示区域。

变形、过渡、动画

transform

旋转，缩放，倾斜或平移给定元素。

translate 移动
rotate 旋转
scale 放缩
matrix 变形矩阵

transition

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

.box{
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
}

animation

@keyframes关键帧用来定义动画过程中出现的关键样式。

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

如何提升动画性能

尽量不用触发reflow的属性
触发硬件加速，如设置will-change,设置transform 3d等
尽量使用transform和opacity去写动画

响应式设计

媒体查询

加一些约束条件，如视口宽度、屏幕比例、设备方向等，满足条件就生效。

移动端视口

dpr = 设备像素/css像素

<meta>标签对viewport设置完成移动端适配。常见viewport的设置：

scale=1
scale= 1/dpr

相对长度

em 让展示区域根据字号不同做出放缩调整
rem 可实现不同设备上的等比放缩展现
vh和wh可实现不同设备上的等比放缩展现，不需要js动态设置

css生态相关

语言增强：预处理器，后处理器

scss,less,stylus经过预处理器处理成css，再经过后处理器处理成真实使用的css代码。

工程架构

css模块化
css-in-js
原子化css

css模块化：解决全局污染

BEM命名规范
vue-loader里的scoped
css modules

day 5 理解CSS | 青训营笔记