您的位置：首页 > Web前端 > CSS

前端的一些小笔记 HTML+CSS

2016-04-19 00:03 549 查看

刚好最近在写个简单的app下载页要做到移动端的兼容，这里记录下新的体会，当然多数来自网友的分享

正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！

其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是100%？

div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。值得玩味噢！

你设div的高度为100%,那么它是和什么地方相对为100%?

前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。可惜的是浏览器一般默认解释为内容的高度，而不是100%。但是只要为html和body设置高度为100%就可以了：html,body{height:100%;}，这样之后div会按比例来继承上一级的高度了，仅仅设置的DIV元素的height属性貌似没有什么效果。

同时，让人高兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。

那么，如下的样式可以设置Div撑满整个页面：

<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
</style>

<div style="width:100%; height:100%; z-index:1">
</div>

有一点需要注意的是，Html级元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已。

所以要想实现撑满整个页面，必须显式地设置高度为100%！

案例：

　如下代码直接运行那么什么也不会得到，可以看到对section使用了width:100%和height:100%;但它的父级也就是html body元素并没有高度和宽度，这样就导致了整个网页什么都不显示

<style>
.section{width:100%;height: 100%;}
.bg{width:100%;height: 100%;}
</style>
</head>

<body>
<div class="section section1">
<div class='bg' style="background:url('meinv/1.jpg') no-repeat; "><!--<img src="images/section1.jpg" >--></div>
</div>
</body>
</html>

只需添加一行css代码

html,body{height:100%;}

即可显示。

那么常见的还有一种高度为auto的写法与高度100%有何区别？网友给出的答案非常精彩“height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。”

如何让图片铺满整个页面？

使用的图片素材大小为658*877

第一种：直接插入图片并设置宽度100%高度为auto，当然直接设置width:100%也是一样的。

<style>
html,body{height:100%;}
.section{width:100%;height: 100%;}
.bg{width:100%;height: 100%;}
</style>
</head>

<body>
<div class="section section1">
<div class='bg'>
<img src="meinv/1.jpg" style="width:100%;height:auto;"/>
</div>
</div>
</body>
</html>

结果如图：可以看出出现了纵向滚动条，因为图片的宽度被拉伸100%而高度是auto也就是图片本来的高度，所以出现纵向滚动条。

第二种：将上面的height:auto改成height：100%

显而易见图片大小都被变化成等同于浏览器窗口大小

第三种：利用css3 background-size属性

这样其实结果和上图一样，只不过图片变成了背景图

<style>
html,body{height:100%;}
.section{width:100%;height: 100%;}
.bg{width:100%;height: 100%;}
</style>
</head>

<body>
<div class="section section1">
<div class='bg' style="background:url('meinv/1.jpg') no-repeat;background-size: 100% 100%">

</div>
</div>
</body>
</html>

第四种：修改上面的background-size:100% auto; 下图显示这种情况下，宽度被设置为100%了但是高度只有本屏大小，其他的相当于被截取了。

这种情况和设置background-size:cover；结果是一样的。

<style>
html,body{height:100%;}
.section{width:100%;height: 100%;}
.bg{width:100%;height: 100%;}
</style>
</head>

<body>
<div class="section section1">
<div class='bg' style="background:url('meinv/1.jpg') no-repeat;background-size: 100% auto">

</div>
</div>
</body>
</html>

第五种：添加了center center fixed属性

其实就是让背景图完全居中显示并且设置fixed那么背景图不会随着滚动而移动效果如图：可以看出，图片的上下都被截取了一部分不显示，这样看起来图片更加协调保持了比例，可以试着将浏览器窗口进行缩放可以看到明显效果

<style>
html,body{height:100%;}
.section{width:100%;height: 100%;}
.bg{width:100%;height: 100%;}
</style>
</head>

<body>
<div class="section section1">
<div class='bg' style="background:url('meinv/1.jpg') no-repeat center center fixed;background-size: cover;">

</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航