html 布局方式
基本布局方式
API
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 浮动定位示例(float) 1.相对父元素（不论是否定位过）和前一个浮动框定位； --> <hr /> <label style="font-weight: bold;font-size: 20px;">浮动布局模型</label> <div style="height: 100px;width: 100%;"> <button style="float: left;width: 150px;">Button001</button> <button style="float: left;width: 150px;">Button003</button> <button style="float: right;width: 150px;">Button002</button> </div> <!-- 固定定位示例(fixed) 1.相对浏览器窗口定位； --> <hr /> <label style="font-weight: bold;font-size: 20px;color: red;">固定布局模型</label> <div style="height: 100px;"> <label style="position: fixed;color: red;">AAAAA</label> <label style="position: fixed;color: red;right: 10px;">AAAAA</label> <label style="position: fixed;color: red;bottom: 10px;">AAAAA</label> <label style="position: fixed;color: red;top: 10px;">AAAAA</label> <label style="position: fixed;color: red;">AAAAA</label> </div> <!-- 绝对定位示例(absolute) 1.使用容器内的绝对坐标； --> <hr /> <label style="font-weight: bold;font-size: 20px;">绝对布局模型</label> <div style="height: 100px;"> <button style="position:absolute;width: 150px;">Button001</button> <button style="position:absolute;width: 150px;padding-left: 50px; margin-top: 50px;margin-left: 180px;">Button002</button> <button style="position:absolute;width: 150px;margin-top: 30px;">Button003</button> <button style="position:absolute;width: 150px;margin-left: 100px;">Button004</button> <button style="position:absolute;width: 150px;margin-left: 200px;">Button005</button> <button style="position:absolute;width: 150px;margin-top: 60px;">Button006</button> </div> <!-- 相对布局示例(relative) 1.使用lef/top/right/bottom布局定位； --> <hr /> <label style="font-weight: bold;font-size: 20px;">相对布局模型</label> <div style="position: relative;height: 80px;"> <label style="position: relative;">AAAAA</label> <label style="position: relative;left: 20px;">AAAAA</label> <label style="position: relative;top: 20px;">AAAAA</label> <label style="position: relative;top: 40px;">AAAAA</label> </div> <!-- 线性布局示例-默认(static) 1.忽略lef/top/right/bottom布局属性 --> <hr style="margin-top: 20px;"/> <label style="font-weight: bold;font-size: 20px;">线性布局模型</label> <div> <button style="width: 150px;">Button01</button> <button style="width: 150px;">Button02</button> <button style="width: 150px;">Button03</button> <p>AAA</p> <button style="width: 150px;">Button04</button> <button style="width: 150px;">Button05</button> <button style="width: 150px;">Button06</button> </div> </body> </html>
参考：
