1.高度塌陷的问题和BFC
1.1高度塌陷的问题
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。
1.2 BFC：块级格式化环境
BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊的方式来开启元素的BFC：
1.设置元素的浮动
float:left;2.将元素设置为行内块元素
display:inline-block;3.将元素的overflow设置为一个非visible的值
常用的方式：为元素设置overflow:hidden开启其BFC，使其可以包含浮动元素
overflow:hidden;2.clear
如果我们不希望某个元素因为其他元素的影响而改变位置，可以通过clear属性来清楚浮动元素对当前的元素所产生的影响
clear：
1）作用：清除浮动元素对当前元素所产生的影响
2）可选值：
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧中最大影响的那一侧
原理：
设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
<style>
div{
font-size:50px;
}
.box1{
width:200px;
height:200px;
background-color: #bfa;
float:left;
}
.box2{
width:400px;
height:400px;
background-color:orange;
float:right;
}
.box3{
width:200px;
height:200px;
background-color:red;
clear:both;
}
</style>
3.使用after伪类解决高度塌陷
.box1::after{
content:'';
display:block;
clear:both;
}4.clearfix
clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}5.相对定位
1）定位时一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位
2）可选值：
static：默认值，元素是静止的，没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位
3）相对定位
当元素的position属性值设置为relative时则开启了元素的相对定位
相对定位的特点：
1.元素开启相对定位后，如果不设置偏移量元素则不会发生任何变化
2.相对定位是参照元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使得元素脱离文档流
5.相对定位不会改变元素的性质，块还是块，行内还是行内
position:relative;
left:200px;
right:200px;4）偏移量（offset）
当元素开启了相对定位后，乐意通过偏移量来设置元素的位置
top：定位元素和定位位置上边的边距
bottom：定位元素和定位位置下边的边距
定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们只会使用其中之一
top值越大，定位元素越向下移动；bottom值越大,定位元素越向上移动
left：定位元素和定位位置左侧的距离
right：定位元素和定位位置右侧的距离
定位元素水平方向的位置由left和right两个属性来控制
通常情况下只会使用一个
left越大元素越靠右
right越大元素越靠左
6.绝对定位
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
position:absolute;
left:0;
right:0;绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素使相对于其包含块进行定位的
包含块：
正常情况下：
包含块就是离当前元素最快的祖先块元素
绝对定位的包含块
包含块就是离它最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位则根元素就是它的包含块
html——（根元素，初始包含块）
7.固定定位
将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动
position:fixed;
left:0px;
right:0px;8.粘滞定位
当元素的position属性设置为sticky时则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
position:sticky;
top:10px;9.绝对定位元素的位置
水平布局：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度
当发生过度约束：
如果9个值中没有auto则自动调整right以使得等式满足
如果有auto，则自动调整auto的值以使等式满足
可设置auto的值
margin width left right
因为left和right的值默认是auto，所以如果不知道left和right，等式不满足时，会自动调整这两个值
<style>
.box1{
width:400px;
height:400px;
background-color: #bfa;
position:relative;
}
.box2{
width:100px;
height:100px;
position:absolute;
background-color: orange;
margin-left:auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left:0;
right: 0;
bottom:0;
top:0;
}
</style>
<body>
<div class="box1"><div class="box2"></div></div>
</body>
对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index需要一个属性作为参数，值越大元素的层级越高，越优先显示
如果元素的层级一样，则优先显示靠下的元素，祖先元素的层级再高也不会盖住后代元素
z-index:1;10.京东轮播图
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.img-list{
width:590px;
height:470px;
margin:100px auto;
position:relative;
}
.img-list li{
position:absolute;
}
.pointer{
position:absolute;
z-index:9999;
left:40px;
bottom:20px;
}
.pointer a{
float:left;
width:10px;
height:10px;
margin: 0px 4px;
border-radius:50%;
background-color: rgba(255,255,255, 0.6);
background-clip: content-box;
border:2px solid transparent;
}
.pointer a.active,
.pointer a:hover{
background-color: #fff;
border:2px solid rgba(255,255,255,.3);
}
</style>
1231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
