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"/>

你可能感兴趣的:(html)