[已解决]新手 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

本帖最后由不二如是于 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 21:26:29

不二如是发表于 2018-2-7 10:05
这是一个固定套路：

还是有些不懂，不二老师，你的意思是：要设置div的高度为100%就要设置它的父级body( 此处div的上以及div为body? ) 的宽度为100%，要设置body的宽度就要又设置它的父级html的宽度，是这样吗？

但是我的问题是：body会继承啊，所以body可以省略不用写，body的高度属性也会和它的父级一样，所及最终也可以设置了div，对吗？

然后由于此处html标签没有背景样式，body的背景颜色和高度都是浏览器默认给的，所以body是不能省略的。

还有最后一个疑问就是：为什么我把body去掉之后，只是文字的位置改变了而文字的颜色没有改变？难道说是因为高度没有继承的特性吗？

不好意思啊，不二老师，问题比较多

账号		自动登录	找回密码
密码			立即注册