深入CSS ｜青训营选择器的特异度 = #(id选择器)个数*100+.((伪)类选择器)个数*10+E(标签选择器)

1.选择器

特异度(Specificity)

选择器的特异度 = #(id选择器)个数*100+.((伪)类选择器)个数*10+E(标签选择器)个数
特异度越大，优先级越高。

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。
多数边框类属性，比如Padding，Margin，背景和边框的属性都是不能继承的。

显式继承

使子元素等同于父元素的某些不可继承的元素。

*{
    box-sizing:inherit;
 }
 html{
     box-sizing:inherit;
 }
 .some{
      box-sizing:inherit;
 }

2.初始值

每个CSS属性都有一个初始值，可以使用initial关键字显式重置为初始值(相当于将该属性的值设为初始值)。

3.css样式匹配计算过程

css样式匹配过程1.jpg css样式匹配过程2.jpg css样式匹配过程3.jpg

4.布局(Layout)

确定内容的大小和位置，根据元素、容器、兄弟节点和内容等信息来计算。

盒模型

width

指定 content box 宽度

取值为长度、百分数、auto

auto 由浏览器根据其他属性确定

百分数相对于容器的 content box 宽度

height

指定 content box 宽度

取值为长度、百分数、auto

auto 取值由内容计算得来

百分数相对于容器的 content box 宽度

容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距

百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色

三种属性：border-width、border-style、border-color

四个方向：border-top、border-right、border-bottom、border-left

margin

指定元素四个方向的外边距

取值可以是长度、百分数、auto

百分数相对于容器宽度

常用margin:auto实现水平居中。
若两元素margin相邻，margin在垂直方向上会有合并，取两者中较大值。

box-sizing属性

默认情况下，width、height只管内容区，对内填充区、边框区、外边距区无用。

作用： 设置width,height控制哪些区域宽度、高度。

// 取值：
content-box // 控制内容区
border-box  // 控制内容区+内填充区+边框区
inherit     // 从父元素继承

display属性

block 块级
inline 行级
inline-block允许在元素上设置宽度和高度，可以位于其他元素旁边，不会被拆成多行
none不显示，不占排版空间

Flex布局

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction属性:

决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap属性:

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow:

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> <flex-wrap>;

justify-content属性:

定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性:

定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性:

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex属性:

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 auto (1 1 auto) 和 none (0 0 auto)。

Grid布局

将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

float布局

设置该属性后，元素被当做block类型。
需设置具体height值。
父元素需设置height

clear清除HTML元素的向左、向右“浮动”特性。

绝对定位

position:static; // 默认值，非定位元素
position:relative; //相对定位，不脱离文档流
postion:absolute; // 绝对定位，脱离文档流，相对非static祖先元素定位
position:sticky;  //粘性定位，相对于视口绝对定位(导航栏随着页面下滑常居顶部时常用到）

总结

CSS方面的知识又多又杂，是无法短期内全部掌握的。
建议初学者先了解些基础的、重要的(比如布局那些)，在开发的过程中去查文档，逐步在实践中了解掌握。(Mdn里面很全。）

css很重要，掌握程度也关系着页面的颜值啊。

深入CSS ｜ 青训营