[已解决]新手 HTML入门求助

微末非末 · 发表于 2018-2-6 22:38:57

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

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:05:34

本帖最后由不二如是于 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顺利居中

跳转到最佳答案楼层

不二如是 · 发表于 2018-2-7 10:05:34