为了账号安全,请及时绑定邮箱和手机立即绑定

如何理解这段代码中absolute对<div>百分百宽度的影响?

如何理解这段代码中absolute对<div>百分百宽度的影响?

Secret_17 2019-11-19 16:13:26
在.container中添加position: relative;之后在.container中删除position: relative;之后<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;  padding: 0px;}html,body {height: 100%;background-color: #00FFFF;} .header{background-color: #000;width: 100%;height: 100px;}.header ul {float: right;display: inline-block;line-height: 100px;color: #fff;font-size: 20px;margin: 0;}.header ul li{display: inline-block;margin: 0 20px;}.container{position: relative;margin: 0 auto;background-color: #FFF;height: 100%;width:80%;padding-top: 500px;}.a{height: 200px;width:50%;background-color: yellow;position: absolute;}.b{height: 200px;width:50%;background-color: red;position: absolute;right: 0;}.foot{position: relative;background-color: #000;bottom: 0px;height: 100px;width: 100%}.foot ul{color: #fff;display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}.foot ul li{display: inline-block;}</style></head><body><div class="header"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""><ul><li>牛</li><li>牛</li><li>牛</li><li>牛牛</li><li>牛</li></ul></div><div class="container"><div class="a"></div><div class="b"></div></div><div class="foot"><ul><li>牛</li><li>牛</li><li>牛</li><li>牛牛</li><li>牛</li></ul></div></body></html>
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 1005 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信