我的前端学习4

CSS的浮动清除：clear

clear作用：去除浮动对文档流之中元素的影响

属性：--left 清除向左浮动元素的影响

--right 清除向右浮动元素的影响

--both 清除向左向右浮动元素影响

 

CSS：clearfix

clearfix：是一个专门用来解决高度塌陷和外边距重叠的一个类

例子：

.clearfix::before,

.clearfix::after{

ontent: "";

display: table;

clear: both;

}

 

 

CSS高度塌陷最终解决方案：

默认情况下使用before和after伪元素生成的内容是行内元素

 

 

 

CSS定位：position

可以是用定位移动元素到网页的任何位置，默认值为static。

 

定位的种类：

相对定位--给position设置为relative,就开启了元素的相对定位

绝对定位--给position设置为absolute，则开启了元素的绝对定位

固定定位--给position设置为fixed，则开启了元素的固定定位

粘滞定位--给position设置为sticky，则开启了元素的粘滞定位

 

 

偏移量（offset）

上偏移量--top

--表示开启定位的元素与参照点上边的距离

下偏移量--bottom

--表示开启定位的元素与参照点下边的距离

左偏移量--left

--表示开启定位的元素与参照点左边的距离

右偏移量--right

--表示开启定位的元素与参照点右边的距离

 

一般情况下，我们只用上和左进行元素的位置定位

 

 

CSS的相对定位：

1.当元素开启了相对定位之后，默认是没有效果的

2.如果使用top和left进行定位，参照原点是元素在文档中的左上角如果使用bottom和right进行进行，参照远点是元素在文档中的右上角

3.当元素开启了相对定位之后，元素的层级就提升了

4.当元素开启了相对定位之后，并没有脱离文档流

5.当元素开启了相对定位之后，并不会改变元素的性质，行内还是行内，块还是块

 

 

CSS的固定定位：元素的position属性设置fixed

固定定位的特点跟绝对定位类似,是一种特殊的绝对定位

--唯二的区别

1.参照原点是浏览器的左上角

2.当元素设置了固定定位之后，就会保持跟浏览器左上角的距离不变

 

 

CSS的绝对定位：元素的position属性值设置为absolute

绝对定位的特点

1.当元素开启了绝对定位之后,默认情况下元素的位置并不会发生改变

2.当元素开启了绝对定位之后,元素就脱离文档流了

3.当元素开启了绝对定位之后,元素的层级就提升了

4.当元素开启了绝对定位之后,元素的性质也会发生改变

5.当元素开启了绝对定位之后，元素参照于其包含块进行定位

 

包含块（containing block）

--正常元素的包含块：离元素最近的祖先块元素的内容区

--脱离文档流元素的包含块离元素最近的开启了定位的块级元素，如果所有的祖先块级元素都没有开启定位，开启了绝对定位的元素就默认根据根标签进行定位

根标签-html（初始包含块）