HTML小知识点积累
1.如何让heigth:100%起效?
有时候我们设置heigth;100%,想让当前控件铺满整个屏幕,但是很少情况下这个属性能达到我们想要的效果,这是为什么呢?
而根据W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。
那么,为什么没效果呢?
浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
解决方法就是把父级元素全部设为100%的高度,覆盖掉默认的auto
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
这样这个div的高度就会100%了
</p>
</div>
</body>
</html>2.如何使得一张图片铺满整个浏览器?
也就是图片当成整个网页的背景,那么只需要下面css就可以实现了,当然前提,父级容器高度是大于或等于整个浏览器的
.bg{ width: 100%; height: 100%; background: center no-repeat; /*使得图像最大化,可以覆盖住整个面板*/ background-size: cover; /*绝对定位,否则图片不显示*/ position: absolute; z-index: -999; }3.如何让整个网页变成灰色?
实现下面CSS效果即可
html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; -webkit-filter: grayscale(1) }4.bootstrap如何做到居中?
因为block 没设定宽度是不能 margin auto 来居中的，一个简单的办法是
display: table
width: auto
margin-left: auto
margin-right: auto
或者直接从center标签
<center>
<button class="btn btn-success btn-lg btn-store">立即选择</button>
</center>再或者指定class为center-block
.center-block { display: block; margin-left: auto; margin-right: auto; }5.Jq实现滚动监听
主要是根据浏览器top高度和客户端可视高度的关系来实现监听,再设置相应的CSS即可实现想要的效果了
$(window).scroll(function(){
//下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
//clientHeight是网页在浏览器中的可视高度，
var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
//scrollTop是浏览器滚动条的top位置，
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var index = parseInt(scrollTop/clientHeight+1/3);
console.log(index);
$(".list-unstyled li").eq(index).addClass("liclass").siblings().removeClass("liclass");//给序号为1的加上红色背景
});6.禁止小屏幕网页缩放
才开始学习前端的时候,服务器上传好的页面在手机端访问总不是很理想,后来知道是因为缩放的问题,手机端会默认按照大小比例进行缩放,所以手机端看起来很小.解决方法就是禁止缩放.
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>