CSS基础知识

1、选择器

id选择器  #

class选择器   .

标签选择器 

通配符  *

属性选择器  []

父子选择器/派生选择器

直接子元素选择器   >

并列选择器（多个选择器同时修饰，并且不加空格）

分组选择器

 

 

2、权重

权重值（256进制）

！important          Infinity

行间样式              1000

id                          100

class|属性|伪类    10

标签|伪元素           1

通配符                   0       

权重计算：权重值相加

Infinity+1>Infinity

3、盒模型：

4、层模型

     position:  absolute、relative、fixed、sticky

     absolute特点：

     1、脱离原来位置进行定位；

     2、相对于最近的父级定位元素进行定位，如果没有则相对于文档边框进行定位。

     relative特点：

   1、保留原来位置进行定位；
   2、相对于父级元素进行定位，无论是否时定位元素。

   使用原则：relative作为标杆基准，用absolute进行元素定位。

5、浮动模型：

1.浮动元素产生了浮动流

1）所有产生了浮动流的元素，块级元素看不到他们
2）产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素

触发bfc(Block Formatting Content)块级格式化上下文条件：

满足下面任一条件即可

浮动元素   float属性值为除了none以外的值

绝对定位元素 position 为 absolute、fixed

display 为inline-blocks,table-cells,table-captions

overflow 为 hidden,auto,scroll

注意：能清楚浮动的必须是块级元素

6、伪元素：

特点：

1)任何一个标签在创建时就产生伪元素，可以通过css样式将其选中

2）默认就是行级元素，必须有一个content属性

利用伪元素清除浮动。

注意：

1、凡是设置position;absolute、float:left/right，系统内部自动将元素转换成inline-block，行级块元素不设置宽高，则有内容撑开。

2、字体在容器的垂直中间，设置行高line-height等于容器高度即可。

3、凡是有inline的都可以叫文本元素，符合文本元素的特性，能被文字分隔符进行分割。

4、一个行级块元素中如果没有文字，元素外边有文字，则与行级块元素底对齐，如果行级块元素里边有文本，则与里边文本底对齐。