CSS -- 定位
CSS中最重要的应该就是布局和定位, 也就是display和position两个属性。
布局篇在这里
讲布局之前, 先说一下CSS的框模型Box Model
, 它规定了元素框处理 元素内容,内边距,边框和外边距的方式
框模型
Box Model外边距合并
外边距合并意思就是当两个垂直的外边距相遇时,会合并成一个外边距,合并之后外边距的高度是两个外边距中较大的一个。
外边距合并1当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
外边距合并2文档流
元素按照HTML中的位置顺序元素,块元素(block)独占一行,内联元素(inline),不独占一行
定位
CSS的定位主要是靠position这个属性,它有以下五种选择
- static
- relative
- fixed
- absolute
- sticky
static - 静态定位
元素默认的position属性,浏览器会根据源码的顺序,决定每个元素的位置,就是正常的文档流。 每个区块占据自己的位置, 不会发生重叠(同级区块)。并且此时left,right,top,bottom的属性是无效的,元素的位置由浏览器自主决定。
static.jpgrelative - 相对定位
相对定位是在静态定位的基础上进行偏移。偏移是根据left,right,top,bottom四个属性决定方向和距离。
relative.jpg
此时, 元素依然处于文档流中,而且,相对定位是不会影响文档流的。
举个例子,
<style type="text/css">
.parent {
border: 2px solid red;
}
.parent div {
height: 100px;
width: 100px;
background-color: red;
margin-bottom: 10px;
text-align: center;
}
.div2 {
position: relative;
background-color: orange !important;
top: 200px;
left: 20px;
}
</style>
<div class="parent">
<div class="div1">test1</div>
<div class="div2">test2</div>
<div class="div3">test3</div>
</div>
relative-demo.png
div2 的位置虽然有偏移,但是父元素并没有受其影响,就是说它在文档流中的位置还是和静态布局的位置一样,只是显示的时候有偏移。
absolute-绝对定位
绝对定位是根据第一个定位不为static的父元素进行偏移。如果没有不为static的父元素, 则根据整个网页的根元素HTML进行偏移,偏移的方向和距离根据left,right,top,bottom四个属性决定。绝对定位不会影响页面中的其他元素
就如刚才的例子,如果把div2的定位设为绝对定位,则文档流中只有div1和div3。
absolute-demo.png
fixed-固定定位
固定定位是类似于绝对定位, 但是是相对于浏览器窗口定位, 而且不会受到滚动条的影响。
Example
sticky-粘性定位
粘性定位可以说是相对定位和固定定位的组合,就是可以自动切换相对定位/固定定位。它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到粘性定位的要求时(比如top:10px),这时其效果相当于fixed定位,固定到适当位置。
使用条件:
- 必须搭配top、bottom、left、right其一使用, 否则相当于相对定位
- 父元素的overflow不能为hidden或者overflow
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
.stacking-slide {
height: 100vh;
width: 100%;
position: sticky;
top: 0;
}
.stacking-slide:nth-child(1) {
background-color: #ffc2c2;
}
.stacking-slide:nth-child(2) {
background-color: #ffe0c2;
}
.stacking-slide:nth-child(3) {
background-color: #ffffc2;
}
.stacking-slide:nth-child(4) {
background-color: #e0ffc2;
}
.stacking-slide:nth-child(5) {
background-color: #c2ffc2;
}
</style>
</head>
<body>
<div class="stacking-slide">
<h2>Section 1</h2>
</div>
<div class="stacking-slide">
<h2>Section 2</h2>
</div>
<div class="stacking-slide">
<h2>Section 3</h2>
</div>
<div class="stacking-slide">
<h2>Section 4</h2>
</div>
<div class="stacking-slide">
<h2>Section 5</h2>
</div>
</body>
</html>
网友评论