您现在的位置:首页 >> 前端 >> 内容

HTML小知识点积累

时间:2016/4/7 9:37:21 点击:

  核心提示:1.如何让heigth:100%起效???有时候我们设置heigth;100%,想让当前控件铺满整个屏幕,但是很少情况下这个属性能达到我们想要的效果,这是为什么呢???而根据W3C的规范,百分比的高度...

1.如何让heigth:100%起效?

??有时候我们设置heigth;100%,想让当前控件铺满整个屏幕,但是很少情况下这个属性能达到我们想要的效果,这是为什么呢?
??而根据W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个p的高度设定为height: 50%;,而它的父元素的高度是100px,那么,这个p的高度应该是50px。
那么,为什么没效果呢?
??浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

??因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
??解决方法就是把父级元素全部设为100%的高度,覆盖掉默认的auto


这样这个p的高度就会100%了

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,#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标签


再或者指定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的加上红色背景
    });

Tags:HT TM ML L小 
作者:网络 来源:蜕变之路