前端学习之css 定位与浮动

定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位和浮动</title><style>*{/* 将模块紧紧贴着浏览器边框 */margin: 0;}.c{background-color: blueviolet;width: 100px;height: 100px;border: 2px solid chocolate;/* 固定定位,位置固定 */position: fixed;/* 提供了设置位置的属性 */right: 50px;bottom: 50px;}.a{background-color: aquamarine;width: 200px;height: 200px;/* 相对定位，参考原来的位置定位 */position: relative;top: 20px;left: 20px;/* 浮动 */float: left;}.b{background-color: blue;width: 100px;height: 100px;/*1、绝对定位父级元素有定位，则根据父级元素定位没有定位，则1根据body来定位，脱离文档流*/position: absolute;top: 20px;left: 20px;}</style>
</head>
<body><!-- 1、定位静态定位：static等价于无定位固定定位：fiexd固定一个值，用于锚链接，“回到顶部那个按钮”相对定位：relative绝对定位：absoult--><div class="c">c</div><div class="a">a<div class="b">b</div></div>
</body>
</html>

结果

浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>/* 类似于display的行级变换  */.a{background-color: aqua;width: 100px;height: 100px;float: left;}.b{background-color: red;width: 100px;height: 100px;float: left;}</style>
</head>
<body><div class="a">a</div><div class="b">b</div><div class="b">b</div><div class="b">b</div><div class="b">b</div><div class="b">b</div></body>
</html>