HTML小知识点积累

来源：互联网发布：什么是数据库设计编辑：程序博客网时间：2024/05/21 07:55

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;    width: 100vw;  // 这个设置容器宽度为浏览器宽度    height: 100vh; // 这个设置容器高度为浏览器高度    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: tablewidth: automargin-left: automargin-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.禁止小屏幕网页缩放

才开始学习前端的时候,服务器上传好的页面在手机端访问总不是很理想,后来知道是因为缩放的问题,手机端会默认按照大小比例进行缩放,所以手机端看起来很小.解决方法就是禁止缩放.

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>

想永远固定在底部,肯定要使用绝对定位,那么就会要求页面的最小高度为整个浏览器屏幕高度,最大高度不限制.所以html要如下设置.

html{    position: relative;//便于绝对定位    height: auto;//最大不限制高度    min-height: 100%;//最先为整个屏幕的高度}

那么footer就如下设置定位即可

footer{    height:100px;    position:absolute;//绝对定位    bottom:0;//保证在底部    width: 100%;    background: #48525E;    border: 1px solid blue;}

7.禁用页面滚动条

<body scoll=no> 全禁止<body style="overflow:scroll;overflow-y:hidden"> 禁止纵向滚动条<body style="overflow:scroll;overflow-x:hidden"> 禁止纵向滚动条overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条

8.响应式图片

<div style="margin: auto;display: table; text-align: center;margin-bottom: 0">      <img src="images/bg-one-img.png" style="max-width:100%"></div>

9.单行多行文本溢出显示省略号

单行:

    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;

多行:

 overflow : hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 4;    -webkit-box-orient: vertical;

10.阻止a链接跳转onclick和href

链接的onclick事件被先执行，其次是href属性下的动作（页面跳转，或 javascript 伪链接）；
假设链接中同时存在href与onclick，如果想让href属性下的动作不执行，onclick必须得到一个false的返值；
如果页面过长有滚动条，且希望通过链接的 onclick事件执行操作。应将它的 href属性设为 javascript:void(0); ，而不要是 #，这可以防止不必要的页面跳动；

2 1