学习前端的第九天

1.高度塌陷：在布局中，一般情况下，我们不给父元素设置高度，由内容撑开盒子高度，但当子元素设置浮动后，盒子脱离文档流，不占父元素内的位置，导致父元素高度为零。

解决方法：

1）给父元素设置高度；

2）给元素开启隐含属性BFC（块级格式上下文）

设置overflow样式，且属性值非visible；

设置元素浮动，但父元素也会脱离文档流，造成新的布局问题；

将元素转为行内块元素，但父元素宽度丢失，图片三像素问题出现；

将position的值为absolute或fixed；

特点：

开启BFC的元素可以包裹住浮动的元素，解决高度塌陷的问题；

开启的元素不会被浮动元素覆盖；

父子外边距不会重叠，可以解决外边距重叠问题。

3）设置clear样式，消除浮动元素对下面元素的影响

left：消除左侧元素浮动对元素的影响

right：消除右侧浮动对元素的影响

both：消除两侧浮动元素对元素的影响,其中哪一侧浮动带来的影响大，就清除谁

4）在浮动子元素的下方设置一个空的块元素，然后借助clear属性来消除浮动元素对空的块元素的浮动影响。

5)在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度.

6)结合伪类after以及clear来解决,通过伪类after，在元素的后面添加内容，将这个内容转成块元素，再清除其他浮动元素对这个块元素的浮动影响

7）可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果。

2.定位：是一种布局手段，而且它是一种高级的布局手段，可以将页面中的任何元素放在页面中的任意位置，通过position属性进行设置。

属性值：static默认值不开启定位；

以下四种都属于开启定位

relative  开启相对定位

absolute  开启绝对定位

fixed     开启固定定位

sticky    开启粘滞定位

1）相对定位position：relative；

 特点：    

开启了相对定位，如果不配合偏移量使用，元素不会发生任何变化；相对定位，是相对于元素原来在文档流中的位置定位；开启了相对定位后，元素的层级会变高，也就是会盖住其他的元素；开启了相对定位后，元素的性质不会发生变化。

偏移量：相对于定位位置挪动的大小的值

left   相对于定位位置左侧的偏移量

right   相对于定位位置右侧的偏移量

top    相对于定位位置上侧的偏移量

bottom  相对于定位位置下侧的偏移量

一般情况下，设置偏移量，水平方向，left或right调动一个值，垂直方向，top或bottom调动一个值

2）绝对定位position：absolute；

特点：

开启了绝对定位，如果不配合偏移量使用，元素的位置没有发生变化

开启了绝对定位后，元素会脱离文档流，下面的元素就会跑上去

开启了绝对定位，元素脱离文档流，元素的性质就会发生变化

不再区分块还是行内还是行内块，也就是块元素不会独占一行了，行内元素可以设置宽高等等

绝对定位的原点，是相对于其包含块来确定的，一般情况下，如果设置子元素为绝对定位，我们会同时设置其父元素相对定位，以便设置偏移量，这种情况叫“子绝父相”，但最终还是要根据如何方便设置子元素偏移量为准。

包含块：在没有定位的情况下，其包含块就是其父元素或祖先元素，在开启了定位的情况下，其包含块就是离它最近开启了定位的祖先元素，如果其祖先元素都没有开启定位，包含块就是根元素（html标签）

3）固定定位position：fixed；

特点

开启固定定位后，元素会脱离文档流，元素的性质会发生改变

开启固定定位后，元素会固定在页面中，不会随着滚动条滚动而滚动

开启固定定位后，也需要配合偏移量，来改变元素在页面中位置

固定定位的原点是html根标签,也就是浏览器视口

常用的场景：固定的侧边导航；固定的广告；固定的顶部、底部导航

4）粘滞定位position: sticky;

特点

开启粘滞定位，元素不会脱离文档流，也就是元素性质也不会发生改变

开启粘滞定位后，元素位置不发生改变，需要配合偏移量使用

一般情况下，是配合top值使用，在没有到达top值之前，元素是随着滚动条滚动而滚动，当到达top值之后，元素就不会随着滚动条滚动而滚动了

粘滞定位是后来增加的定位方式，注意它的兼容性，一般兼容到ie9以上

粘滞定位的原点也是浏览器视口，也就是html根标签

主要的应用场景：侧边导航；广告；顶部导航，底部导航