这是我参与「第四届青训营」笔记创作活动的的第2天

CSS选择器权重

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值。

浮动

float 浮动

值

none      默认  不浮动
left        左浮动
right       右浮动

清除浮动

给有浮动的子元素的父元素加height
给有浮动的子元素的父元素加overflow:hidden
给所有有浮动的元素最后增加一个空元素，给该空元素加样式clear:left / right / both

clear:left 清除左浮动

clear:right 清除右浮动

clear:both 清除左右浮动

clear:none 不清除浮动

给有浮动的子元素的父元素增加伪元素，在伪元素里增加样式

::after{

display:block;

content:””;

clear:both;

}

定位

定义

定位是一种布局手段，而且是一种高级的布局手段；

可以用position属性来设置定位

可选值：

不开启定位： static 默认值 不设置定位

开启定位：
relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘滞定位

有绝对定位元素的包含框无定位，该元素相对于浏览器定位
有绝对定位元素的包含框有定位，该元素相对于离自己最近的有定位的包含框定位

fixed       固定定位    始终相对于浏览器定位

借助left、right、top、bottom这四个值改变元素位置

z-index 值：数字 z轴的排列顺序 z-index值越大越在最上层

特点

position：relative 开启相对定位后的特点：

如果不设置偏移量，元素的位置不发生任何改变
设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置
设置相对定位后，元素的性质不发生改变，不脱离文档流
设置相对定位后，元素的层级会提高

position：absolute 开启绝对定位后的特点：

元素脱离文档流
元素的性质发生变化，不区分块还是行内元素了
如果不设置偏移量，元素的位置不发生变化
原点是相对于其包含块来定位的
元素的层级提高

一般情况下，设置了元素的绝对定位，会相应设置其父元素的相对定位，我们叫做“子绝父相”。

    包含块：
    1、默认情况下（没有定位的情况下），包含块就是元素的祖先元素；
    2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素；
    如果祖先元素都没开启定位，包含块就是跟标签（html）。

position：fixed 开启元素的固定定位后的特点：

用于固定在浏览器页面上，不随浏览器的滚动而改变位置
以浏览器为参照物，和父元素没有任何关系
脱离文档流，更改了元素的性质

position：sticky 开启元素粘滞定位后的特点：

以浏览器为参照物（体现固定定位特点）
占有原来位置（体现相对定位特点），不脱离文档流
粘滞定位可以在元素到达某个值时，将其固定
未到达top值之前正常显示，达到之后类似于固定定位