1.怎样让heigth:100%起效?

??有时候我们设置heigth:100%,想让当前控件铺满整个屏幕,可是非常少情况下这个属性能达到我们想要的效果,这是为什么呢?

??而依据W3C的规范。百分比的高度在设定时须要依据这个元素的父元素容器的高度。所以，假设你把一个div的高度设定为height: 50%;。而它的父元素的高度是100px，那么。这个div的高度应该是50px。

那么,为什么没效果呢?

??浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动栏出现)。或者你给整个页面设置一个绝对高度。

否则。浏览器就会简单的让内容往下堆砌。页面的高度根本就无需考虑。

??由于页面并没有缺省的高度值。所以。当你让一个元素的高度设定为百分比高度时，无法依据获取父元素的高度，也就无法计算自己的高度。换句话说。父元素的高度仅仅是一个缺省值：height: auto;。当你要求浏览器依据这样一个缺省值来计算百分比高度时，仅仅能得到undefined的结果。也就是一个null值，浏览器不会对这个值有不论什么的反应。

??解决方法就是把父级的元素中所有设为100%的高度,覆盖掉默认的auto

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,#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.禁止小屏幕网页缩放

才開始学习前端的时候,server上传好的页面在手机端訪问总不是非常理想,后来知道是由于缩放的问题,手机端会默认依照大小比例进行缩放,所以手机端看起来非常小.解决方法就是禁止缩放.

6.将footer永远固定在底部

想永远固定在底部,肯定要使用绝对定位,那么就会要求页面的最小高度为整个浏览器屏幕高度,最大高度不限制.所以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.禁用页面滚动栏

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时怎样显示内容

overflow: auto; 在须要时内容会自己主动加入滚动栏

overflow: scroll; 总是显示滚动栏

overflow-x: hidden; 禁止横向的滚动栏

overflow-y: scroll; 总是显示纵向滚动栏

8.响应式图片

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); 。而不要是 #。这能够防止不必要的页面跳动；