前端day03

高度塌陷和BFC

高度塌陷的问题，在浮动布局中，父元素的高度默认是子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失，父元素的高度丢失后，其下的元素会自动上移动，导致页面的布局混乱，这个问题必须处理。
BFC块级格式化环境，BFC是一个css中的隐含的属性，可以为一个元素开启BFC。开启BFC的元素会变成一个独立的布局区域，
元素开启BFC后的特点：1.开启BFC后的元素不会被浮动元素覆盖2.开启BFC的元素子元素和父元素的外边距不会重叠3.开启BFC的元素可以包含浮动的子元素。开启元素的BFC的方式1.设置元素的浮动（不推荐）2.将元素设置为行内块元素（不推荐）3.将元素的overflow设置一个非visible的值，常用的方式，为元素设置over-flow：hidden，开启BFC，以使其可以包含浮动元素

定位

定位可以将元素改到任何位置，使用position属性设置，可选值，static，默认值，未开启；relative开启元素的相对定位absolute，绝对定位；fixed，固定定位；sticky粘滞定位
相对定位（元素开启相对新后，不设置偏移量不会发生变化）偏移量（只适用于开启定位，与margin有区别）：top，bottom，垂直方向由二者决定，只用一个top挥或者bottom，top越大向上移动，反之相反。right，left控制水平方向的位置。1.相对于自身在文档流中的位置。2.相对定位会提升元素的层级3.相对定位不会使元素脱离文档流4.相对定位不会改变元素的性质，块元素还是块元素
绝对定位 1.开启绝对定位后，元素会从文档流中脱离2.改变元素性质，行内变快，快的元素撑开3.开启绝对定位后不设置偏移量，元素位置不会改变4.提升元素的层级
绝对元素的相对定位是相对定位包含块进行定位的，包含块：包含块就是距离当前元素最近的祖先块元素。
绝对定位的包含块：包含块就是距离他最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则相对于根元素进行定位。html（根元素，初始包含块）
固定定位固定定位也是绝对定位，不同的是，固定定位永远参考于浏览器的视口进行定位，固定定位的元素不会随着网页的活动而运动，用于网页不动的地方
粘滞定位粘滞定位和相对定位基本一致，不同的是粘滞定位可以在元素到达某个位置的时候将其固定
层级对于开启了的定位元素，可以通过z-index属性来设定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高，优先显示；如果元素的层级一样，则优先显示靠下的元素；祖先元素的层级再高也不会盖住后代元素。用于修改元素的层级来显示指定的图片.name:nth-child