总结之CSS篇

1，盒模型

页面渲染时，dom元素所采用的 布局模型，能够经过 box-sizing 进行设置，根据计算高度的区域可分为：

• content-box （W3C 标准盒模型）
• border-box （IE盒模型）

1，content-box中，元素的宽，高包含元素的 padding，border

// div大小为 140 * 140，内容盒大小为 100 * 100
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 10px black;
}
复制代码

2， border-box中，元素的宽，高不包含元素的padding，border，margin

// div大小为 100 * 100，内容盒大小为 60 * 60
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 10px black;
}
复制代码

2，选择器优先级

• !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
• 选择器 从右往左 解析

3，属性继承

• 全部元素可继承：visibility cursor
• 内联元素可继承：letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
• 块元素可继承：text-align text-indent

4，居中布局

1，水平居中

// 行内元素，在父元素上设置 text-align 便可
div {
    text-align: center;
}

// 块级元素，设置 margin
div {
    margin: 0 auto;
}

// absolute + transform 结合使用
div {
    position: relative;
    div {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

// flex + justify-content: center
div {
    display: flex;
    justify-content: center;
}
复制代码

2，垂直居中

// 行内元素：line-height
div {
    height: 20px;
    line-height: 20px;
}

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
}

// flex + align-items: center
div {
    display: flex;
    align-items: center;
}

// table
div {
    display: table-cell;
    vertical-align: center;
}
复制代码

3，水平垂直居中

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

// flex + justify-content + align-items 
div {
    display: flex;
    align-items: center;
    justify-content: center;
}
复制代码

5，BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其余元素交互的区域。

下列方式会建立块格式化上下文：

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

6，去除浮动影响

• 经过 clear:both 清除浮动
• 父级设置高度
• 建立父级 BFC

7，css动画

animation：帧动画

• animation-name：绑定到选择器的 keyframe 名称
• animation-duration：完成动画所花费的时间，以秒或毫秒计
• animation-timing-function：动画的速度曲线
• animation-delay：动画开始以前的延迟
• animation-iteration-count：动画的播放次数
• animation-direction：是否轮流反向播放动画

transition：过渡动画

• transition-property：过渡效果的 CSS 属性的名称
• transition-duration：完成过渡效果所须要的时间
• transition-timing-function：速度曲线
• transition-delay：动画延迟时间

以上为大概能想到的经常使用 CSS 属性，简单的总结下，水文一篇，后续持续补充完善～