新手 HTML入门求助
请看代码中的注释<!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>
抱歉啊，图片太大了上传不了。求帮忙看一下代码{:5_100:}
情况是我把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顺利居中 不二如是 发表于 2018-2-7 10:05
这是一个固定套路：
还是有些不懂，不二老师，你的意思是：要设置div的高度为100%就要设置它的父级body( 此处div的上以及div为body? ) 的宽度为100%，要设置body的宽度就要又设置它的父级html的宽度，是这样吗？
但是我的问题是：body会继承啊，所以body可以省略不用写，body的高度属性也会和它的父级一样，所及最终也可以设置了div，对吗？
然后由于此处html标签没有背景样式，body的背景颜色和高度都是浏览器默认给的，所以body是不能省略的。
还有最后一个疑问就是：为什么我把body去掉之后，只是文字的位置改变了而文字的颜色没有改变？难道说是因为高度没有继承的特性吗？
不好意思啊，不二老师，问题比较多{:5_100:}
页:
[1]