问题描述:采用绝对定位 使box2在box1里面 水平垂直居中实现以下效果:
代码实现:
<!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>绝对定位元素的布局</title> <style> .box1 { width: 500px; height: 500px; background-color: aqua; position: relative; } .box2 { width: 100px; height: 100px; background-color: burlywood; position: absolute; /* margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; */ margin: auto; /* 水平布局 letf+margin-left + border-left + padding-left + width + padding-right + border-right + margin-right+right = 包含块内容区的宽度 - 当我们开启了绝对定位后: 水平方向的布局等式就需要添加 left 和 right 两个值 此时规则和之前一样只是多添加了两个值: 当发生过度约束: 如果9个值当中没有 auto 则自动调整right值以使等式满足 如果有auto,则自动调整auto的值以使等式满足 - 可设置auto的值 margin width left right - 因为left 和 right的默认值是auto,所以如果不知道left和right 则等式不满足时,会自动调整这两个值 垂直方向布局的等式也必须要满足 top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度 */ right: 0; left: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
1、什么是静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位?绝对定位的特点:
/*
水平布局
letf+margin-left + border-left + padding-left + width + padding-right + border- right + margin-right+right = 包含块内容区的宽度
- 当我们开启了绝对定位后:
水平方向的布局等式就需要添加 left 和 right 两个值
此时规则和之前一样只是多添加了两个值:
当发生过度约束:
如果9个值当中没有 auto 则自动调整right值以使等式满足
如果有auto,则自动调整auto的值以使等式满足
- 可设置auto的值
margin width left right
- 因为left 和 right的默认值是auto,所以如果不知道left和right
则等式不满足时,会自动调整这两个值
垂直方向布局的等式也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
*/
html+CSS布局绝对定位练习实例:采用绝对定位 使box2在box1里面 水平垂直居中
于 2022-03-22 11:44:36 首次发布