css知识

一些概念

CSS 盒子模型

css 盒模型本质上是一个盒子，封装周围的html元素，盒模型结构（从外到里）：

外边距：决定了元素与元素之间的距离，我称之为”社交距离“；

边框：就是这个盒子的边框，是否有边框，边框的粗细颜色，甚至可以设置边框的阴影等；

内边距：就是实际元素内容跟边框的距离，假设边框为一个表格的话，内边距就是决定表格内容是要在左上、右下、还是居中；

实际内容：html的元素内容；

关于 BFC 你了解哪些

BFC 是什么 ：

一句话：块状格式化上下文

通俗解释：BFC 是一个独立的渲染区域，感觉就像是一个结界，让处于 BFC 内部和外部的元素互相隔离，使内外元素的定位不会相互影响。

BFC 规则 ：

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列

• BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签

• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠

• 计算BFC的高度时，浮动元素也参与计算

怎么实现 BFC ：

BFC的触发条件贼多，举几个常见的例子：

• 元素设置浮动：float 除 none 以外的值

• 元素设置绝对定位，position: absolute/fixed

• overflow 值为：hidden、auto、scroll

• display 值为：inline-block、table-cell、table-caption、flex

BFC 有哪些特点 ：

我的理解 BFC 没有特点，BFC 是个规则，这个规则就是它的特点，在某下场景下使用 BFC 规则所实现的效果，就是它的特点。

例如两个块元素垂直方向的外边距会重叠，那么就可以使用 BFC 的隔离规则，做出调整，使其不会重叠，那么这个就是 BFC 的特点：防止垂直方向的外边距重叠。

CSS3 新特性

1. 选择器

2. 新样式：边框、背景、文字、颜色

3. transition 过渡

4. transform 转换

5. animation 动画

6. 颜色渐变

7. 布局: flex布局、栅栏布局

CSS 有哪些选择器以及它们的优先级

id选择器（id）> 类选择器（class）> 元素选择器 > 通用选择器（*）

（选择器的优先级，可以理解为越具体优先级越高）

注：!important 例外规则

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些实践

如何实现水平垂直居中

如何清除浮动

更新中。。。