1.css继承相关

就是给父类设置一些属性，子级继承了父级的该属性。

2.无继承性的属性

display
文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白（空格）符的处理
unicode-bidi：设置文本的方向
盒子模型的属性
背景属性
定位属性
生成内容属性
轮廓样式属性
页面样式属性
声音样式属性

3.可继承

3.1所有元素可以继承的属性

元素可见性：visibility
光标属性：cursor

4.CSS预处理工具

CSS预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的工具。
三种主流的预处理器是：Less、Sass和Stylus。

5.盒模型

盒模型又称框模型，包含了元素内容(content)、内边距(padding)、边框(border)和外边距(margin)几个要素。

由于IE盒模型的怪异模式，IE模型和标准模型的内容计算方式不同。
IE模型：元素宽度width=content+padding+border
标准模型：元素宽度width=content
如何设置这两种模式：
标准：box-sizing：content-box;IE：box-sizing：border-box;

6.BFC（边距重叠解决方案）

6.1.BFC基本概念

BFC：块级格式化上下文。BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。

6.2.什么情况下会创建BFC

float的值不为none
position的值为absolute或fixed
行内块（即display为inline-block）
表格单元（display为table、table-cell、table-caption、inline-block等HTML表格相关的属性）
弹性盒（display为flex或inline-flex）
默认值。（overflow不为visible）

6.3.BFC作用（应用场景）

自适应两（三）栏布局
避免元素被浮动元素覆盖
可以让父元素的高度包含子浮动元素，清除内部浮动
去除边距重叠现象，分属于不同的BFC时，可以阻止margin重叠

7样式优先级

样式类型分为三类：
1.行间

<h1 style="font-size:12px;color:#000;">我的行间CSS样式</h1>

2.内联

<style type="text/css">
    h1{
        font-size:12px;
        color:#000;
        }
</style>

3.外部

    <link rel="stylesheet" href="css/style.css">

选择器类型：

ID #id
class .class
标签 p
通用 *
属性 [type="text"]
伪类 :hover
伪元素 ::first-line
子选择器、相邻选择器权重计算规则

第一等：代表内联样式，如：style=""，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100.
第三等：代表类，伪类和属性选择器，如.xontent，权值为0010.
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001.
通配符、子选择器、相邻选择器等，如*、>、+，权值为0000.
继承的样式没有权值。
！important
important的作用是提升优先级，换句话说，加了这句的样式的优先级是最高的（比内联样式的优先级还高）。

前端面经20220817（CSS）