!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">1</div>
</div>
</body>
</html>详细的介绍一下吧：
布局
文档流 margin 浮动 定位
定位：
更加高级的布局手段
- 定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
-可选值：
static： ['stætik] 默认值，元素没有开启定位
relative： ['relətiv] 开启元素的相对定位
absolute： ['æbsəlju:t] 开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
sticky： ['stiki] 开启元素的粘滞定位
相对定位：
当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
偏移量
当开启了元素的定位（position属性值是一个非static的值）时，
可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动
left：元素向右偏移量，
right：元素向左偏移量
top：元素向下偏移量
bottom：元素向上偏移量
可设正值，也可设负值
通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素
3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
4.绝对定位会使元素提升一个层级
5.绝对定位是相对于离他最近的包含块定位的
（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）
包含块：containing block
-正常情况下：
离当前元素最近的祖先块元素
-定位情况下：
离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
html （根元素，初始包含块）
当元素的position属性设置fixed时，则开启了元素的固定定位
（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；
（2）以浏览器为参照物，和父元素没有任何关系；
（3）固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质
(4)应用场景
- 固定导航
- 固定侧边栏
- 广告
粘滞定位 （一般用于页面导航的吸顶效果)
-当元素的position属性设置为sticky时，则开启了元素的粘滞定位
（1）以浏览器为参照物（体现固定定位特点）；
（2）占有原来位置,不会脱离文档流（体现相对定位特点）；
（3）粘滞定位可以在元素到达某个位置时，将其固定
(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
-当开启决定定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
-当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
2:如果有auto，则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
-四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
若width为固定值 left right top bottom都为0，margin会均分四个方向值
从而使元素达到水平垂直居中 ****
—两个auto的情况
margin 和width为auto， 调整width
margin 和left，right其中一个值为auto，调整left或right
width 和left，right其中一个值， 调整left或right
left，right都为auto 调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况
width，right，left margin 调整right
总结：right>left>width>margin
垂直布局
等式也必须满足
总结： bottom>top>height>margin
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
