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>