标签：布局 height 知识 移动 set 粉丝 one absolute 存在
css 定位概念
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
1，相对定位
相对于一个元素的正常位置来对其定位。
2，绝对定位
使用绝对值来对元素进行定位。
3，浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
本节知识点练习作业 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; } div.xddw{ position:relative; bottom: 27px; } a.cdl{ font-size: 14px; text-decoration: none; margin-left: 5px; margin-top: 3px; margin-bottom: 3px; color: darkgrey; } a.xddw2{ font-size: 16px; color: black; position: relative; top: 54px; text-decoration:; } </style> </head> <body> <div style="border-bottom: 1px solid #cccccc;height:27px;"> <a href="" class="cdl">首页</a> <a href="" class="cdl">新闻</a> <a href="" class="cdl">找找看</a> <a href="" class="cdl">学习计划</a> </div> <div class="xddw" style="height: 130px;width: 1000px;margin-right: auto;margin-left: auto;border-bottom: 1px solid #cccccc"> <a href="" class="xddw2">园子</a> <a href="" class="xddw2">关注</a> <a href="" class="xddw2">粉丝</a> <a href="" class="xddw2">随便看看</a> <a href="" class="xddw2">消息</a> <p style="position: relative;top: 88px;font-size: 18px;"><strong>欢迎您，欲心！</strong></p> <img src="jinritoutiao%20logo.png" alt="" style="height: 45px;position: absolute;left: 685px;top:50px"> <img src="bokeyuan%20logo.png" alt="" style="height: 50px;position: relative;left: 700px;top: 60px"> </div> <div style="height: 160px;width: 1000px;margin-right: auto;margin-left: auto;"> <img src="bj.png" alt="" style="height: 160px;width: 1000px;"> </div> <div style="height: 30px;width: 1000px;margin-left: auto;margin-right: auto;border-bottom: 3px solid black"> <img src="01.jpeg" alt="" style="height: 150px;position: absolute;bottom: 600px;left:500px;border-radius: 50%"> </div> </body> </html>
标签：布局 height 知识 移动 set 粉丝 one absolute 存在
原文地址：https://www.cnblogs.com/yx3445/p/12405623.html
