|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
请看代码中的注释
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>欢迎进入html5的界面</title>
- <style type="text/css">
- html,body{ height: 100%; /* 不二老师在04不是说body有继承机制,所以这的body可以不用写,为什么我去掉之后效果完全就不一样了呢?当我把此处的body去掉之后,就没有居中效果了*/
- color:#ff0088;
- }
- body{
- background:url(背景.jpg) center center;
- background-size:cover;
- margin: 0;
- padding: 0;
- position:relative;
- }
- #container{
- position:absolute;
- top:50%;
- width:100%;
- transform: translateY(-50%);
- text-align:center;
- }
- </style>
- </head>
- <body>
- <p>我爱鱼c</p>
- <div id='container'>
- <h1>我爱鱼c</h1>
- <a href='http:\\www.fishc.com'>传送门</a>
-
- </div>
- </body>
- </html>
复制代码
抱歉啊,图片太大了上传不了。求帮忙看一下代码
情况是我把body去掉就不会居中了
本帖最后由 不二如是 于 2018-2-7 10:40 编辑
这是一个固定套路:
- html,body{
- height: 100%;
- color:#ff0088;
- }
复制代码
下面的解释对于初学者可能会不理解:
当html标签无背景样式时,body的背景色其实不是body标签的背景色,而是浏览器的。
一旦html标签含有背景色,则body的背景色变成了正常的body标签自己的背景色。
而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色。
如果不理解,记住:
div的父元素是body,body的父元素是html,通过height:100%层层向上,找到顶级获取定高。
div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。
通过这种方式,让div顺利居中
|
|